Bootstrap 3 – Deep customization of Bootstrap

Adding your own style sheet works when you are trying to do something quick or when the modifications are minimal. Customizing Bootstrap beyond small changes involves using the uncompiled Bootstrap source code. The Bootstrap CSS source code is written in LESS with variables and mixins to allow easy customization.

Note

LESS is an open source CSS preprocessor with cool features used to speed up your development time. LESS allows you to engage an efficient and modular style of working making it easier to maintain your CSS styling in your projects.

The advantages of using variables in LESS are profound. You can reuse the same code many times thereby following the write once, use anywhere paradigm. Variables can be globally declared, which allows you to specify certain values in a single place. This needs to be updated only once if changes are required.

LESS variables allow you to specify widely used values such as colors, font family, and sizes in a single file. By modifying a single variable, the changes will be reflected in all the Bootstrap components that use it; for example, to change the background color of the body element to green ( #00FF00 is the hexadecimal code for green), all you need to do is change the value of the variable called @body-bg in Bootstrap as shown in the following code:

@body-bg: #00FF00;

Mixins are similar to variables but for whole classes. Mixins enable you to embed the properties of a class into another. It allows you to group multiple code lines together so that it can be used numerous times across the style sheet. Mixins can also be used alongside variables and functions resulting in multiple inheritances; for example, to add clearfix to an article, you can use the .clearfix mixin as shown in the left column of the following table. It will result in all clearfix declarations included in the compiled CSS code shown in the right column:

article
{
  .clearfix;
}
{
article:before,
article:after
{
content: " "; // 1
display: table; // 2
}
article:after
{
    clear: both;
}
}

Note

A clearfix mixin is a way for an element to automatically clear after itself, so that you don’t need to add additional markup. It’s generally used in float layouts, where elements are floated to be stacked horizontally.

Downloading the Bootstrap source code

You can download the Bootstrap source code package containing the LESS files and other components if you want to customize Bootstrap beyond small modifications. There are several ways to obtain the source code. The easiest way to obtain the source code is from the official website at http://getbootstrap.com/getting-started/#download. Refer to the following screenshot for the highlighted button for the source code:

Once you click on the Download source button, you will obtain the source code package in a ZIP format. On unzipping, we get the following screen wherein you can view the less folder, various other tools such as the grunt task runner, and other source code elements:

Alternatively, you can find the entire source code on GitHub at https://github.com/twbs/bootstrap. On the same page, click on the highlighted link shown clearly in the following screenshot to obtain the source code in the ZIP format:

On unzipping it, you will see the source code, which is similar to the one downloaded from the official website. Unzip the package and you will find all the components, LESS files, and other folders.

Note

You can also use the Bower web package manager available at http://bower.io/. Run the command bower install bootstrap in your project folder to download Bootstrap.

Compiling LESS files

You can compile your Bootstrap file using two different methods. Either you can use a GUI program such as SimpLESS or WinLess to compile your LESS files or use the command line as per your preference.

Using SimpLESS to compile LESS files

SimpLESS is a product developed by KISS, an organization based in Germany. You can download SimpLESS from the official website at http://wearekiss.com/simpless. It is a multi-platform tool, meaning it works well on Windows, Mac, and Linux.

After installing SimpLESS, you will see the interface as depicted in the following screenshot:

You need to drag-and-drop the bootstrap.less file from the less folder to SimpLESS. SimpLESS includes on the fly compilation, meaning that it will automatically compile to bootstrap.css every time you modify and save the LESS files. It comes with power-packed features such as minification, out-of-the-box notifications, and an automatic LESS updater.

Using WinLess to compile LESS files

WinLess is a GUI for the Windows platform to convert LESS to CSS. You can download the WinLess utility from the official website at http://winless.org/.

Once you download the utility, you need to click on the installer and click on Run. You can launch the utility and you will see the following screen:

You can either add the folder containing LESS files or drop the required folder in the folder pane. Click on Compile and the conversion from LESS to CSS takes place. You just need to click on Refresh folder for the changes to reflect in your folder.

We will use the WinLess utility to convert the LESS files to CSS in this chapter.

Using the command line to compile LESS files

You can also compile LESS using the command line via the NPM, which is the Node package manager. NPM is installed simultaneously when you install Node.js on your computer. You can download the latest version of Node.js from the official Node.js website at http://nodejs.org/download/.

Run the following command to install LESS:


npm install -g less

Once LESS is installed, you can use it from the following command line:


lessc bootstrap.less > bootstrap.css

To generate a minified version of the CSS file, add the --yui-compress option to the previous command:


lessc --yui-compress bootstrap.less > bootstrap.min.css

If you want the file to be automatically compiled when you make a change, you can also use the watch option, -w.

Comments are closed.