Bootstrap Use or Abuse

It happens quite often. We take a framework, use the full, unminified version in a project we’re working on, then leave it. Bootstrap is just the latest addition to the stable of libraries we abuse. jQuery, Modernizr, D3. The amount of weight we add to websites we develop is quickly increasing. This chart from the HTTP Archive shows that the average page weight has gone up 24% in the last 12 months. The number of requests has also gone up dramatically.

The newest version of Twitter Bootstrap (as of this post) is version 3. Even though it’s significantly lighter than previous versions (and mobile-first/responsive-ready by default!), it still weighs just under 100KB when minified. While that’s not totally deal-breaking, 100KB is 5x as much CSS as an average site should have, as well as 15%-20% of what all the assets on an average page should weigh. As you write more CSS to customize/override the Bootstrap defaults, it gets even heavier.

Twitter Bootstrap’s Weight Gain

Because it’s so difficult to customize Bootstrap, every time I have to work with it, I feel like I’m fighting it rather than having my development workflow enhanced by it. That leads to a lot of double selectors. Bootstrap gives a color and size, I override with another color and size. Rinse and repeat. Suddenly, 100KB is 120KB or worse.

By comparison, the entire set of CSS files for this page is less than 7KB.

Not only does Bootstrap add weight to the site CSS, which slows down the site, it also adds to the time it takes to build the display of the page by adding ~95KB of unused CSS.

Proper Uses of Bootstrap and Other Frameworks

There are actually good ways to use Twitter Bootstrap and other frameworks, and I do so quite often. The two main situations that I employ frameworks like this are:

1. Internal Projects: If something we am working on is going to be used for internal projects only, the developers use Bootstrap and can layout the site without involving front-end developers. This saves us time. It’s OK because performance doesn’t matter nearly as much as it would if the project were publicly accessible.
2. Rapid Prototyping: Bootstrap is a great tool for someone who is unfamiliar with CSS. It enables them to roughly layout their vision, and then we come in after and use their rough prototype to properly code the project.

I’m sure there are other examples of good uses of Bootstrap, but these are the two that I’ve run across in my life.

So What’s Better Than Bootstrap?

If you’re just getting started in front-end development and you’re not comfortable with your CSS skills, Bootstrap is a great place to start. Despite my reservations, it’s a really well-written framework. Figure out what you need out of it and take it. Don’t load it all.

If you are comfortable with your CSS skills, roll your own framework. Using your own tools will speed up your development workflow and greatly improve the quality of your final product. Know your tools and make them your own. It’s worth the extra effort.

Where do you start? Find a framework you like and fork it. Change class names and other details to match your coding style. Remove what you don’t need. Organize the project structure to match how you work. Push it back to GitHub so other people can learn from you, and then use it. You’ll make improvements to it with every site you launch, but it’s now yours.

What do I use? I’ve created my own framework and put it into a WordPress theme called “Squeaky Clean”. Fork it and make it your own on GitHub. I’d love to see how you use it. If you’re not a WordPress user, I’m converting it to a pure HTML boilerplate and I’ll post the link here and on Twitter when it’s done.