Bootstrap 3 and CSS / LESS ( Part 1 )

First, the boring part, the intro.. Skip this and go to the Setup section if you are in a  hurry!!

I have been using Twitter Bootstrap 2 for quite some time, and ever since my first stint with CSS pre-processors an year or so ago, i was, is and will be a huge fan of CSS Pre processors.
A Responsive Web Development assignment gave me an even better chance to get more exposure to bootstrap + LESS combination and i absolutely loved playing around with it, sometimes succeeding, most times failing, but every single time, learning and improving. With "Mobile First" & "Progressive Enhancement" being the hot pizzas that everyone needs, i just dipped my feet into the same and as every first timer, the workflows, the patterns that were accustomed to, was a bit tricky to get over. With Bootstrap 2, things were simple, a class of span-2 was a span-2 all the way around, in all possible resolutions. Whether it be fixed or fluid layout, the primary responsibility of the grid and its classes was to make the whole structure fluid.




The following kind of an HTML DOM structure was the one i was used to:

<div class="row-fluid">
  <div class="span12">
      <div class="span6"></div>
      <div class="span6"></div>
  </div>
</div>

This could make the layout fluid, but depended on media query to flex and bend the layout when needed. But what if, on a desktop i needed 2 columns with span6 each, where as on a tablet, my preference would be span3 and span9 for the 2 columns inside a row? Bootstrap 3 , (although i havent worked on BS3 till now because my current assignment is still based on BS2 and is not an option to switch the layout structure as it will have a cascading effect & impacts the project ) could help me out on this aspect and so began exploring it. The documentation on the site seem to be pretty straight forward, just that i wanted to give it a go from the LESS prespective.

After a few trial and error, i smoked a couple of evenings trying to get this thing up in LESS as i was facing some errors during the initial setup. I was using Crunch App as my less compiler.After going through the posts, i just gave a shot with SimpLess compiler as well, but with no good.

Stackoverflow links:
1) http://stackoverflow.com/questions/21475660/bootstrap-parseerror-syntax-error-on-line-648-in-mixins-less64825-647
2) http://stackoverflow.com/questions/20441941/bootstrap-3-less-compile-error-with-simpless

Crunch app and simpLESS was not compiling the Bootstrap less file as both throwed the following errors:



I will document in detail the steps which i did to get this thing up and running using LESS so that i could test out decoupling the HTML from the css markup and include all those "col-xs-* " based classes back into the css, and leave the HTML as clean as possible.

And while searching for a good start to BS3 with LESS, i landed up in an excellent tutorial by Erik , and was a great starting point for me. All credits go to Erik ( huge thanks to the simple , yet awesome blog ) , and this blog is more or less a POC, just to know if i can replicate the setup of BS using LESS. Since i could do it, i just documented the same so that i can use it as a reference for myself, and for other newbies and starters.

For Bootstrap3, the main four grid based classes of interest is col-xs-* ( for any viewport width less than 768px with which we can represnt mobile devices ),  col-sm-* with which we can represent tablets ( >=768px upto 991px ) , col-md-* for medium devices( Desktop >=992px upto 1199px ) and col-lg-* for those which have viewport width >=1200px ( larger desktops ). So do we have to use all four combinations every single time? Nope. Just when our layout demands a change. By default, the Mobile first assumes single column which spans the entire width of whichever device they are rendered in. So just by specifying:

<div class="col-xs-6">Left Portion</div>
<div class="col-xs-6">Right Portion</div>

We are saying : "From the smallest layout to the largest, i want a 6 column layout on either side, that is, 50% each. So we dont need extra markups for the higher viewport widths as long as our requirement of a 6 column layout remains the same.

Setup:

Download the latest BS3 from here. Once downloaded and unzipped, take the bootstrap.css stylesheet from it and include it in the basic markup as shown below.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>BS3</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
    <div id="left" class="col-md-6">Left Portion</div>
    <div id="right" class="col-md-6">Right Portion</div>
</body>
</html>

And the css for the same being:

/*mystyles.css*/
#left,#right{
     min-height:30px;
     text-align:center;
     font-weight:bold;
     color:#fff;
     line-height: 30px;
}

#left{
     background-color:#28B78D;
}
#right{
     background-color:#243743;   
}

Here, we are saying, any viewport with a minimum width of 992px, should be a 6 column layout on either side. For anything <992px, let this be shown in a single column as the Mobile first approach suggests.

Ctrl + Shift + M on Firefox browser brings a nice responsive resizing handlebar with which we can play around.

<div id="left" class="col-xs-6">Left Portion</div>
<div id="right" class="col-xs-6">Right Portion</div>

Changing the classes to col-xs-* ( for extra small devices / viewport widths ) as shown above, will make the two portions 6 columns in all 4 resolution ranges.

In case of mixed width columns,

<div id="left" class="col-md-6 col-lg-4">Left Portion</div>
<div id="right" class="col-md-6 col-lg-8">Right Portion</div>

We say, for any devices with viewport width till 991px, let it be a single column layout, from 992px till 1199px, let the two divs be 6 column layout, and for larger widths/ devices, the left div should be a 4 column and the right should be an 8 column.

For easy understanding, lets change the divs background color in 3 breakpoints by introducing the classes in 3 resolutions.

<div id="left" class="col-xs-3 col-md-6 col-lg-4">Left Portion</div>
<div id="right" class="col-xs-9 col-md-6 col-lg-8">Right Portion</div>

And its CSS be:

#left,#right{
     min-height:30px;
     text-align:center;
     font-weight:bold;
     color:#fff;
     line-height: 30px;
}
@media only screen and (min-width:320px){
    #left{
       background-color:#5F192C;
       color:#000;
    }
    #right{
         background-color:#6F8A79;   
    }
}
@media only screen and (min-width:992px){
    #left{
       background-color:#28B78D;
       color:#000;
    }
    #right{
         background-color:#243743;   
    }
}

@media only screen and (min-width:1200px){
    #left{
       background-color:#E4D5A3;
       color:#000;
    }
    #right{
         background-color:#C86368;   
    }
}

Which brings the following output:

All i had till now was a css folder which has bootstrap.css and mystyles.css and the sample html file.
We can check how the whole thing can be done using LESS file in PART 2.