Integrate bootstrap 3 without gem

Twitter Bootstrap is based on Less.js, the popular dynamic CSS scripting language. In your Rails project you may prefer to use Sass instead of Less, because it’s already supported by Rails out of the box, or because your application already contains a large amount of Sass code, or possibly just because you’re more familiar with it.

At first glance, this seems to be a serious problem for Twitter Bootstrap: it’s not appropriate for a large portion of the Rails community that prefers Sass, since it was implemented with the Javascript-centric Less.js technology.

In addition, I recently ran into this problem using bootstrap with gem. In Rails 4.0, precompiling assets no longer automatically copies non-JS/CSS assets from vendor/assets and lib/assets so glyphicons font does not work out of the box.

Stylesheets

Sass-twitter-bootstrap is not a gem, but instead is just a github repo containing Twitter’s translated code. To use it in your Rails app, just clone the repo and copy Sass source files right into your application like this:

$ git clone https://github.com/jlong/sass-twitter-bootstrap.git

$ cp -r sass-twitter-bootstrap/lib your_app/assets/stylesheets/twitter

And now since the Rails asset pipeline supports Sass out of the box, we’re good to go… almost! If you run your app now, you’ll see an error:

ActionView::Template::Error (Undefined variable: "$baseline".
(in /path/to/app/assets/stylesheets/twitter/forms.scss))

To fix this, there’s a simple solution remove line *= require_tree . from application.css and require bootstrap.scss directly.

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require twitter/bootstrap
*/

The problem is caused because the translated Sass version was designed to be included once using the bootstrap.scss file, which in turns includes all of the other files.

Javascripts and font

Simply, download Twitter Bootstrap 3 source. In the downloaded archive you will see a js and fonts folders. For js files copy content like this:

$ mkdir your_app/assets/javascripts/twitter
$ cp -r bootstrap-3.0.3/js/* your_app/assets/javascripts/twitter

Include the font:

$ mkdir your_app/assets/fonts
$ cp -r bootstrap-3.0.3/fonts/* your_app/assets/fonts

To get the glyphicons font working I had to add a line to the config/application.rb file. Add the following within class Application < Rails::Application.

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Now we need to update the _glyphicons.scss and change the paths to the font urls. So you have to replace:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('#{$icon-font-path}#{$icon-font-name}.eot');
  src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
       url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
       url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
}

With:

@font-face {
font-family: 'Glyphicons Halflings';
src: url(font-path('glyphicons-halflings-regular.eot') + "?#iefix") format('embedded-opentype'),
     url(font-path('glyphicons-halflings-regular.woff')) format('woff'), 
     url(font-path('glyphicons-halflings-regular.ttf'))  format('truetype'),
     url(font-path('glyphicons-halflings-regular.svg') + "#glyphicons_halflingsregular") format('svg');
}