Practical Rails: Adding a Bootstrap Theme

Practical Rails: Adding a Bootstrap Theme

When you are trying to get your web app 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 may be 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
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:

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

to this:

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

You are now all set!