The key to getting the most out of Bootstrap is to use the less modules. I created a fork of bootstrap where I setup the following: * boostrap files are in a

The key to getting the most out of Bootstrap is to use the less modules. I created a fork of bootstrap where I setup the following: * boostrap files are in a subdir called 'boostrap' * in the 'css' directory create a less file for each style sheet, for eg. site.less, admin.less * in that site file, place all your variables and then include all the bootstrap files * under that, put in all your custom CSS * here is an example: https://gist.github.com/1356716 https://gist.github.com/1356716 * the top of the file is the contents of variables.less, then the includes, then custom CSS * copy the Makefile into your 'css' folder, and edit it to change the right paths * put your color theme (3, 4 o4 5 colors) at the top of the file and define them as variables. declare everything else (links, topbar etc.) as one of these colors or a lighter(), darker() etc. variation * there are tons of online color matchin sites, including the excellent Adobe Kuler - pick a color theme and plug it into less * learn how to use less: http://lesscss.org/ http://lesscss.org/ * instead of using span8, span14 etc. learn how to inherit in less. for eg. a sidebar 4 spans wide would be: #sidebar { ..makeColumn(4) } * use macro's to create your own custom gradients, for eg. .lightblue { .gradientBar(#5bc0de, #339bb9); } * use those mixins to create custom button styles. for eg. to create a custom topbar fill using the lightblue: .topbar.fill { .box-shadow(); .lightBlue(); } * also, I wrote another script that will autorefresh your browser in OSX when you save your less. so the combination of this makefile and this applescript will build the css file from less and refresh your browser whenever you save: https://gist.github.com/1326820 https://gist.github.com/1326820