How can I use two css frameworks in one rails app? (Using foundation and bourbon neat on same app)

Question

I have a rails app that was built using foundation 3 (not using the gem. It is located in vendor/assets/stylesheets/foundation.min.css).

And I want to gradually convert my styling code to Bourbon/Neat.

One thing I have to have in mind is not to break the previous layouts while I'm not done with the recoding.

Is it possible to do this?

rails version: 3.2.13 ruby: 1.9.3

Answer 1

For any given page in your app, you can include whatever styling you want by including the stylesheets on that page.

So for pages that have Foundation styling, make sure you have a link to that stylesheet, and for pages have Bourbon/Neat styling, have a link to that stylesheet.

You typically see all the stylesheets included together in the layout file, by adding something like:

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

This simply points to an index file (assets/stylesheets/application.css), which in turn lists all the other stylesheets that should be included on the page.

If you want, you could either include the stylesheets into your pages one-by-one, or you could use 2 different layouts: 1 for Foundation and 1 for Bourbon/Neat. Then within each of those layouts have different stylesheet sets:

# points to assets/stylesheets/foundation.css
<%= stylesheet_link_tag "foundation", media: "all" %>

# points to assets/stylesheets/bourbon.css
<%= stylesheet_link_tag "bourbon", media: "all" %>

Then as you transition from one to the other, you can just change the controller actions one at a time to use the Bourbon/Neat stylesheet set by using the Bourbon/Neat layout.