Twitter's Bootstrap in the Asset Pipeline

Feb 03, 2012
72d86bb5aaaa1720ede338f4ad613344

Hello. We're in February already. We've been so unbelievable busy at Crowd Interactive that we almost forgot about our blog, but worry not, we're back.

So, you've probably heard about Twitter's Bootstrap, the new hotness when it comes to CSS frameworks.

I've been using it for a couple of websites where design doesn't really matter and it has really helped me make them look good without too much effort. I even wrote a gem to make forms look good even faster, though, since SimpleForm just got Bootstrap too, I think it became a way better and more complete option to style your forms.

Well, the only piece that was missing for me was being able to use Bootstrap in the Rails 3.1+ Asset Pipeline, so I could write my own CSS classes along with the Bootstrap mixins.

For this example, let's pretend that we want to use Bootstrap to make all the tables on our website look good. If you take a look at the documentation, when you are using the Bootstrap CSS file directly, to make a table look good you would have to add a couple of classes, depending on what you want to see:

<table class="table table-bordered table-striped">
  ...
</table>

There's two problems here, first, look at all those classes!, second, think of all the tables that will be part of your website. What will happen when you want to remove the border on all of them? You'd have to edit one by one and remove the .table-bordered. class A lot of unnecessary work, if you ask me.

This is a case where you want to use the asset pipeline to mix Bootstrap with your own classes.

First thing you have to do is include the excellent less-rails-bootstrap gem in your Gemfile.

gem 'less-rails-bootstrap'

Now, edit your app/assets/stylesheets/application.css file and require bootstrap:

/*
 *= require 'twitter/bootstrap'
 *= require_self
 *= require_tree .
*/

This includes all the Bootstrap CSS directly into your own CSS, the same thing as including it as a separate file on your HTML headers. Look at your website, it already looks better just by doing this.

Now, go ahead and create a file called app/assets/stylesheets/tables.css.less.

Before you can use Bootstrap mixins on a less file, you always have to import these two mixin files at the very top:

@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";

Don't worry, if you don't use them at all, no code will be added to the resulting CSS file.

For our specific example, we want to use the tables mixins, so we import that file too:

@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";
@import "twitter/bootstrap/tables";

Now, we can use the table mixins on our own classes or elements. In this case, I want all the tables to look exactly the same:

@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";
@import "twitter/bootstrap/tables";

table {
  .table;
  .table-bordered;
  .table-striped;
}

This makes all the tables on the website look exactly the same, all bordered and striped.

Your HTML suffers no more from class-itis:

<table>
  ...
</table>

And still, all tables, look bordered and striped!

If, for example, you just want to get rid of the table border, you'd just remove the .table-bordered mixin from this .less file, not from all the view files. Cake.

You might want to take a look at all the bootstrap .less source files to get a better idea of all the mixins that you can use, they all have great inline documentation.

Update 02/06

Thanks to hishma for this excellent tip.

You can achieve the same thing with the bootstrap-sass gem as explained on this gist.

This way, if you are uncomfortable using less for your css files you can still use scss.

More reading

blog comments powered byDisqus