9

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...

MCP
  • 4,436
  • 12
  • 44
  • 53
  • 3
    I recommend you watch this: http://railscasts.com/episodes/328-twitter-bootstrap-basics and read this: https://github.com/seyhunak/twitter-bootstrap-rails – fmendez Apr 07 '13 at 21:49
  • As I've included bootstrap now I've used "gem bootstrap-sass" and I've done that outside of any specific environment. The video mentions including it in the assets group. Do I need to adjust that? Also, I've not actually run any specific bootstrap installer except bundle install. Possibly due to this I have no actual Twitter folder or other assets installed...(I got this far with the Rails Tutorial and nothing else is mentioned except including the gem and the @import tags in a .css file) – MCP Apr 07 '13 at 22:23

2 Answers2

14

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!

Marcelo De Polli
  • 28,123
  • 4
  • 37
  • 47
  • That's really helpful. Thank you for showing the alternative way to work with these files. This brings up another question. When you say, "live outside of your app", can you tell me exactly where they live when included with just the gem? This might be my lack of understanding of how the gems work. Are they stored somewhere with my ruby/rails gems and then called in by the application at run time? – MCP Apr 07 '13 at 22:32
  • 2
    Gems are installed in different places depending on whether you use RVM or straight up Ruby binaries. But it's easy to find that out. Just type `gem which` followed by the gem's name and you'll see where it resides. Go ahead and try it out with `gem which rails` – Marcelo De Polli Apr 07 '13 at 22:46
  • Hey @depa this is exactly what I'm looking to do however i'm confused on a few things and would really appreciate it if you could help me out. 1. Do the entire contents (including subdirectories) of bootstrap-sass-master/assets/stylesheets go into app/vendor/assets/stylesheets and should they be kept in their respective subdirectories or put all together? 2. bootstrap.scss does not exist in the directory, do you mean _bootstrap.scss, and is this the only underscored scss file that does not go in app/vendor/assets/stylesheets? – thesowismine Nov 11 '15 at 03:33
  • 3. Could you possibly elaborate on your last item? Should i just make a _overrides.scss folder in app/assets/stylesheets and put any bootstrap overrides i use in there? @depa – thesowismine Nov 11 '15 at 03:33
  • @thesowismine Yeah, that's the idea. Depending on how many custom styles you have, one file may be enough. But you can also use several files and put all of them in the same folder. The important thing is to separate your custom styles from the framework files. – Marcelo De Polli Nov 12 '15 at 16:57
2

i am relatively new to RoR and found there are several different ways to implement bootstrap. i tried the gem thomas-mcdonald / bootstrap-sass and got that to work great. but i wanted to get more in depth knowledge of what exactly the bootstrap files were doing and what the code looked like. the above answer was very helpful. i just wanted to add that this bootstrap 3 video proved to be very useful and worked for me.

kacy hulme
  • 131
  • 1
  • 10