Saturday, August 11, 2012

Building Bootstrap


title: Building Bootstrap date: '2012-08-11' description: Working with Twitter's Bootstrap categories: design tags: - css - javascript - html

Design Scaffolding

Twitter released Bootstrap to share a collection of best practices for web templates. They provide a packaged selection of solid web technologies including the excellent Less library and make it available via Github. Since developers often have little or no web design experience, Bootstrap provides a great way to bootstrap your front end.
We'll cover the process to get Bootstrap installed in our Ubuntu 12.04 environment.

Prerequisites

You need to prepare your system to make Bootstrap.
$ sudo apt-get install npm
$ sudo npm -g install uglify-js
$ sudo npm -g install jshint
$ sudo npm -g install recess

Fork Bootstrap

If you haven't already, set up an account on GitHub. Then be sure to set up an SSH key to manage your commits. Finally, fork the Bootstrap repository and clone it locally into
$HOME/gitdev/com.github/$GITHUB_USER/bootstrap
To track the original repository, execute the following:
$ git remote add upstream git://github.com/twitter/bootstrap.git
To pull changes from upstream, execute
$ git remote add upstream 
Navigate to your new bootstrap folder and run make. This generates a doc folder that contains an assets folder where you'll find all the css, javascript and image files you'll need.

Integration with Ruhoh

Integration of Bootstrap with Ruhoh is straightforward. Ruhoh supports themes so it's a matter of moving the compiled Bootstrap artifacts into the appropriate theme locations for Ruhoh. There is a master blog template that contains a theme, fimero that we'll use in this tutorial.

Assets

Once Bootstrap is compiled, locate the assets folder under docs. In it, you'll find
/css -> blog-master/themes/fimero/stylesheets
/ico -> blog-master/themes/fimero/media
/img -> blog-master/themes/fimero/media
/js  -> blog-master/themes/fimero/javascripts
Copy the files as listed. Then edit the theme.yml for fimero and add the appropriate resources (css and js files).