7/3/2015 - 12:32 AM

Bootstrap - Customize with Modular Less Files

Smashing Magazine

Modularizing Your Changes

You might notice a limitation of the approach above. Your changes are now intertwined with the original source. 
So, when Bootstrap is inevitably updated with bug fixes and new features, disentangling your customizations and 
updating them to the new version will be nearly impossible.

To avoid this issue, you’ll want to modularize your changes. Here’s the approach I take when making themes for Bootswatch.

First, I download Bootstrap’s source code, rename it to bootstrap and leave it untouched. Instead of making changes to the 
files that it contains, I create a separate folder, named custom, with these three files:

    I make a copy of variables.less from Bootstrap’s source and modify the variables in this copy instead.
    This file holds any other customizations that I want to make that aren’t possible with the variables.
    This is the new “central” file that you’ll compile to CSS. Along with the original LESS files, 
    it imports the two custom files above using the following commands:

@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

By keeping the changes separate, you can easily upgrade to newer versions of Bootstrap. Just replace the old 
bootstrap directory with the new one, and recompile.

I’ve created a boilerplate for this set-up, named swatchmaker. It also includes some extras, such as test pages 
and commands to update Bootstrap to the latest version, to automatically compile whenever changes are saved, and 
to reset your customizations.