Recently, a work colleague left our company. In his last day he mentioned that in order to customise Bootstrap, it would be a good idea to use less.
Less i thought? What is this less and more importantly, how on earth do i use it!!!
So i decided to write a short note about how i got less working for me and the tools i used.
So what is less – Its a dynamic language that allows the the development of system based css faster and easier.
So how did i get it working?
There seems to be a number of tools on the market but the one i chose was Windows Less (http://winless.org/)
I downloaded the app and downloaded the git version of Bootstrap (https://github.com/twitter/bootstrap).
Install WinLess and point it at the less folder from the github version of Bootstrap.
Where i came a cropper was that i selected all the files and hit compile. You shouldn’t do that, all you need to to select is the bootstrap.less and the responsive.less files. The rest of the files get compiled by default because they are imported by these 2 files.
Now simply create a css folder in the same location as the git less folder and every time you make a change to the less files, they automatically get compiled by WinLess and the resultant css file gets created in the css folder.
I personally generate an html file which has all the bootstrap markup i need, point it at the css file generated in the css folder and its simply a case of refreshing your browser to see the changes – simple.
To make things better, i use sublime editor (http://www.sublimetext.com/)