Bootstrap and LESS Beginner Tutorial

Download Bootstrap

1) Download from http://getbootstrap.com/getting-started/

When you arrive here, you have serveral download options. You can download ‘Bootstrap’ and use it right away, or you can download the ‘Source code’ if you want to use LESS. 

The basic download will contain 3 folders; css, fonts and js while the source code will have a folder called ‘less’ which contains the ‘.less’ files for which can be coded using LESS pre-processor.

Although it is very easy to use the basic download that contains CSS files, using LESS has many advantages, especially on some projects where you want to use extra features like variables.

For example, setting a variable like @green : #1ed84a is much easier to reference than trying to remember a color for a new class or using a tool like ColorZilla to find a color.

The code below shows how easy it is to create the variable @green that can be used to represent a typical hex code #1ed84a. Two classes are shown below; one using LESS, the other using a conventional css class. 

@green : #1ed84a  
.my-class-less{color:@green}  

.my-class-conventional{color:#1ed84a;}

Using A Compiler

When you work with LESS files, you have a couple of of options. Option number one is to add links to the document head and the other is to dowload a free compiler and do them on your own PC.

If you compile them on your own PC, they ‘.less’ file extension will get converted to the ‘.css’ format with the same name. Thus, bootstrap.less will be the working file that will create a browser copy called ‘bootstrap.css’. 

 

You will need to download the source code if you want to use LESS and compile it. Working with less is a lot like using SASS or very basic programming using language like PHP, Python or PERL. On a basic level, you can declare variables and nest rules within a class.  

 

 

 

This method allows you to hand code your bootstrap.less file and upload it to the server without having to convert it to the ‘.css’ extension.

 

1) Download less.js from http://lesscss.org/ 

2) Include links in the head to the bootstrap.less and less.js files. The key difference from a css stylesheet is that it has the attribute rel=”stylesheet/less” rather than rel=”stylesheet”.

<link rel="stylesheet/less" href="css/bootstrap.less">
<script src="js/less.js"></script>

Using a Compiler

After you downloaded the Source Code from the Bootstrap website, you can use your compiler right away. This will be covered shortly in detail. 

To keep it simple, create a css folder within the parent folder that contains subfolders like dist, docs, fonts, grunt, js and less. 

 

You can get your free compiler at Winless at http://winless.org/ or Simpless at http://wearekiss.com/simpless.

 

For simpicity, this tutorial uses Winless as the compiler. 

 

To Use and Compile With Winless

1) Open the Winless program. 

2) Add the less folder > Click ‘Compile’. Afterwards, you will see that the css folders now has css files created from those LESS files.