Working with Twitter Bootstrap on OS X

After messing with some of Twitter’s Bootstrap files locally, I decided it was time to get a build environment established on my Mac. It quickly became apparent that there wasn’t a whole lot of guidance on setting up the build environment in OS X; so i’ve posted my efforts here so that someone in my shoes can follow these steps:

Step 1: Install Node (and Node Package Manager)
Visit http://nodejs.org/ and download the installer for OS X (Lazylink: http://nodejs.org/dist/v0.8.12/node-v0.8.12.pkg)

Step 2: Clone and build Less.js
Install Less.js via folowing command (Assumes GIT CL Tools is installed):
git clone git://github.com/cloudhead/less.js.git

Next, go to the less.js directory, type: ‘make’.

Then copy the install directory to /usr/local/less.js

Add ‘export PATH=$HOME/local/less.js/bin:$PATH’ to ~/.bash_profile:

Open a terminal and type:

touch ~/.bash_profile; open ~/.bash_profile

Paste following in:

export PATH=$HOME/local/less.js/bin:$PATH

and save…

Step 3: Install Bootstrap Dependencies
Twitter Bootstrap depends on a number of packages; you can install all of them by using the following command with NPM:

npm install uglify-js less jshint recess -g

Step 4: clone and make Twitter Bootstrap
Clone Bootstrap:
git clone git://github.com/twitter/bootstrap.git

Go to the bootstrap directory, type: ‘make’.
Built files are output in the ‘docs’ directory…

Enjoy!

4 thoughts on “Working with Twitter Bootstrap on OS X”

  1. it depends on your environment setup; typically Git clones stuff into your root directory (i.e. Macintosh HD/Less.js); If you’ve run the git clone command you should be able to use spotlight to locate where it has been cloned to.

  2. The current bootstrap depends on a user, rather than global node install. Drop the “-g”:
    npm install uglify-js less jshint recess

  3. Actually you don’t want to install uglify-js, less, jshint and recess this way at all. You just want to do npm install in the bootstrap directory. Bootstrap has a package.json file which causes npm to install the correct version of jshint and the others. Otherwise you’ll need to wrestle with syntax issues because of the new version of jshint. If you’ve done this:

    cd bootstrap (wherever that is for you)
    npm uninstall uglify-js less jshint recess -g
    npm uninstall uglify-js less jshint recess
    npm install

    current bootstraps will then make cleanly.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>