Menu

bootstrap less In a previous post, we took a look at how LESS can help you manage your CSS, by providing you with a powerful superset of features that makes CSS feel (and work) much more like a traditional object-oriented programming language. Given the power that the LESS pre-processor provides to CSS, it’s no surprise that a lot of web design frameworks are built using LESS. Examples of such frameworks include fusionCSS, the Gantry framework, and the biggest contender of them all, Twitter’s Bootstrap.

In and of itself, Bootstrap is already quite a powerful framework that allows anyone to design a Web interface that just plain works, first time round. Part of what makes Bootstrap so compelling for Web developers, however, is the fact that it is extremely flexible. You can build your website using the UI components that come as default with each Bootstrap installation, and then use CSS (and hence LESS) to override them – making your website look like Windows (of any kind), or OSX, or KDE, or GNOME… anything you can think of.

Changing the defaults

One of the ways in which LESS is used by Bootstrap is through the modification of the various default settings that Bootstrap encodes as LESS variables. For example, in plain CSS, every style defined can include colour settings – but each colour value is set individually of the others, so if you have a series of related elements using the same colour(s), and you want to change them, you have to laboriously find-and-replace the colour number(s). By using LESS, Bootstrap centralises all of these default colours in defined variables, so you only need to change the values in the variable declarations for the changes to be reflected elsewhere.

Nor are colour values the only things that LESS (and Bootstrap) can store and use in variables. Anything that CSS accepts as valid values, including font types, pixel sizes, and percentages can be placed in a variable. Using LESS’ support of nesting, you can even place a variable inside another variable. Without changing a single line of your HTML page, you can make it look entirely different simply by manipulating the default values stored in the Bootstrap-defined variables.

Enhancing functions and procedures

In addition to default variables, Bootstrap also makes full use of mixins, the LESS equivalents of functions and procedures. Mixins essentially allow you to create a style class and import all the properties of that class into another class. By using variables with mixins, you can create a function that allows you to modify the default parameters of the mixin.

Mixins in Bootstrap are used to create various UI elements simply by calling them, rather than having to define these elements from scratch. In addition, Bootstrap mixins also allow you to apply a number of transform effects to various elements quickly and easily.

LESS supports various mathematical operations, namespaces and other advanced functionality which Bootstrap takes full advantage of. As a result, if you want to really play around with Bootstrap, you need to understand how LESS works and how Bootstrap builds itself on it as well.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.