Practical Rails : Adding a bootstrap theme

When you are trying to get your webapp prototype or MVP up and running, you wouldn't wait for your UI group to deliver their entire UI assets. {wrap}bootstrap is a good place to get bootstrap themes for less than $20. And who knows, the theme you select maybe good enough to go to production.

In this post, I present the steps to plug a bootstrap theme into your Rails app.

Let's say your theme is my_theme. In vendor/assets, create a sub-directory 'my_theme' under each of fonts, images, javascripts, stylesheets directories.

Copy the respective asset files to each of these sub-directories. So,
all [*.eot, *.svg, *.ttf, *.woff, *.woff2] files go under fonts/my_theme,
all [*.png *.jpg *.gif] files go under images/my_theme,
all [*.js] files go under javascripts/my_theme, and
all [*.css] files go under stylesheets/my_theme.

You can do the above with the find command in your theme directory.

find . -name "*.js" -exec cp {} path_to_my_project/vendor/assets/javascripts/my_theme \;

Please note the called css and js files in your index.html. Copy them in the same order to application.css and application.js.

app/assets/stylesheets/application.css

*= require my_theme/bootstrap
*= require my_theme/font-awesome
*= require my_theme/fontello
*= require my_theme/magnific-popup
*= require my_theme/settings
......
......

app/assets/javascripts/applicaton.js

//= require my_theme/jquery.min
//= require my_theme/bootstrap.min
//= require my_theme/modernizr
//= require my_theme/jquery.themepunch.tools.min
//= require my_theme/jquery.themepunch.revolution.min
//= require my_theme/isotope.pkgd.min
......
......

Put all assets in the assets pipeline.
config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( *.png *.gif *.jpg *.ico *.svg *.eot *.ttf *.woff *.woff2)

Change URLs in css files (bootstrap, fontello, font-awesome, settings, style etc.)
from

1. url('../fonts/glyphicons-halflings-regular.eot');
2. url('../font/fontello.eot?46462644');
3. background:url(../assets/shadow1.png)

to look like

1. url('/assets/my_theme/glyphicons-halflings-regular.eot');
2. url('/assets/my_theme/fontello.eot?46462644');
3. background:url(/assets/my_theme/shadow1.png)

You are set!