Rails app: using a gem vs. including source with Twitter Bootstrap

Question

I've gone through my app and am having trouble finding where exactly the Twitter Bootstrap source goes when I include it through a gem. If I wanted to view the Bootstrap .css for example, how do I find it?

The alternative, as I understand, to including it as a gem would be do download and include the source directly, correct? Is one approach better than the other.

Finally, if I wanted to modify the Bootstrap css what is the best way to do it? If I had the source in my app I imagine I could just go in there and modify things. How about if I'm including it as a gem?

Some clarification on how this works would be greatly appreciated. Having the source sitting in my app's directory somewhere makes sense, and I could point to it relative to the .html files...but with the Gemfile I feel like things are in a little black box...

Answer 1

I absolutely agree it's underwhelming to have the Bootstrap files sit outside your application.

I recommend the following workflow in this case:

1. Clone the repo bootstrap-sass from Github or download the zipball. It's the official port of Bootstrap into Sass and it's kept updated by the same team.

2. Copy only the Sass partials (the ones whose filename begins with an underscore) to app/vendor/assets/stylesheets. Javascript and images go into their respective directories under app/vendor/assets. That will remind you to stay away from editing those files while at the same time keeping your app's asset directories clean. And whenever you feel like taking a closer look at them, they will be right at hand.

3. Copy bootstrap.scss to app/assets/stylesheets and tinker with those as much as you want. Be sure to turn off all the features you're not using, because carrying that stuff around will mean having a larger CSS file than you need.

4. Customize your Boostrap variables and classes and load them after the Bootstrap files in your manifest, just like you would with a gem. For instance, let's say you put your own variables into _overrides.scss. Your application.css.scss would look like this:

   @import "bootstrap";
   @import "overrides";
   

That's it. That's what app/vendor/assets was made for!