This afternoon, after a couple of hours of poking and prodding various pieces of software, I worked out how to compile Twitter Bootstrap 2.0 using SimpLESS. This is what I’ve discovered so far…
Having been an avid user of the Blueprint CSS framework for a number of years now (I created what has become quite a popular cheatsheet for the framework, which even got released with the Joomla! CMS a few versions back) I am aware of its limitations, particularly in the area of responsive web design.
Twitter Bootstrap reached version 2.0.0 in late January of this year; the current version is 2.0.3 (released 24 April 2012). I downloaded it last week and have spent a couple of days idly playing around with it. with a view to using it on a future web project.
One thing that I was uncertain about, however, was how to use the LESS files.
Sass claims that it “makes CSS fun again”; LESS that it “extends CSS with dynamic behavior such as variables, mixins, operations and functions.” Chris Coyier prefers SASS. Bootstrap from Twitter uses LESS so I guess, for now, I’m going with LESS.
These days, however, there are a number of standalone desktop applications that allow you to compile LESS code without needing to poke around with command-line commands. One of my favourites is SimpLESS from We Are Kiss.
SimpLESS is available for Windows, Linux and Mac. It installs as a very simple application onto which you drag-and-drop your directory/folder containing the .less files, click a button and it convert your LESS files to CSS. It’s just a shame that you can’t batch process all the files, a feature that WinLess offers.
By default, if your directory structure includes a \less directory and a \css directory then SimpLESS will compile all your .less files into .css files within the \css directory. Sounds simple enough. No faffing, and you get a very usable CSS file at the end of it all.
Also by default SimpLESS will compress/minify your CSS files unless you include
//simpless:!minify in the .less file. I include it at the top of the file.
Bootstrap from Twitter
Twitter Bootstrap 2.0 uses LESS. It has a directory full of LESS files that control every aspect of the framework: accordion, alerts, breadcrumbs, button-groups, buttons, carousel, forms, layouts, etc.
So, if you want 16 columns instead of 12 edit the @gridColumns, @gridColumnWidth and @gridGutterWidth variables within variables.less and recompile. That’s how customisable the framework is.
Except… when I did that I and I used SimpLESS to compile the LESS file I got an error:
Syntax error in progress-bars.less on line 33.
After a little digging around on the internet and I discovered a very helpful post on GitHub. This is what I did…
How to fix SimpLESS to compile Twitter BOOTSTRAP 2.0 on Windows 7
- Download and unzip Twitter Bootstrap v.2.0;
- Copy the \less directory to a new test directory and create a new \css directory as its sibling, so you will have:
\test \test\less \test\css
- Download and install SimpLESS;
- Download the fixed version of less.js from We Are Kiss;
- Replace the existing less.js located at
C:\Program Files\SimpLESS\Resources\js (32-bit Windows)
C:\Program Files (x86)\SimpLESS\Resources\js. (64-bit Windows);
- Run SimpLESS;
- Drag your \test directory onto SimpLESS;
- Click the ‘reload’ icon against bootstrap.less to compile it;
- Success! You will now have compiled .css files in \test\css
A few things I noted:
- If you run SimpLESS without the fixed less.js file then you will need to restart the application after you copy over the fixed less.js file in order for it to start using the new version.
- less.js v.1.3.0 from the official LESS website does not work; only this fixed version from We Are Kiss works as expected.
- The two main files to compile are bootstrap.less and responsive.less.
Time to get creating…