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.
Open the js/libs directory in your H5BP zip archive and you’ll have jquery-1.7.1.js, jquery-1.7.1.min.js and 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/javascripts directory of your Rails app. If you don’t have the javascripts directory in your 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.css and 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 app/assets/images directory.
Next, navigate into the js/ directory in the Twitter Bootstrap zip archive and copy the bootstrap.js file into app/assets/javascripts directory of your Rails application.
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 app/assets/javascripts/applications.js file with the contents of this:
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/javascripts/applications.js and app/assets/stylesheets/application.css to the corresponding minified files.
For ex: in app/assets/javascripts/applications.js, require bootstrap becomes require bootstrap.min.
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 /assets/glyphicons-halflings.png and /assets/glyphicons-halflings-white.png correspondingly.
Comments