How to override Zurb Foundation css properties using rails 3.1?

Question

Hi there im working on a new rails app and i just started to use Foundation.

I did the installation using

rails g foundation:install

Everything is working as espected (i mean by that i can see the css in my source code, and also the visual effect of it ;p)

I just dont understand how to override the defaults proprieties of Zurb Foundation...

I saw online that im supposed to edit some foundation.css or app.css but here doesnt seems to be any file like that in my Application folder....

I did the installation by editing the gemfile then a bundle install.

cheers

Answer 1

Option 1: Since you installed it through bundler (assuming you used something like gem 'zurb-foundation'), you won't have any files that you can edit directly. You can override and style as usual by editing app/assets/stylesheets/application.css or adding new files within the directory. I'd recommend this over modifying Zurb so you can continue receiving the benefits of being able to upgrade to newer versions of Zurb in the future without dealing with a mess.

Option 2: If you feel that you need more control over the customization and you aren't worried about the above pitfalls, you can clone/download foundation-rails and copy the files in vendor/assets to your own Rails directory of the same name. Remove zurb-foundation from your Gemfile, rebundle, and you should be able to modify the assets directly in your own project.

Option 3: Check out foundation-sass and give Compass a try. I haven't looked into it much but you should have some amount of customization through mixins.

Answer 2

and yes it works if you do your overrides on the app/assets/stylesheets/application.css

But it's better if you do it in the app/assets/stylesheets/foundation_and_overrides.scss,

also at the top of the file, there's a bunch of lines commented, with those lines you can also modify some attributes!