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:
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:
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:
They already provide 11 swatches to choose from, so let's forget about ugly sites with the default Bootstrap theme!