Twitter Bootstrap – keep customizations and source separated

I love Twitter Bootstrap and it gets even better with LESS. The LESS version of Bootstrap gives you control over a variety of variables to change such as colors, font-sizes and grid-sizes. It also comes with lots of mixins like border-radius, transitions and gradients that you can reuse anywhere.

One thing that I been struggling with is how to keep the Bootstrap source code separated from the customizations I need. You don’t want to go in and make changes to the source since you are likely to update Bootstrap in the future. You want to be able to switch to a newer version with minimum changes.

Here is a step by step guide on how I’ve been settings up Bootstrap for my latest projects. It’s not only about overriding variables but keeping the same file structure of your customizations as the Bootstrap source making it easier to maintain and for other developers to understand.