1

I have the HTML/CSS version of a site (built on Bootstrap) that I am translating to a Rails 3 app.

The asset pipeline is driving me crazy.

Because of the bootstrap_and_overrides.css.scss file that is generated by the gem, there are conflicts between the way it is showing up in my Rails App and just the regular HTML files.

One such thing is what seems to be the override of some font styles.

This is how 1 h3 is supposed to look, for instance.

HTML style

This is how that same h3 is being rendered in my Rails App.

Rails style

So the issue with the way the page is being displayed is in these particular styles....but I can't figure out why this style is being overridden.

I would love any tips about how I may go about finding out why this is being done.

Also, one thing that is bugging me is the media=all in the Rails version on that screenshot. Not sure if that could be contributing to these issues.

Edit 1

As @coreyward pointed out, it may have been the order in which my stylesheets are initialized. In my original HTML/CSS files, the Bootstrap & Font-Awesome related css are declared before the main.css. But in Rails, it's the opposite way around.

Given that my initial declaration in application.html.erb looks like this:

<%= stylesheet_link_tag "application", :media => "all" %>

How do I reverse the order of these things initialized?

Edit 2

I am using this bootstrap-sass gem, and the issue is that it doesn't want you to use the //=require directive - so I can't just re-arrange the order in the CSS manifests file. Or rather, I am not sure how to do it.

Thoughts?

marcamillion
  • 32,933
  • 55
  • 189
  • 380
  • Asset pipeline isn't to blame here at all, but if you're not including assets in the desired order that could have an unintended effect. You should probably refresh your knowledge on how styles cascade in Cascading Style Sheets. – coreyward Dec 28 '12 at 06:08
  • Hrmm....interesting point...I could have flubbed the translation for sure. But the issue is that I just have 1 stylesheet - `application.css.scss` and then I included the Bootstrap stylesheets. Edit1: Btw, you may be right. I do notice that in the regular HTML version, the `main.css` is called after the bootstrap related stylesheets are. In Rails, it is the opposite way around. How do I fix that given that I have just done: `<%= stylesheet_link_tag "application", :media => "all" %>` in my layout? – marcamillion Dec 28 '12 at 06:09
  • All the asset pipeline is doing is concatenating and minifying. If you put equally as specific selectors after others, they're going to override any of the same properties. That's why you include Bootstrap before defining your own styles. – coreyward Dec 28 '12 at 06:11
  • Right...see my updated comment. How do I specify Bootstrap before my styles in Rails? – marcamillion Dec 28 '12 at 06:13
  • @marcamillion You can do that in the CSS manifest file. See: http://stackoverflow.com/questions/8890929/rails-3-1-load-css-in-particular-order – Nic Dec 28 '12 at 06:15
  • @Nic I updated the question to reflect why using the CSS manifest file won't work with my current Bootstrap gem. – marcamillion Dec 28 '12 at 06:31
  • @marcamillion You want to use `@import` statements in Sass instead of the `require` directives, and the order still matters. What does your `application.css` look like? And what is `main.css`? – coreyward Dec 28 '12 at 07:32
  • Ok....I changed gems and am using a Bootstrap gem that allows me to use `require` directives. I then played around with the order of some of the stylesheets and it works now. – marcamillion Dec 28 '12 at 19:37

2 Answers2

1

the media=all just means to include screen and print. If you don't care about how the site looks when someone prints it, then you can just do media="screen". As far as why some of these style are being overriden like that. Make sure in your asset pipline that you're not including a scaffold.css with the require_tree .. That usually gets a lot of people. Also, you don't have to include that whole bootstrap_and_overrides file. You could just = require twitter/bootstrap/bootstrap if you just wanted that portion. Hope that gets you close.

jeremywoertink
  • 2,281
  • 1
  • 23
  • 29
  • Yeh I don't have `scaffold.css` in my stylesheets folder. That has tripped me up in the past, so I got rid of it long ago. The issue has to do with the order in the manifests file. The issue also is that the particular Bootstrap gem I am using (bootstrap-sass) doesn't like `//=require` directives. – marcamillion Dec 28 '12 at 06:24
0

I switched gems from bootstrap-sass to twitter-bootstrap-rails, which allowed me to specify the order of the require directives.

After playing around with the correct ordering of the directives I finally found one that seems to have fixed my issues.

marcamillion
  • 32,933
  • 55
  • 189
  • 380