9 min read

(For more resources related to this topic, see here.)

Bootstrap 3

Bootstrap 3, formerly known as Twitter’s Bootstrap, is a CSS and JavaScript framework for building application frontends. The third version of Bootstrap has important changes over the earlier versions of the framework. Bootstrap 3 is not compatible with the earlier versions.

Bootstrap 3 can be used to build great frontends. You can download the complete framework, including CSS and JavaScript, and start using it right away. Bootstrap also has a grid. The grid of Bootstrap is mobile-first by default and has 12 columns. In fact, Bootstrap defines four grids: the extra-small grid up to 768 pixels (mobile phones), the small grid between 768 and 992 pixels (tablets), the medium grid between 992 and 1200 pixels (desktop), and finally, the large grid of 1200 pixels and above for large desktops.

The grid, all other CSS components, and JavaScript plugins are described and well documented at http://getbootstrap.com/.

Bootstrap’s default theme looks like the following screenshot:

Example of a layout built with Bootstrap 3

The time when all Bootstrap websites looked quite similar is far behind us now. Bootstrap will give you all the freedom you need to create innovative designs.

There is much more to tell about Bootstrap, but for now, let’s get back to Less.

Working with Bootstrap’s Less files

All the CSS code of Bootstrap is written in Less. You can download Bootstrap’s Less files and recompile your own version of the CSS. The Less files can be used to customize, extend, and reuse Bootstrap’s code. In the following sections, you will learn how to do this.

To download the Less files, follow the links at http://getbootstrap.com/ to Bootstrap’s GitHub pages at https://github.com/twbs/bootstrap. On this page, choose Download Zip on the right-hand side column.

Building a Bootstrap project with Grunt

After downloading the files mentioned earlier, you can build a Bootstrap project with Grunt. Grunt is a JavaScript task runner; it can be used for the automation of your processes. Grunt helps you when performing repetitive tasks such as minifying, compiling, unit testing, and linting your code.

Grunt runs on node.js and uses npm, which you saw while installing the Less compiler. Node.js is a standalone JavaScript interpreter built on Google’s V8 JavaScript runtime, as used in Chrome. Node.js can be used for easily building fast, scalable network applications.

When you unzip the files from the downloaded file, you will find Gruntfile.js and package.json among others. The package.json file contains the metadata for projects published as npm modules. The Gruntfile.js file is used to configure or define tasks and load Grunt plugins. The Bootstrap Grunt configuration is a great example to show you how to set up automation testing for projects containing HTML, Less (CSS), and JavaScript. The parts that are interesting for you as a Less developer are mentioned in the following sections.

In package.json file, you will find that Bootstrap compiles its Less files with grunt-contrib-less. At the time of writing this article, the grunt-contrib-less plugin compiles Less with less.js Version 1.7. In contrast to Recess (another JavaScript build tool previously used by Bootstrap), grunt-contrib-less also supports source maps.

Apart from grunt-contrib-less, Bootstrap also uses grunt-contrib-csslint to check the compiled CSS for syntax errors. The grunt-contrib-csslint plugin also helps improve browser compatibility, performance, maintainability, and accessibility. The plugin’s rules are based on the principles of object-oriented CSS (http://www.slideshare.net/stubbornella/object-oriented-css). You can find more information by visiting https://github.com/stubbornella/csslint/wiki/Rules.

Bootstrap makes heavy use of Less variables, which can be set by the customizer.

Whoever has studied the source of Gruntfile.js may very well also find a reference to the BsLessdocParser Grunt task. This Grunt task is used to build Bootstrap’s customizer dynamically based on the Less variables used by Bootstrap. Though the process of parsing Less variables to build, for instance, documentation will be very interesting, this task is not discussed here further.

This section ends with the part of Gruntfile.js that does the Less compiling. The following code from Gruntfile.js should give you an impression of how this code will look:

    less: {
      compileCore: {
        options: {
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        files: {
          'dist/css/<%= pkg.name %>.css': 'less/bootstrap.less'
        }
      }

Last but not least, let’s have a look at the basic steps to run Grunt from the command line and build Bootstrap. Grunt will be installed with npm. Npm checks Bootstrap’s package.json file and automatically installs the necessary local dependencies listed there.

To build Bootstrap with Grunt, you will have to enter the following commands on the command line:

> npm install -g grunt-cli
> cd /path/to/extracted/files/bootstrap

After this, you can compile the CSS and JavaScript by running the following command:

> grunt dist

This will compile your files into the /dist directory. The > grunt test command will also run the built-in tests.

Compiling your Less files

Although you can build Bootstrap with Grunt, you don’t have to use Grunt. You will find the Less files in a separate directory called /less inside the root /bootstrap directory. The main project file is bootstrap.less; other files will be explained in the next section.

You can include bootstrap.less together with less.js into your HTML for the purpose of testing as follows:

  <link rel="bootstrap/less/bootstrap.less"
type="text/css" href="less/styles.less" />
  <script type="text/javascript">less = { env: 'development' };</script>
  <script src = "less.js" type="text/javascript"></script>

Of course, you can compile this file server side too as follows:

lessc bootstrap.less > bootstrap.css

Dive into Bootstrap’s Less files

Now it’s time to look at Bootstrap’s Less files in more detail. The /less directory contains a long list of files. You will recognize some files by their names. You have seen files such as variables.less, mixins.less, and normalize.less earlier. Open bootstrap.less to see how the other files are organized. The comments inside bootstrap.less tell you that the Less files are organized by functionality as shown in the following code snippet:

// Core variables and mixins
// Reset
// Core CSS
// Components

Although Bootstrap is strongly CSS-based, some of the components don’t work without the related JavaScript plugins. The navbar component is an example of this. Bootstrap’s plugins require jQuery. You can’t use the newest 2.x version of jQuery because this version doesn’t have support for Internet Explorer 8.

To compile your own version of Bootstrap, you have to change the variables defined in variables.less. When using the last declaration wins and lazy loading rules, it will be easy to redeclare some variables.

Creating a custom button with Less

By default, Bootstrap defines seven different buttons, as shown in the following screenshot:

The seven different button styles of Bootstrap 3

Please take a look at the following HTML structure of Bootstrap’s buttons before you start writing your Less code:

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

A button has two classes. Globally, the first .btn class only provides layout styles, and the second .btn-default class adds the colors. In this example, you will only change the colors, and the button’s layout will be kept intact.

Open buttons.less in your text editor. In this file, you will find the following Less code for the different buttons:

// Alternate buttons
// --------------------------------------------------
.btn-default {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

The preceding code makes it clear that you can use the .button-variant() mixin to create your customized buttons. For instance, to define a custom button, you can use the following Less code:

// Customized colored button
// --------------------------------------------------
.btn-colored {
  .button-variant(blue;red;green);
}

In the preceding case, you want to extend Bootstrap with your customized button, add your code to a new file, and call this file custom.less. Appending @import custom.less to the list of components inside bootstrap.less will work well. The disadvantage of doing this will be that you will have to change bootstrap.less again when updating Bootstrap; so, alternatively, you could create a file such as custombootstrap.less which contains the following code:

@import "bootstrap.less";
@import "custom.less";

The previous step extends Bootstrap with a custom button; alternatively, you could also change the colors of the default button by redeclaring its variables. To do this, create a new file, custombootstrap.less again, and add the following code into it:

@import "bootstrap.less";
//== Buttons
//
//## For each of Bootstrap's buttons, define text,
background and border color.
@btn-default-color:             blue;
@btn-default-bg:                 red;
@btn-default-border:           green;

In some situations, you will, for instance, need to use the button styles without everything else of Bootstrap. In these situations, you can use the reference keyword with the @import directive.

You can use the following Less code to create a Bootstrap button for your project:

@import (reference) "bootstrap.less";
.btn:extend(.btn){};
.btn-colored {
  .button-variant(blue;red;green);
}

You can see the result of the preceding code by visiting http://localhost/index.html in your browser.

Notice that depending on the version of less.js you use, you may find some unexpected classes in the compiled output. Media queries or extended classes sometimes break the referencing in older versions of less.js.

Use CSS source maps for debugging

When working with large LESS code bases finding the original source can be become complex when viewing your results in the browsers. Since version 1.5 LESS offers support for CSS source maps. CSS source maps enable developer tools to map calls back to their location in original source files. This also works for compressed files. The latest versions of Google’s Chrome Developers Tools offer support for these sources files.

Currently CSS source maps debugging won’t work for client side compiling as used for the examples in this book. The server-side lessc compiler can generate useful CSS source maps.

After installing the lessc compiler you can run:

>> lessc –source-map=styles.css.map styles.less > styles.css

The preceding code will generate two files: styles.css.map and styles.css. The last line of styles.css contains now an extra line which refers to the source map:

/*# sourceMappingURL=boostrap.css.map */

In your HTML you only have to include the styles.css as you used to:

<link href="styles.css" rel="stylesheet">

When using CSS source maps as described earlier and inspecting your HTML with Google’s Chrome Developers Tools, you will see something like the following screenshot:

Inspect source with Google’s Chrome Developers Tools and source maps

As you see styles now have a reference to their original LESS file such as grid.less, including line number, which helps you in the process of debugging. The styles.css.map file should be in the same directory as the styles.css file. You don’t have to include your LESS files in this directory.

Summary

This article has covered the concept of Bootstrap, how to use Bootstrap’s Less files, and how the files can be modified to be used according to your convenience.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here