Upgrading from Zurb Foundation 4 to Foundation 5

Posted by Jeff Dwyer

Nov 22, 2013 6:31:00 AM

Screen_Shot_2013-11-22_at_5.51.18_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

Screen_Shot_2013-11-22_at_4.18.17_PM

Application "Bootstrapping" is cleaner

Screen_Shot_2013-11-22_at_4.18.05_PM

Pluralization is no longer cool

Screen_Shot_2013-11-22_at_6.03.18_AM

Your TopBar needs a new data attribute

Screen_Shot_2013-11-22_at_6.04.46_AM

Custom-forms is dead

Screen_Shot_2013-11-22_at_6.07.00_AM

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. 

Screen_Shot_2013-11-22_at_6.09.15_AM

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:

Before:

Screen_Shot_2013-11-22_at_6.22.04_AM 

After:

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