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.
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
Integrating HTML5 Boilerplate
Now let’s first start with HTML5 Boilerplate. Open the downloaded H5BP zip file.
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.
Once you’re done with that, navigate into the
js directory of the H5BP zip archive. You’ll have
plugins.js and a directory called
libs. Copy the
script.js into the
js/libs directory in your H5BP zip archive and you’ll have
modernizr-2.5.3.min.js. These are the versions available during the time of this post. These will change eventually. Now copy those three files into
lib/assets of your Rails app, create it and then copy the said files.
Next, from the H5BP zip archive, copy the files highlighted in the image below into the
public directory of your Rails application.
Next, copy the left out
index.html from your H5BP zip archive into the
app/views/layouts directory of your Rails app.
Delete the file named
application.html.erb (if you’re using ERB) from the
app/views/layouts directory of your Rails app and rename your
index.html file existing in that directory to
application.html.erb. We’ll get back to this file after setting up Twitter Bootstrap.
With that, you can get rid of your H5BP zip archive. Next step would be integrating Twitter Bootstrap into the application.
Integrating Twitter Bootstrap
Open the downloaded Twitter Bootstrap zip archive and navigate to the
css directory in the zip archive. You’ll find the
bootstrap-responsive.css files along with their corresponding minified versions. Based on your requirements, copy the needed files into the
app/assets/stylesheets directory of your Rails application.
Now, navigate into the
img/ directory in the Twitter Bootstrap zip archive and copy the **glyphicons **files into the
Next, navigate into the
js/ directory in the Twitter Bootstrap zip archive and copy the
bootstrap.js file into
And you’re done with the Twitter Bootstrap zip archive.
You’ve now successfully placed all the required files in the right places of your Rails application. The next part would be tweaking the Rails application a bit and modifying the default layout.
Changing the Directives
Now, change the contents of your
Next, change the contents of your
app/assets/stylesheets/application.css file with the contents of this:
Change the contents of your
app/views/layouts/application.html.erb file with the contents of this:
Important: If you’ve used the minified versions of the files from Twitter Bootstrap, then you should change the directives in the
app/assets/stylesheets/application.css to the corresponding minified files.
For ex: in
require bootstrap becomes
Also, the reason we are manually “requiring” the files is to maintain the required order of the files. This also prevents overriding of the styles and functionality.
That’s it. You’re done setting up your Rails application with the power of HTML5 Boilerplate and Twitter Bootstrap (Rails BootPlate). Now the rest is in your hands.
If you find anything wrong with the setup, please do let me know in the comments section below. I will make changes and update this post. If you’re interested, you may fork the project at: https://github.com/mohnish/rails-bootplate
**Update: **To make the glyphicons work properly, you need to change the path of the icon files in the bootstrap.css file at Line 1174 and Line 1183 to