Twitter's Bootstrap in the Asset Pipeline

http://blog.crowdint.com/2012/02/03/bootstrap-in-the-asset-pipeline.html

by dabit • 14 years ago

46 10 14 years ago

blog.crowdint.com

chrismealy• 14 years ago

Anybody using less and sass together?

moe2• 14 years ago

I am, sort of.

On Rails 3.1 I have these in the Gemfile:

  gem 'sass-rails', "~> 3.1.0.rc"
  gem "compass", ">= 0.12.alpha.2"
  gem "less-rails", :git => 'https://github.com/christiannelson/less-rails.git'

I'm in the process of transitioning from sass to less (mainly because I'm tired of compass and because bootstrap comes as .less). The above configuration happily compiles sass/less alongside for me.

It wasn't smooth sailing to get there, though, as you can tell from the pinned versions. The above will probably not work on Rails 3.2 or 3.0, and might even break with the next minor upgrade of 3.1. As it stands the asset-pipeline and supporting gems have been very fragile for me...

hwrd• 14 years ago

Yes, I am.

I use the 'less-rails-bootstrap' gem and then use less for anytime I need to customize bootstrap.

For everything else, I use sass.

mrinterweb• 14 years ago

I was looking for something like this last night, and I found this project: https://github.com/seyhunak/twitter-bootstrap-rails

Using this generator is a very fast way to get your rails app using Twitter's bootstrap.

moe2• 14 years ago

I would advise against the 'less-rails-bootstrap', 'compass-bootstrap' gems and whatnot (there's a whole bunch of them).

I tried a few of them before resorting to embedding bootstrap as plain less.

The gems did either not work at all for me or did not support 2.0-wip, and none had a clear upgrade-path (the sass-compiler chokes on 2.0).

Generally I've become strongly biased against the practice of bundling CSS/JS-libraries as gems. It never seems to work quite right (only jquery ever went smoothly for me) and they always seem to introduce an ungodly amount of magic. - When all you really want is drop a few static files into vendor/assets...

shibboleth• 14 years ago

I created a fork of less-rails-bootstrap a few weeks ago and put 2.0-wip on it pretty easily in an hour or so. A week or two after that 2.0-wip was pushed to the master branch on that project. What issues were you having exactly?

sjp3• 14 years ago

I updated a rails project yesterday that was using less-rails-bootstrap. The entire process to upgrade from 1.4 to 2.0 took a few seconds.

The tedious part was updating css class names for alerts, modals, form styles, etc.

l4u• 14 years ago

If you use scss/sass instead of less, try https://github.com/thomas-mcdonald/bootstrap-sass/tree/2.0

artemvv• 14 years ago

Just use https://github.com/varley/sassy-twitter-bootstrap

Switching Bootstrap from Less to SCSS is very simple.

mc• 14 years ago

Let me share some quick thoughts and trade offs.

I did:

(1) Cloned bootstrap into the Rails.root/lib/assets directory, setup config.assets.path, added the require lines to my css and js files.

Alternatively I could have done:

(2) Used one of the gems mentioned in the comments, added the require lines to my css and js files.

In 2.0, there's some manual work involved to get the js pointing to the correct image path, but assuming you've made it that far, those changes are pretty simple to automatically regex.

IMO, the biggest difference is the way you go about styling markup. In (1), markup is modified intrusively. The example from the OP can be tolerated. But now imagine if all your divs had a .row or .spanxx classes attached. If that's unacceptable for you, I'd find a gem that you can work with.

I was tracking 2.0-wip for a couple of months and it wasn't easy to stay up to date with all the changes. Hopefully it's getting easier for gem authors to track and update

Twitter's Bootstrap in the Asset Pipeline

Related Stories