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');
}
Leave a Reply