Customizing Bootstrap CSS template

Question

I am just getting started with Bootstrap from Twitter and am wondering what the ‘best practices’ is for customization. I want to develop a system that will take advantage of

Answer 1

The best option in my opinion is to compile a custom LESS file including bootstrap.less, a custom variables.less file and your own rules :

1. Clone bootstrap in your root folder : git clone https://github.com/twbs/bootstrap.git
2. Rename it "bootstrap"
3. Create a package.json file : https://gist.github.com/jide/8440609
4. Create a Gruntfile.js : https://gist.github.com/jide/8440502
5. Create a "less" folder
6. Copy bootstrap/less/variables.less into the "less" folder
7. Change the font path : @icon-font-path: "../bootstrap/fonts/";
8. Create a custom style.less file in the "less" folder which imports bootstrap.less and your custom variables.less file : https://gist.github.com/jide/8440619
9. Run npm install
10. Run grunt watch

Now you can modify the variables any way you want, override bootstrap rules in your custom style.less file, and if some day you want to update bootstrap, you can replace the whole bootstrap folder !

EDIT: I created a Bootstrap boilerplate using this technique : https://github.com/jide/bootstrap-boilerplate