Menu icon Foundation
Updating Rails Project From Foundation 4

I posted this in another thread, but felt like it needed to be a new post:

Can anyone list out the steps that should be taken to update a Rails project currently using Foundation 4? The foundation-rails gem seems to give us a half-baked update (without critical SASS files), and the Foundation documents are confusing.

Are we supposed to update the gem and then manually migrate the Javascript as shown here, http://foundation.zurb.com/docs/upgrading.html, in the "Migration Guide", then manually install bower and update Foundation with Compass as shown here: http://foundation.zurb.com/docs/sass.html?

Or, is the foundation-rails gem supposed to do everything? After updating the gem, I find that I'm missing files as I look through the docs and that the JS functions don't seem to be firing.

railsFoundation 4UpdategemSassmigrate

I posted this in another thread, but felt like it needed to be a new post:

Can anyone list out the steps that should be taken to update a Rails project currently using Foundation 4? The foundation-rails gem seems to give us a half-baked update (without critical SASS files), and the Foundation documents are confusing.

Are we supposed to update the gem and then manually migrate the Javascript as shown here, http://foundation.zurb.com/docs/upgrading.html, in the "Migration Guide", then manually install bower and update Foundation with Compass as shown here: http://foundation.zurb.com/docs/sass.html?

Or, is the foundation-rails gem supposed to do everything? After updating the gem, I find that I'm missing files as I look through the docs and that the JS functions don't seem to be firing.

Joshua Steele about 6 years ago

I actually just did this and posted my steps in response to someone else's question here on the forum. I didn't see any clean way to link to that answer, so I'll paste in my answer here:

I just upgraded my Rails 3.2 app from F4 to F5. There were a few bumps, but overall it's working fine for me. So here are some observations.

1) I too was surprised at the empty foundation_and_overrides file. However, it still works as you would expect. All the SASS variables for a given component are available at the bottom of the docs page for that component. I agree, it's nice to have them all in one place where you can just switch them on/off (and I assume the Zurb crew will get that running for us soon) but in the meantime, if you're using a component, just paste in all the vars for that component and change what you need. Works for me.

2) Yes, emCalc() is now rem-calc(). I develop in Chrome, and at seemingly random points Chrome will not recognize rem-calc(). However, when that happens, I just fall back to using ems or even rem. For some reason, rem-calc calls in my custom.css.scss file seem to be recognized without a problem, while similar calls (setting various SASS vars) in the founation_and_overrides file have to be in em/rem. (If you notice that our rem-calc() changes are not being recognized, check the dev tools panel in Chrome and look at what styles are being used. Often, I would see a little yellow warning triangle next to rem-calc, indicating that Chrome was ignoring it.)

3) As for the upgrade process for Rails, I agree - it seemed a bit half-baked. Happily, the inner workings seem to be in place, just the docs are a bit sparse. (meaning, the gem docs on Github) So here's what I did:
- Checkout a topic branch in Git!
- Comment out (or remove) the old zurb-foundation gem in my Gemfile
- Add the new one: foundation-rails
- Bundle install
- rails g foundation:install
- Then just check through your assets and make sure everything is in order. One point that was confusing to me was whether or not to rename application.css to application.scss. In the end, I left it as css and everything seems to work fine. (That's how I had it under F4.)
- So in application.css I have this:

*= require_self
*= require foundation
*= require_tree .
*/

  • In application.js I have this:
 //= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(document).foundation();

  • At the bottom of foundation_and_overrides I have this:
@import 'foundation';
  • And at the top of my custom css file, I have this:
@import "foundation_and_overrides";

The one sticky point is that my custom.css.scss no longer appeared last in the list of stylesheets loaded by Rails. It was just loading them in alphabetical order, which meant that 'foundation_and_overrides' was taking precedence over my custom.css.scss file. I'm sure there's a valid reason for this, I just haven't had time to research it. Meanwhile, I'm getting around it by renaming my own css file z-custom.css.scss, which places it at the bottom of the list. A hack to be sure, but everything is working.

Other than that, I'm good. Of course, I had to go though and tweak markup all over the place, but that was fairly straightforward.

Hope this was helpful. :)

Josh Aronoff about 6 years ago

I tried this, it SEEMED to work... Tried to implement the new off canvas menu instead of the top bar, no dice. I'll have to play around with this further.