Reasons for standardizing on Twitter Bootstrap

At last year’s Confoo conference in Montreal, I attended a number of talks where front-end folks were bashing Twitter Bootstrap. They came up with reasons for not using it:

  1. Bootstrap sites all look the same.
  2. Bootstrap is too heavy and gives you too much stuff.
  3. Bootstrap is hard to override.

I’ve now come to the conclusion that these practitioners are dead wrong. There are many reasons for using Bootstrap and why you should consider just standardizing on it. At Ballistiq, we’ve just decided to stick with Bootstrap, and I wanted to report that the benefits far outweigh any negatives (and there aren’t many).

Are you using Bootstrap correctly?

Most people just aren’t using Bootstrap the right way. Most folks just download the Bootstrap minified distribution files and use those. Instead, you should be using the Bootstrap source (the LESS or SCSS files) and using it as a framework for your CSS.

An easy way to get the latest source files for Bootstrap is to use Bower.

$ bower install bootstrap

or

$ bower install bootstrap-sass

Once you have the files, graft Bootstrap into your own CSS using an @import statement. Override the Bootstrap variables with your own. Use a tool such as CodeKit to compile the LESS/SCSS files.

When you integrate Bootstrap as a framework, it becomes an extremely powerful and flexible tool in building UI’s. With a few minor changes to variables, you can create completely different looking UI’s. For example, you might prefer the look of Zurb Foundation (which doesn’t have as many components as Bootstrap). That’s literally a 1 min change to Bootstrap’s default variables. Just import the Open Sans font from Google and set that as the default font, change the default font size to 16px and set the default border radius to 0px and bam, you have a Zurb looking Bootstrap.

Why Standardize on Bootstrap?

For us, standardizing on Bootstrap as a framework has helped in so many ways:

1. We’re working with one CSS styling language. In the past, we were working with a whole myriad of different and custom CSS frameworks. Now, we’re focused on a single styling language which speeds everything up. Rather than looking up CSS or trying to style it ourselves, we already know the common classes and we’re just speedily prototyping pages and putting iterations in front of the customer. The speed and efficiency from using Bootstrap has been a huge win.

2. Handling edge cases Bootstrap is a mature framework that has many contributors worldwide and thousands of websites using it. This means that most edge cases have been resolved.

3. Many components — even the ones you haven’t thought of using yet Bootstrap has so many different components that it makes working with clients much faster and easier. I was in an unfortunate situation with one project where our front-end developer had convinced me (when I didn’t know better) to write his own CSS. When I needed a new component like a table, it hadn’t been designed or styled! It had to go through a design process then a markup process. It took forever to get anything done. With Bootstrap, they’ve thought of 90% of the things that you will need on a web application.

Debunking the Myths

  1. “Bootstrap sites all look the same.” No they don’t. By changing a few variables you can get a vastly different looking site.
  2. “Bootstrap is too heavy and gives you too much stuff you don’t need.” This is also a myth. You can remove components easily by just removing them from the main bootstrap.less file.
  3. “Bootstrap is hard to override”. Because you’re using it wrong. You’re just downloading the CSS and trying to override it. Try downloading the source files in LESS/SCSS and use Bootstrap as a framework instead.

The Bootstrap naysayers have no legs to stand on in their arguments. Their only valid reason for not wanting to use Bootstrap is that they just want to write their own CSS.

  • leo

    Very interesting, just a question left, which IDE do you prefer for working all these languages together, a powered up code editor as sublime? Or do you have another pre configured IDE such as eclipse to work with?

    • Use PHPStorm or Webstorm

      • leo

        Many thanks!

  • Emmanuel Natividad

    I’m actually still in college, using bootsrap for some competition. I can testify that inexperienced people will just embed the compiled version of bootstrap’s css. I’m actually guilty of this but I found out by myself that I should be using sass (ruby on rails).

    I can relate with these people who do not understand what less and sass is. everything about learning a new language (the syntax, dependencies, platform specific installation steps) can be overwhelming.