Practical Rails: Adding a Bootstrap Theme
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 FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
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_themeYou 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!
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Published at DZone with permission of Mahboob Hussain , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}