Search code examples
twitter-bootstrapcdn

Customized Bootstrap and CDNs

I'm a bit confused over how customized Bootstrap plugins work, and if/how they work with traditional CDNs.


Tweaking customizations online?

If I understand Bootstrap 3's docs correctly, the standard way to customize your Bootstrap look-and-feel is to go to this page, change variables, and then download the generated/customized version to your machine.

But how do I know if I'm going to like the changes I made until I actually see it in action? Without the ability to apply my changes to some sort of "online showcase", I'll have to:

  1. Make the changes (could take 20 - 30 mins per cycle)
  2. Click the "Compile and Download" button
  3. Download and unpack the custom version
  4. Put it to use in my own app and wait to see something I don't like; when that happens, rinse and repeat starting at Step #1 above

This is an expensive dev/test cycle (both expensive time-wise for the end developer, and expensive on the server-side for the Bootstrap servers churning all these customizations).

So my first question: is there a way to make changes on that page, and then see them in action on some sort of show case? If not, what do hardcore Bootstrap developers do to customize/tweak Bootstrap efficiently?


Custom Bootstrap versions and CDNs

So there are a lot of popular Bootstrap CDNs out there. The one I see again and again is:

https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

But I have to assume this URL just pulls down the "normal" (non-customized) latest version of Bootstrap, yes? So, for me to put my custom version on a CDN, I'd have to pay to host it myself.

So I ask: Are there CDNs that will host custom Bootstrap versions for you? If not, then is there a way to code/configure Bootstrap so that it only pulls down my custom CSS changes from my web server, but then pulls down all template/normal/JS code from a CDN? How do hardcore Bootstrap devs handle CDN hosting for their custom Bootstrap flavors?

Solution

  • What I do is download the source for Bootstrap and create a LESS file for my customizations and overrides. I load this directly after the Bootstrap variable LESS is loaded and then I compile to CSS. This allows me to quickly make mods in a separate LESS file and compile the base Bootstrap which can be upgraded without overwriting any of my changes. Bootstrap does have its own grunt file if you were to use grunt to compile, which I do.

    You could host on something like CloudFlare CDN.