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:
Before:
After:
What do you think?
