Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Practical Rails: Adding a Bootstrap Theme

DZone's Guide to

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.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
ruby ,rails ,bootstrap

Published at DZone with permission of Mahboob Hussain, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}