Practical Rails: Adding a Bootstrap Theme
Read Mahboob Hussain's quick tutorial and learn how to add Twitter Bootstrap CSS/JS themes to Rails applications.
Join the DZone community and get the full member experience.
Join For FreePractical 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!
Published at DZone with permission of Mahboob Hussain, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments