4

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?

Community
  • 1
  • 1
smeeb
  • 27,777
  • 57
  • 250
  • 447

3 Answers3

3

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.

Aibrean
  • 6,297
  • 1
  • 22
  • 38
  • Thanks @Airbrean (+1) - how could I code so that I fall back to my web server if the CDN is down for some reason? – smeeb Oct 20 '14 at 17:28
  • http://stackoverflow.com/questions/7383163/how-to-fallback-to-local-stylesheet-not-script-if-cdn-fails The first answer should do it. – Aibrean Oct 20 '14 at 17:30
  • Off topic, but @Aibrean have you needed to change the border width on all components that don't require going into the source less file? There's no variable border-width (which is 1px) and I want 2px and that means on various elements the negative margin is now -2px. So in my own stuff I have that and I have to re-declare all of those components, at least in that regard. – Christina Oct 20 '14 at 17:45
3

Is there a way to make changes on that page, and then see them in action on some sort of show case?

No, although there are third-party customizers that do have such a live preview feature.

what do hardcore Bootstrap developers do to customize/tweak Bootstrap efficiently?

Build Bootstrap locally via Grunt. Then run the docs locally to see how your customizations look. Then make more changes. Lather, rinse, repeat.

This is expensive on the server-side for the Bootstrap servers churning all these customizations

Actually it's quite cheap! The Customizer runs entirely on the client side.

But I have to assume this URL just pulls down the "normal" (non-customized) latest version of Bootstrap, yes?

Correct.

Are there CDNs that will host custom Bootstrap versions for you?

Just use a normal CDN. Bootstrap is just like any other frontend library; the CDN doesn't need to treat it specially.

cvrebert
  • 9,075
  • 2
  • 38
  • 49
  • Thanks @cvrebert (+1) - a few followup questions: (1) when you say "run the docs locally", what do you mean? Does Bootstrap have a "widget showcase" inside its documentation that devs use to check customizations? (2) How can I code so that the JS/CSS/image files get served from my web server in the case that the CDN is down? – smeeb Oct 20 '14 at 17:30
  • Locally being on your development machine (your computer). – Aibrean Oct 20 '14 at 17:32
  • (1) 80% of the docs is a widget showcase. (2) Too tangential; post a new question for it. – cvrebert Oct 20 '14 at 17:33
0

Using a CDN is primarily a performance issue. The idea behind CDN is that if multiple websites use the same resource, for instance bootstrap.min.js, it is loaded only once and stored in the browsers cache for all websites to use. Another advantage is that the CDN source will be loaded parallel as it originates from another server. Browser tend to open a max of two connection to one browser. A third advantage is that CDN content is hosted in many geographical location and the one closest to you and therefor fastest is used.

If you customize your bootstrap you no longer can share this with other websites. The constrains for the first advantage are not met. If your main concern is performance than what you could do is use a different hostname for the staioc conetent (bootstrap, images, styles etc.)

For instance

It doesn't matter if www.example.com and static.example.com run on the same server. Only the hostname counts.

theking2
  • 2,174
  • 1
  • 27
  • 36