Upgrading from Zurb Foundation 4 to Foundation 5

Posted by Jeff Dwyer

Nov 22, 2013 6:31:00 AM

I'm a big Foundation fan, so I was pretty excited to hear that Foundation 5 has been released. I'm most of the way through the upgrade but it certainly wasn't bump free. 

Here's what I've learned:

There's a new gem in town


Application "Bootstrapping" is cleaner


Pluralization is no longer cool


Your TopBar needs a new data attribute


Custom-forms is dead


You MUST Have application JS loaded inside the <body> tag. Not the <head>.

Otherwise I got a very unfriendly error about Layout needing to be a layer from FastClick 

You probably need data-turbolinks-eval => false

Since I had to move the application.js from the head to body it was now loading everytime I changed from page to page via turbolinks. This fixed things. 


Changing your foundation_and_overrides is a PITA

I don't have a real solution for you here. Besides the fact that this was a pita. A lot has changed, such as:

$h1-font-size: rem-calc(44) !default;

Which is now in rem's instead of em's. This broke for me because rem-calc was not defined until I moved @import "foundation/global" to happen earlier.

I general, the difficult thing seems to be determining what constants names have changed.

Overall, things are starting to come together:




Screen_Shot_2013-11-22_at_6.22.25_AM What do you think?

Try ForceRank

Topics: Tech


What is ForceRank?

ForceRank is a prioritization tool for product managers. It helps people identify priorities, make tradeoffs, compare results and finalize a plan.

Try ForceRank

Recent Posts

Recent Posts

Follow Us