Thursday, April 11, 2013

Getting started with Twitter Bootstrap for Ruby on Rails and Heroku

Woah..one hell of a title for a humble blog.

Recently I decided to give a try to using twitter bootstrap on my rails projects which I normally push to Heroku. It was not an easy feit - unfortunately due to bugs in bootstrap gems. In this article I will let you know what worked for me without breaking a sweat. (Special thanks to http://railsapps.github.io/twitter-bootstrap-rails.html).

Let's start by creating a new rails project:

$ rails new bootstrap-demo -T -d mysql



Add the bootstrap-sass gem in your Gemfile - make sure it is not in an assets group, but in the parent:

gem 'bootstrap-sass'



Install the bundle:

$ bundle install


Include bootstrap javascript file by adding the following in your app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .


Rename the file app/assets/stylesheets/application.css file to app/assets/stylesheets/application.css.scss for best practice. Import twitter bootstrap css by adding the following code inside app/assets/stylesheets/bootstrap_and_overrides.css.scss:

@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";


You are now ready to use twitter bootstrap css framework! Paste the following code inside app/assets/stylesheets/application.css.scss to make a cool gray background for all your pages:

.content {
  background-color: #eee;
  padding: 20px;
  margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}


Ready for more action? Let's add a navigation bar, responsive layout and beautiful links. Replace the contents of the file app/views/layouts/application.html.erb with this:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Myapp" %></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= yield(:head) %>
  </head>
  <body>
    <header class="navbar navbar-fixed-top">
      <nav class="navbar-inner">
        <div class="container">
          <%= render 'layouts/navigation' %>
        </div>
      </nav>
    </header>
    <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">
              <%= render 'layouts/messages' %>
              <%= yield %>
            </div>
          </div>
          <footer>
          </footer>
        </div>
      </div> <!--! end of .container -->
    </div> <!--! end of #main -->
  </body>
</html>


Great! Now run webrick or your favorite rails server and enjoy the eyecandy. This is just the tip of the iceberg. You can do much more in twitter bootstrap. Now that you're happy, you're ready to deploy to heroku:

git init
git add .
git commit -m "First commit"
heroku create
git push heroku master


Heroku supports this framework if installed and configured the way I explained. I did not have much luck with other gems such as twitter-bootstrap-rails.


Post a Comment