Integrating Twitter’s Bootstrap Into Your Project

Nov 9, 2012 // by Craig Maslowski // Blog // No Comments

Twitter’s Bootstrap CSS framework has become very popular over the last year. So much so, that the default styles provided by Twitter are already considered cliche by many. While it is possible to override Bootstrap’s default look in your own CSS files, trying to overwrite all of Bootstrap’s undesired UI sugar quickly becomes an exercise in frustration.

There is a better way.

Bootstrap is written using LESS, a dynamic meta language which introduces variables, mixins, and functions and compiles down to CSS. The key to customizing Bootstrap is to start from these source files. In the rest of this article, I’ll show you what you need to do to get set up to work from these files.

Installing Node.js And The Required Modules

Bootstrap uses a few node.js modules to perform the compilation from LESS to CSS. Fortunately, installing node.js is very simple these days. Just head over to the main node.js site, download and run the installer for your system. Once the installation has been completed, open a new terminal or console window and type the following command:

    node -v

If Node reports back with it’s version number, everything installed correctly.

The next step is to install the modules Bootstrap requires to compile. Node comes with a package manager (NPM) to ease the installation of 3rd party modules. Run the following command to install the required modules globally:

    npm install recess jshint connect uglify-js -g

If everything installed correctly, your system is now setup to compile Bootstrap.

Installing Ruby and Watchr

This is an optional, but highly recommended, step. Bootstrap provides a makefile which uses the Ruby Watchr gem to monitor LESS files and automatically perform a compilation when a LESS file is changed on disk. This is very useful during development.

Instructions for installing Ruby are beyond the scope of this article, but the good folks behind the language have provided instructions for installing Ruby on various platforms.

Once your Ruby installation has been verified, run the following command to install the Watchr gem:

    gem install watchr

Grab The Bootstrap Source Files

Bootstrap’s source files are hosted at github. You can either clone the repo using git, or download the zipped source. To clone the repo, open a terminal, navigate to the folder where you want to place the bootstrap files, and run the following command:

    git clone https://github.com/twitter/bootstrap.git

Ideally, you should locate these files outside of your website’s public folder.

Grab A Makefile For Windows

Bootstrap only provides a makefile for Mac and Linux systems. If you’re on a Windows system, you’ll need to grab a make.bat file. Create this file in your bootstrap directory.

Testing Your Installation

Now that everything is in place, we can finally compile. Open a terminal, navigate to your Bootstrap folder, and enter the following command:

   make

Twitter will compile everything and copy the newly compiled CSS files to the ./bootstrap/docs/assets/CSS/ folder.

Editing the Makefile

NOTE: These instructions are current as of Bootstrap v2.1.1.

The final step in this setup is to add an instruction in the makefile (or make.bat on Windows systems) to copy the compiled files to the CSS folder for your project. The following lines should be inserted right after the line which says: “Compiling documentation… ${CHECK} Done”. Be sure to set the path appropriately for your project.

For Mac or Linux systems:

    MY_CSS_PATH = ../public/css
    @cp ${BOOTSTRAP} ${MY_CSS_PATH}
    @cp ${BOOTSTRAP_RESPONSIVE} ${MY_CSS_PATH}
    @echo "Copying CSS to project...                  ${CHECK} Done"

For Windows:

    SET MY_CSS_PATH = ..\public\css
    <nul set /p =Copying CSS to project...
    copy /Y %BOOTSTRAP% %MY_CSS_PATH%>nul
    copy /Y %BOOTSTRAP_RESPONSIVE% %MY_CSS_PATH%>nul
    echo %CHECK% Done.

Open a terminal and run the make command again. The compiled bootstrap files should be copied to your project’s folder.

If you followed the optional step of installing Ruby and Watchr, we can put make in “watch” mode. Enter the following command in a terminal:

    make watch

As long as this process is running, make will monitor the LESS files for changes and automatically perform a compilation. This saves a bunch of time when you’re hacking away at the files.

Customize Bootstrap

Now that everything is setup, you can begin to customize Bootstrap to fit your site’s visual design style. A good place to start is the file variables.less. Much of Bootstrap’s look can be quickly tailored by changing values in this file.

• Twitter • StumbleUpon • Digg • Delicious • Facebook