Less is definitely more

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/)

Advertisements
Tagged with: , , , ,
Posted in Mad ramblings

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: