Customizing Twitter Bootstrap on Windows

I’ve been using twitter’s bootstrap ui library for a project at work and have been enjoying the results I’ve been getting with it (it has also allowed me to focus more on the business needs of the application and not have to worry about the UI side of the application).  I have however wanted to learn more on how to modify the look and feel of the library to make the application look and feel like other web applications that the company uses.  There is a extend page on their github page that I’ve looked in the past but have not had a chance to really setup my workstation to work with less.  So today, for kicks and giggles I’d thought I’d try out some of the steps outline in this page and set up the required software on my windows box to work with extending this great library.

The first thing I needed to do was to install node.js for windows, this will allow me to install the less compiler so that I can customize bootstraps less files to the desired settings.  The installation of node.js went smoothly, then per the instructions I installed the required tools to compile bootstrap (lessc, jshint, recess and uglify-js).  Once the tools were downloaded, I went ahead and cloned bootstraps public repository hosted at github.  I then started to make changes to the variables.less file and complied my changes to a new css file with the following command:

lessc less/bootstrap.less > docs/examples/mybootstrap.min.css --compress

I am using one of the examples that come with bootstrap to test out the changes I  make.  Once I had my new css file, I set a reference to this file in the source code of the html file using the following code:

<link ref="mybootstrap.min.css" rel="stylesheet">

I then opened up the html file in my browser and the changes I had made were there! Now that I have this setup not only am I looking forward to modifying the library to get the correct look and feel, but I also get the opportunity to learn about less!  The next goal is to find out the best way to keep up to date with the latest changes (enhancements, bug fixes, etc.) for bootstrap while still keeping my changes!