Clutch

Twitter Bootstrap Theme on Rails

Twitter Bootstrap Theme on Rails
Average rating: 2
(1 votes)

Now the very popular question is how to choose a template for your Rails project. Let me offer you something very fantastic. And no, we shall not affect the option to create a design from scratch, it is beyond the scope of this post. Let’s talk about Twitter Bootstrap Theme on Rails.

So, you have a project which needs to be implemented, but you do not know how to give it a professional look. This can be easily done with Twitter Bootstrap Framework – the most popular HTML / CSS / JS framework for developing responsive, mobile first projects on the web!

Why Twitter Bootstrap? It’s Easy to Use, Responsive, Fast Development, Customizable, Consistency, Support, Packaged JavaScript Components, Simple Integration, Awesome Grid…

But this is not enough, you need a theme (based on Twitter Bootstrap) for awesome looking of your awesome Rails application. And you can get it for free!

Find the best Bootstrap themes in 2018!

When choosing a theme, pay attention to what is included in the package, which pages designed, theme colors, plugins used. Look closely at the demo pages.

Suppose that you have selected and downloaded desired bootstrap theme. How to add it to Ruby on Rails app? Here are some tips for you:

1. Unpack the theme’s files in a separate location. You should not modify these files and want to have a complete original theme copy as a reference.

2. Look at your Gemfile and assets folder, maybe you have some plugins or stylesheets in your project already. For example:

gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'less-rails-bootstrap', '~> 3.0'
gem "font-awesome-rails"

3. Place your theme files under vendor/assets.

vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
– Rails guidelines

And to make sure the theme’s files are not any filename conflicts, use subdirectories

vendor/assets/stylesheets/awesome-theme
vendor/assets/javascripts/awesome-theme
vendor/assets/images/awesome-theme

And be sure not to copy over anything that is not needed as an asset. For example, don’t copy example HTML pages or any theme documentation.

4. Theme subdirectory will need to be added to any references to the theme’s assets. For example, in application.css or url() statements in CSS.

5. Don’t forget to add the necessary lines to app/assets/stylesheets/application.css and app/assets/javascripts/application.js

# application.js
//= require awesome-theme/scripts

# application.css
*= require awesome-theme/styles

Do not use //= require_tree . and *= require_tree . It’s unnecessary and confusing theme files that would be picked-up.

6. Unless your theme is Rails-ready, you need to update the theme’s stylesheets to use the correct asset path.

For example, replace url(‘../img/logo.png’) with helper image-url(‘awesome-theme/logo.png’) and don’t forget to rename affected files to *.css.scss (*.css.sass).


There are a lot of nuances in the real world, but I hope it will give you a good foundation to start!

Oh, one more thing! If you’re lucky – you may get a Ruby on Rails seed app in the box! Some developers including that to their theme packages, and it’s really useful 🙂

Enjoy your work and smile 🙂

p.s. Read about Bootstrap 4 long-expected release!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111