Bootstrap with Less workflow

I’ve been working with Bootstrap for quite some time now and I’m ashamed to admit that I started using its LESS workflow (uncompiled) version only recently. It’s been the best move I’ve made in my front-end development career since it made the process of developing and maintaining websites a lot faster.

Why should you switch to using the Bootstrap with LESS workflow?

Basically there are two main reasons why you should switch to Bootstrap’s Less workflow (uncompiled) version.

• Website performance optimization
• Easier maintenance

When you download Bootstrap’s build you end up with a lot of unused CSS which affects your website load times and performance. Fortunately Bootstrap allows you to customize your build by unchecking the components you don’t need. That’s a big step forward towards website performance optimization but makes it harder to update your website to the new Bootstrap version when it comes out (hence the harder maintenance).

This is where LESS (uncompiled) build comes in to save the day.

Bootstrap with LESS workflow

I won’t go into details on how LESS works or how Bootstrap is built. Instead, I’ll share with you my workflow and file structure when building new project with Bootstrap.

NOTE This file structure and workflow can also work for Bootstrap Sass port and Foundation framework.

I use CodeKit for code compiling. It’s a great tool used for compiling Sass/Less and a lot more. It’s currently available on OS X only so if you’re on a Windows machine you can use Prepros or Grunt if you’re more a command line person.

The following screenshot shows the folder structure for one of my projects.

Folder structure

The project folder contains “public” and “source” root folders.

The “source” folder holds all my .less files (inside “less” folder) and JS files (inside “js” folder). Inside the “less” folder there are folders for different components and extensions. Each folder contains all .less files for that component/extension. In this example project I have one folder for Bootstrap .less files (this is where I download all Bootstrap .less files from the GitHub repo), one for Font Awesome .less files and one for Jasny Bootstrap .less files.

Everything that applies for “less” folder applies for “js” folder. In this example there are two folders inside the “js” folder. One for all Bootstrap .js files and other for all Jasny Bootstrap .js files. There are some .less files in the root of the “less” folder also.

custom-bootstrap-variables.less is a copy of bootstrap-variables.less (found in “bootstrap” folder) file.
This file is used instead of the Bootstrap one so the changes you make to Bootstrap variables don’t get overwritten when you update to a newer version of the framework.

The same logic applies for custom-jasny-bootstrap-variables.less file. It’s a copy of jasny-bootstrap-variables.less found in “jasny-bootstrap” folder

main.less is the file in which I write my theme styles. You can write all your theme styles here or separate them into smaller .less files (ex. header.less, sidebar.less, footer.less…). Just make sure you import them all.

mixins.less holds all my custom mixins.

variables.less holds all my custom variables.

styles.less is the most important .less file. It imports all other .less files and gets compiled to style.css in “public” folder. Make sure you comment out the .less files for the components you don’t need in your project. Files that are commented out don’t get compiled to CSS.

Quite a few imports!

An important thing to note is to import your custom .less files (mixins.less, variables.less, main.less) last. This way you can overwrite variables used in Bootstrap and other components inside your custom .less files.

The “public” folder is basically your production folder. It contains all the standard stuff.

• “img” folder for project images
• “js” folder for scripts
• “css” folder for your compiled css
• “fonts” folder for your custom fonts (in this case Font Awesome)

Reasoning behind the folder structure

At first glance this folder structure can seem a bit complicated but it’s all for a good reason.

It allows you to easily update your Bootstrap to a newer version without affecting your custom styles. Updating is really simple. You just download the new .less files in your source/less/bootstrap folder and new .js files into source/js/bootstrap folder. This way your custom styles remain unchanged (remember those custom-bootstrap-variables.less & custom-jasny-bootstrap-variables.less files).
Same logic applies when updating one of the components.

This structure also allows you to easily add and remove Bootstrap components as you need them. It’s simple as commenting and un-commenting imports in your style.less file.

Of course nothing about this workflow is set in stone. This example is meant to be a starting point for your development adventures with Bootstrap with the LESS workflow. You should try to find the workflow that best suites you and your team.
I encourage you to experiment with it.

Have fun!

UPDATE: Our Bootstrap with Less workflow at Slicejack has changed a bit since I wrote this. Take a look at this article, if you want to know what’s changed.