Twitter bootstrap has made developers lives better. It is easy to install, fast to implement and has all the structure you could need to make a not horrible looking website. The only downside is everyone’s sites now look the same. It doesn’t have to be this way, Twitter bootstrap is also easy to customize.
The other day I came across a project called Bootswatch from Thomas Park (@thomsapark on twitter) that makes it even easier to customize your bootstrap site.
This tutorial will show you how to customize an existing rails 3 app that is already setup using the twitter-bootstrap-rails gem.
(See https://github.com/seyhunak/twitter-bootstrap-rails for twitter-bootstrap-rails gem instructions)
1. In your app/assets/stylesheets directory create a bootswatch folder
2. Download a custom look from BootSwatch.com
Select your theme and from the dropdown arrow on the download button get the variables.less & bootswatch.less files and save them to your bootswatch folder.
3. In your bootstrap_and_overrides.css.less below @import “twitter/bootstrap/responsive”;
4. Modify application.css
*= require_tree .
*= require “bootstrap_and_overrides”
Leaving require_tree will cause your application to error out because it will include the bootswatch files twice. Once where we included it in step 3 and a second time outside the context of bootstrap. The second time is the problem because the files reference variables set in the base bootstrap install.
5. View the site in your browser and you should see the new custom look bootstrap site
What’s Going On Here
From bootswatch.com you are downloading some less files. For those that don’t know less is less gets compiled into CSS. Less is what twitter bootstrap is written in.
The less files we have added are overriding the default values in the base bootstrap files.
Specifically variables.less is reassigining the variables and bootswatch.less is changing structural elements of the layout.
If you are a designer and want to make custom Bootswatches there is a swatchmaker project on github https://github.com/thomaspark/bootswatch/tree/master/swatchmaker