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!
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!
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.
– Rails guidelines
And to make sure the theme’s files are not any filename conflicts, use subdirectories
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.
# 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!