Integrating Twitter Bootstrap and H5BP in Rails

Disclaimer: There are other alternatives to this setup by means of gems. But this is how I prefer to do it. Manually. With total control.

I have been working on a Rails application (a side project) and wanted to utilize the power of Twitter Bootstrap 2.0.1 and HTML5 Boilerplate 3.0.2 with Asset Pipelining in Rails 3.2.1.

**Requirements: **

Download Twitter Bootstrap from http://twitter.github.com/bootstrap/

Download HTML5 Boilerplate from http://html5boilerplate.com/

Setting up the Rails Application

First and foremost, create a new Rails application by using the command rails new app_name.

Once the app is created, navigate into the app folder cd app_name.

Integrating HTML5 Boilerplate

Now let’s first start with HTML5 Boilerplate. Open the downloaded H5BP zip file.

CSS:

Navigate into the css directory in the zip file. Copy the style.css file into app/assets/stylesheets of the Rails application that you just created.

JavaScript:

Once you’re done with that, navigate into the js directory of the H5BP zip archive. You’ll have script.js, plugins.js and a directory called libs. Copy the plugins.js and script.js into the app/assets/javascripts of your Rails application.

Continue reading