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.

  1. Create a folder named overrides in your Bootstrap source folder. This is the folder you will do all your customizations in, You will never need to make changes to the Bootstrap source.
  2. Copy the bootstrap.less and variables.less from the source to the overrides folder. Rename the copied bootstrap.less file to bootstrap-custom.less or whatever you prefer.
  3. Edit the boostrap-custom.less file and point all @imports to the parent folder like @import “../variables.less”;.
  4. For each core file you want to override, add an @import under each of the core references like @import “variables.less”; which will point to the file in the overrides folder.
  5. If you want to override classes or mixins in any other source file like navbar.less you just create an empty navbar.less file in the overrides folder and add it to bootstrap-custom.less like you did in step 4. Just remember to put it after the source import.
  6. Reference bootstrap-custom.less in your main LESS file.

Folder/file structure

Here is what the folder/file structure look like.

Bootstrap-custom.less

Here is what the bootstrap-custom.less look like.

site.less

 

Benefits of the setup

There are several benefits in setting up Bootstrap this way, here are a few.

  • Upgrade Bootstrap with minimal customization
  • Modify variables to fit your needs
  • Customize mixins, navbars, buttons or any other components
  • Use mixins and variables in your styles
  • The structure is easy to maintain and for other developers to understand.

That’s it! Please tell me your opinions on best practices for setting up Bootstrap, I’d love to hear them.

 

About Christofer Grinndal