Ruby on Rails basics

Setting up HAML & Bootstrap

Building off of the basic CRUD app I made from post on This is how you do basic CRUD we will be adding Twitter Bootstrap to it and swapping it over from Html to Haml. Twitter Bootstrap is a Haml is an Html abstraction language that I enjoy as it makes quickly scanning through my code base much easier.

Installing Bootstrap

Bootstrap is pretty quick and easy to get setup. First lets add the bootstrap-sass & autoprefixer gems to our Gemfile. Go ahead and clear out all those commented lines of code. Your file should look something similar to this:

source ‘https://rubygems.org'
gem ‘rails’, ‘4.2.0.beta2'
gem ‘pg’
gem ‘autoprefixer-rails’
gem ‘bootstrap-sass’, ‘~> 3.2.0'
gem ‘sass-rails’, ‘~> 5.0.0.beta1'
gem ‘uglifier’, ‘>= 1.3.0'
gem ‘coffee-rails’, ‘~> 4.0.0'
gem ‘jquery-rails’, ‘~> 4.0.0.beta2'
gem ‘jbuilder’, ‘~> 2.0'
gem ‘sdoc’, ‘~> 0.4.0', group: :doc
group :development, :test do
 gem ‘byebug’
 gem ‘web-console’, ‘~> 2.0.0.beta4'
 gem ‘spring’
end

Any time you add a gem to your Gemfile you will need to run the bundle command in your terminal:

$ bundle

We’ll jump over to our /assets directory to do the last two steps of the setup. In our css folder we’ll add these two lines of code at the bottom:
app/assets/stylesheets/application.css

@import “bootstrap-sprockets”;
@import “bootstrap”;

We’ll also need to change the file name from application.css to application.css.scss

One more one liner and we’re done with basic Bootstrap Add //= require bootstrap-sprockets inside your application.js file.
app/assets/javascript/application.js

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

If you had your rails server running you will need to restart it.

Setting up Haml

Now over to Haml which is as simple as two things. Add the Haml gem to the Gemfile…

gem ‘autoprefixer-rails’
gem ‘jbuilder’, ‘~> 2.0'
gem ‘haml’
gem ‘sdoc’, ‘~> 0.4.0', group: :doc

… and the second step is just to remember that whenever you create a new view file that instead of having it formated with an erb extension, al la filename.html.erb it ends instead with .haml filename.html.haml

There’s a lot you can do with Bootstrap and you really should dig through the documentation on their site. Should you have ran into any issues with setting up Bootstrap I suggest you check out their Github readme.

If the Haml walkthrough leaves you a bit curious you can read more with this short post Haml: form && function.

Available for Qs on Twitter: @MrJadaml