Compiling Twitter Bootstrap 2.0 with SimpLESS on Windows 7

This afternoon, after a couple of hours of poking andproddingvarious pieces of software, I worked out how to compile Twitter Bootstrap 2.0 using SimpLESS. This is what I’ve discovered so far…
CSS frameworks
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.
So I’ve been keeping an eye on how various CSS frameworks have been developing, such as 320 and up, Less Framework 4and Twitter Bootstrap.
Twitter Bootstrapreached 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.
LESS
When it comes to CSS pre-processors, such as LESS and Sass, I’m a bit late to the party. What can I say, I’ve got twins and a 16 month old and I still don’t get enough sleep.
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.
I’ve dabbled with both LESS and Sass over the last year but not enough to get proficient in either, and certainly not enough to use either in a production environment. One put-off for me, certainly in the early days, was the lack of GUI to compile the files. Sass uses Ruby; LESS uses JavaScript (either client- or server-side).
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 SimpLESSfrom We Are Kiss.
SimpLESS
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 thatWinLess 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.0uses 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
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 TwitterBOOTSTRAP 2.0 on Windows 7
- Download and unzip Twitter Bootstrapv.2.0;
- Copy the less directory to a new test directory and create a new css directory as its sibling, so you will have:
est
estless
estcss
- Download and install SimpLESS;
- Download the fixed version of less.jsfrom We Are Kiss;
- Replace the existing less.js located at
C:Program FilesSimpLESSResourcesjs (32-bit Windows)
C:Program Files (x86)SimpLESSResourcesjs. (64-bit Windows);
- Run SimpLESS;
- Drag your est directory onto SimpLESS;
- Click the ‘reload’ icon against bootstrap.less to compile it;
- Success! You will now have compiled .css files in estcss

Successfully compiled LESS file
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…
Dropbox vs SkyDrive vs Google Drive
For the last few years I’ve been using Dropbox, a service that offers online file storage (often called ‘cloud storage’) and synchronisation. But in the last few weeks two new services have been launched by a couple of big names: Microsoft SkyDrive and GoogleDrive.
I’ve been looking into these two services and trying to decide for myself whether I should move away from Dropbox or use SkyDrive and/or Google Drive in addition to Dropbox.
For me the important things are:
- Storage space for the price
- Speed of synchronisation
- Ability to choose which files to synchronise on which devices
I am assuming here that the terms and conditions of each of these three services is similar. And as that linked article to The Verge concludes: “what’s most important is how much trust you’re willing to give away as your data moves to the cloud”.
Here are a few of my findings and thoughts.
What is cloud storage and synchronisation?
For those who don’t already understand what Dropbox, SkyDrive or Google Drive are. A brief explanation.
So, if I save a file in my Dropbox folder it automatically gets uploaded to an online account From any web browser I can then log in to my Dropbox account and download any file that I’ve uploaded. That’s the ‘cloud storage’ bit.
Not only that,any other device (such as my laptop or work PC) that is connected to my Dropbox account automatically downloads that file into its Dropbox folder. That’s the ‘synchronisation’ bit.
Comparisons
Dropbox

| Storage |
Month |
Year |
| 2GB+ |
Free |
Free |
| 50GB+ |
6.25 |
75 |
| 100GB+ |
12.50 |
150 |
(All prices are in US dollars, converted using Oanda, and rounded to the nearest 5p.)
Earn extra space: Dropbox users can earn more space for free by referring new users to Dropbox up to (I think) 32GB.
File limits: Files uploaded to Dropbox via the desktop application have no file size limit.Files uploaded through the website must be 300 MB or less.
Speed: When I drop a new file into my Dropbox folder it takes only a few seconds before the sync starts. Synchronisation time is fairly quick (you can customise whether bandwidth is limited or not for both upload and download).
Dropbox also supports LAN sync,which is brilliant! Basically, it speeds up synchronisation across computers on the same network by transferring files across the network rather than downloading them from the Dropbox servers.
Customisation: Which folders and sub-folders are synchronised can be fully controlled, which for me is essential. Dropbox calls this “Selective Sync”.
The desktop client offers a lot of options and tweaking. It is rather a joy to use, as is the website interface.
Integration: There is no built-in office application support with Dropbox. But there are a number of online apps and browser extensions that will sync with your Dropbox account.
SkyDrive

| Storage |
Month |
Year |
| 7GB (or 25GB) |
Free |
Free |
| + 20GB |
0.50 |
6.00 |
| +50GB |
1.33 |
16.00 |
| +100GB |
2.66 |
32.00 |
(All prices are in GB sterling, paid yearly; monthly prices are shown for comparison.)
Existing SkyDrive users were given the option to keep their existing 25GB when the service was revamped and relaunched in April 2012.
File limits:Files uploaded to SkyDrivevia the desktop application are limited to 2GB.Files uploaded through the website must be 300 MB or less.
Speed: When I drop a new file into my SkyDrivefolder it seems to take quite a while before the sync starts, noticeably longer than either Dropbox or Google Drive. Synchronisation time is fairly quick (you cannot customise bandwidth limiting).
Customisation: The only options that the desktop client offers are “Make files on this PC available to me on my other devices” and “Start SkyDrive automatically when I sign in to Windows”. When my PC first starts up it seems to take ages for SkyDrive to go through its initial checks and synchronisation.
Selective synchronisation is not available, which means that whatever you upload will always be available on each computer you synchronise with. For me this is a problem, I only want certain files to be available on my work PC, for example. Perhaps this will be made available in a future release.
Integration: What is really nice about SkyDrive is that I can open, edit and create Microsoft Office files (including OneNote) directly within SkyDrive using the Web app versions of Microsoft Office, which makes the experience feel familiar.
Google Drive

| Storage |
Month |
Year |
| 5GB |
Free |
Free |
| 25GB |
1.50 |
18.00 |
| 100GB |
3.15 |
37.80 |
| 200GB |
6.25 |
75.00 |
| 400GB |
12.50 |
150.00 |
(All prices are in US dollars, converted usingOanda, and rounded to the nearest 5p.)
File limits: Files uploaded to Google Drive via the desktop application are limited to 10GB.Uploaded document files that are converted to Google documents format cant be larger than 2MB.
An important point to note is that Google Docs (that is any file that is created as in Google’s proprietary format for documents, presentations,spreadsheets, forms or drawings or is uploaded and then converted into a Google Doc format) do not count against your total storage. So, you could effectively use a 5GB free account but also have, say, 10GB of files in Google Doc format.
Speed: When I drop a new file into my Google Drivefolder it takes only a few moments before the sync starts; comparable with Dropbox, which is a good thing. Synchronisation time is fairly quick (you cannot customise bandwidth limiting).
Customisation: The only options that the desktop client offers are “Make files on this PC available to me on my other devices” and “Start SkyDrive automatically when I sign in to Windows”. When my PC first starts up it seems to take ages for SkyDrive to go through its initial checks and synchronisation.
Selective synchronisation is available, but not to the same degree of granularity as Dropbox offers. It would appear from the Google Drive preferences that only top-level folders can be selected or deselected. So if I want to sync my “Reference” folder, for example, with my laptop then I need to synchronise everythingwithin it; with Dropbox I could select which sub-folders to sync. Perhaps this will be made available in a future release.
Integration: What is nice about Google Drive is that I can convert a lot of formats into Google Docs format, admittedly mostly Microsoft Office formats but that suits me fine. I can then view, edit and print them. I can also open PDF files directly in Google Docs, and I can attempt to use OCR to convert a PDF into an editable document.
Evaluations
Based on a 100GB+ account, on price pergigabyteDropbox is by far the most expensive (SkyDrive 32p/GB per year; Google Drive 38p/GB per year; Dropbox 1.50/GB per year). Plus Dropbox doesn’t offer any integration with office applications in the same way that Microsoft SkyDrive and Google Drive do.
However, Dropbox has been in the game since September 2008 and has built quite a strong reputation for its stability, its ease-of-use, its speed and the features it offers. The drill-down selective sync and the LAN sync, in particular, are very useful for me.
While SkyDrive was officially launched inAugust 2007 it didn’t enjoy the same level of uptake or success that Dropbox did. One reason may have been due to the lack of desktop client.
The relaunch of SkyDrive in April 2012, only days apart fromGoogle’s launch of Google Drive may change that but as it stands I think neither Google nor Microsoft’s desktop clients come anywhere close to the polish that Dropbox offers.
It will be interesting to see if Dropbox will continue to rely on its reputation and on the quality of its platform clients (remember Dropbox is also available for iPhone, iPad, Android and BlackBerry) or whether it will lower its prices as the competition from Google and Microsoft grows.
Limitations
Truly selective sync: What a shame is that none of these three services allow me to select which folders on my PC (regardless of where they are) I can synchronise. I can only synchronise the contents of my Dropbox folder, and my SkyDrive folder, and my Google Drive folder.
What would be really nice is to be able to say: I want to sync everything within:
- D:Music
- E:PhotosFamily
- F:CodePersonal
- etc.
Maybe in the future…
Encryption: And what about encryption? Currently none of these services offer any kind of data encryption
Your files are stored somewhere out there, in the cloud, completely unencrypted. Which means that if someone else got hold of them then they could read them with the minimum of effort.
While I don’t store any state secrets on my PC, it’s still the principle of the matter: ideally, I want my data to remain only mine and for me to choose with whom to share it.
AND THE WINNER IS…
A few months ago I upgraded to the 50GB account (approx. 6.25 per month) which meant that I kept my 4.75GB that I’d accumulated from my 2GB free account plus referrals and added an extra 50GB.
If either Microsoft SkyDrive orGoogle Drive allowed me to select which folders and sub-folders to synchronise, allowed me some control over the upload/download throttling speeds, and allowed me to synchronise files across my LAN (I often use my desktop PC and laptop at the same time) then I would likely move to a cheaper option.
If that was the case now then I’d move to Google, simply because of the lag time associated with the SkyDrive synchronisation. If they fixed that… well, I’ve already got 25GB free with them. That would save me 1.50 per year that I could otherwise spend on… I don’t know, a chocolate bar.
I use Dropbox a lot, and for now I intend to continue to use Dropbox as my primary cloud storage/synchronisation service.
I trust Dropbox.
Dropbox offers me the combination of speed and customisation at a price that I can afford.
But I will keep a close eye on both SkyDrive and Google Drive.
What have you decided about these, and perhaps other cloud-based services such as Apple iDrive?