Twitter Bootstrap with Less css

Less is a CSS preprocessor which makes CSS dynamic. Twitter Bootstrap on the other hand, is a toolkit to develop web apps and sites fast. In this document we have discussed about using Twitter Bootstrap with Less CSS. This way you can use Bootstrap’s Less variables, mixins, and nesting in CSS.

Obtain Twitter Bootstrap and Less CSS 

You may obtain Twitter Boot Strap form GitHUB and Less CSS from lesscss.org. 

What is included 

Once you downloaded the Twitter Bootstrap, unzip the file and all the files will be extracted to the desired folder. Less components of Bootstrap are placed under 'lib' directory. As of version Bootstrap v1.4.0, there are nine less files. We will see what these files contain. 

bootstrap.less 

This is the main less file. This file imports several other less files. The file does not have any code though. 

forms.less 

This less file contains style for form layout, input types. 

mixins.less 

This file keeps CSS code which is reusable. 

patterns.less 

This Less file contains CSS code for repeatable user interface elements which may not be covered in base style placed under scaffolding Less file. 

reset.less 

This Less file contains CSS resets. This is an update of the Eric Meyer's CSS reset. Resets of some of the HTML elements like dfn, samp etc are exempted. 

scaffolding.less 

This file keeps the base style required for creating Grid System, Structural Layout, Page Templates. 

tables.less 

This Less file contains styles for creating Tables. 

type.less 

Look for typography related styles under this file. Styles for Headings, paragraphs, lists, code etc. are placed here. 

variables.less 

This Less file contains variables to customize look and feel of Bootstrap. 

How to use 

Include following in your HTML page to use it : Note that, less-1.1.5.min.js is not present within js folder out of the box. You have download and place it under js folder explicitly.

How to compile 

With JavaScript 

Simple include the less js file (as shown under How to use section) and reload your page. js file compiles the less. 

From command line 

 If you have Less Command Line installed, run the following command to compile : $ lessc ./lib/bootstrap.less > bootstrap.css You may use --compress command if you want a compressed compilation. 

Node with makefile

 First install the Less command line by running the following command : $ npm install lessc Then run "make" from the root of your bootstrap directory. You may use "make watch" command if you have "watch" installed. If done so, every time you edit a file under lib folder, bootstrap is automatically rebuilt.

Less Mac app 

Though unofficial, there is a less mac application available for compiling