Bootstrap Themes with Bootswatch

Jun 04, 2012
D3177da7794ac3ce603d65b33bf4a981

We all love how the "new" Twitter Bootstrap help us style our web apps so make our apps look good very easy :)

The downside is that, now a lot of (lazy) developers are using the "default" look provided by Twitter:

default_style

You can always manually customize all the variables provided by Bootstrap.

But I love to use the KISS principle, and therefore I will talk about Bootswatch

"Bootswatch is an open source collection of Bootstrap themes (aka swatches)"

Bootswatch gives you 2 options to use each swatch:

  • Using the Bootstrap modified version (they provide a normal and a minified version).
  • Using the LESS files with the modifications.

Because I'm using Twitter Bootstrap in the Asset Pipeline with the bootrstrap-sass gem, I want to avoid using any of these 2 options.

bootswatch-rails gem

Fortunately, there is a gem that will make our life easier:

bootswatch-rails

In summary, all we have to do is add the gem to our Gemfile, and import the swatch that we want to use. That's all!

Adding the gem

Modify you Gemfile with:

gem 'bootstrap-sass'       # should be already included
gem 'bootswatch-rails'

After this, just run:

bundle

Using a swatch (theme)

In the bootswatch-rails README, they ask you to modify application.css to include the bootstrap and bootswatch. I don't like this approach.

Instead, let's create a file in an Asset Pipeline (like app/assets/stylesheets/):

twitter_bootstrap.css.scss

// First import Bootswatch theme variables http://bit.ly/KIu8IN
@import 'bootswatch/slate/variables';

// Use Twitter Bootstrap
@import 'bootstrap';

// And finally Bootswatch style
@import "bootswatch/slate/bootswatch"

In this example, we are using the Slate swatch:

slate_theme

They already provide 11 swatches to choose from, so let's forget about ugly sites with the default Bootstrap theme!

More information:

blog comments powered byDisqus