J.Wo

Ruby DevBlog by Jesse Wolgamott

The One Where You Too Can Have Bootstrap 2.0 and Compass in Rails

The situation: You’ve used compass in the past (even when it was hard to setup with rails), and love Bootstrap. You love bootstrap 2.0 and <3 Responsive design but don’t use LESS (because obvs). What do you do? Let’s make this happen

Here’s what the site looks like:

Full Resolution

Full Resolution

Smaller Screen Size (tablet’ish)

Tablet Size

iPhone / Mobile size

iPhone Size

How to do these things?

It’s fairly simple to do thanks to the awesomeness that is Chris Eppstein. Props also to Thomas McDonald for bootstrap-sass.

In your gem file, do these things:

1
2
gem "compass-rails", ">= 0.12"
gem "bootstrap-sass", ">= 2.0"

In your application.scss import bootstrap using sass, not sprockets.

1
2
@import "bootstrap";
@import "bootstrap-responsive";

I wish it were more interesting, but Chris Eppstein made compass drop dead simple to integrate.

Version Disclosure: This post worked with compass-rails 0.12, bootstrap css 2.0, rails 3.2, and bootstrap-sass.

UPDATE: updated the command to include bootstrap-responsive. Thanks @rubysolo

Want More Ruby off Rails? Subscribe to our mailing list

* indicates required

Comments