03 Gemfile and Bootstrap

Gemfile and Bootstrap setup

Now that we've committed our basic, empty project, let's add a few gems that will make our lives easier. I've stripped out all comments, and added a few extra gems we want to use, so this is the entire Gemfile:

Gemfile

source 'https://rubygems.org'
ruby '2.1.4'
gem 'rails', '4.2.0.beta4'
gem 'pg'
gem 'sass-rails', '~> 5.0.0.beta1'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails', '~> 4.0.0.beta2'
gem 'jbuilder', '~> 2.0'
gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
group :development, :test do
  gem 'byebug'
  gem 'web-console', '~> 2.0.0.beta4'
  gem 'spring'
  gem 'quiet_assets'
  gem 'pry-rails'
end
gem 'rails_12factor', group: :production

Let's run Bundler to get these gems installed.

bundle

Import Bootstrap CSS

Let's keep application.css as nothing more than a manifest for requiring other stylesheets. It will already load any stylesheets located in app/assets/stylesheets, thanks to this line:

/*
 *= require_tree .
 */

That statement requires all other stylesheets (alphabetically) in the current directory and all subdirectories, and compliles them down to a single application.css file in production.

If you need the stylesheets loaded in a particular order, then you'll want to remove the require_tree . line, and require each file explicitly like so:

/*
 *= require 'structure'
 */

In order to actually use Bootstrap's styles, we'll need to include its stylesheets in app/assets/stylesheets/application.css.

Add a new stylesheet file named: app/assets/stylesheets/structure.css.scss

@import 'bootstrap-sprockets';
@import 'bootstrap';

Remove Turbolinks

Turbolinks is included in new Rails projects by default, but it conflicts with another gem we'll be adding later. We've removed it from the Gemfile, but we also need to remove the following line in application.js:

//= require turbolinks

And add Bootstrap, after jQuery:

//= require bootstrap-sprockets

Let's review our changes and make another commit.

git add .
git commit -m "Add bootstrap-sass and remove turbolinks"