Work needed to upgrade Zurb Foundation v5 to v6.2

What & how much work is required to upgrade Foundation 5 to 6.2?

Our dev shop is taking over development of an existing F5 project. Seems the front-end layout is 80% complete, though we'll likely transition into JSX to little will be untouched. I need help in weighing if F6.2 is worth the extra hassle, since the client is budget-limited. Zurb's F6 announcement lists only a few lower priority advantages (A11y, fewer classes). Flexbox might be helpful, small Foundation CSS is less of a concern thanks to UnCSS.

I've used F6.2 once, but would like to hear from folks who upgraded real sites from F5 to F6.x with gotchas & time needed. There still is no F5 to F6 upgrade guide, & release notes are lacking.

Upgrading from Foundation 5 to latest Foundation 6 involves a full website rebuild from a new website Template, because much of the HTML code is a bit different. No it is not difficult, but yes, there is a fair amount of work in making the transition. However, the numerous improvements are worth it.

You need to start a new website project in a new folder to get all the updated file sets, which are contained in these folders ...

• bower_components
• node_modules
• scss
• css

There are various ways to install Foundation for Sites 6, my preference being npm node package manager using the Command Prompt, like so :

foundation new
What are you building today? = A website (Foundation for Sites)
What's the project called = whatever_projectname
Which template would you like to use? = Basic Template: includes a Sass compiler

cd whatever_projectname

TO BUILD css\app.css using GULP
foundation build

TO UPDATE css\app.css
npm start
OR
foundation watch
CTRL+C to end

Once you have the new set of v6 files downloaded, then in the 'scss' folder you need to customize the project SCSS files and regenerate the CSS.

1. Open _settings.scss and modify entries as desired, basically to match what you had in previous v5. Especially font-family, headings, font-size, colors, line-height, etc. All the $variable-names are different, but you will quickly get the gist of it.
2. Open app.scss and choose what @includes you want to import, just those you really do need so as to minimise final CSS filesize.
3. After all your @includes, then you copy/paste in all the custom SCSS style code from your previous Foundation 5 website project.
4. Now for the real work. You must convert all the Version 5 MIXIN and MEDIA QUERY code across to the new Version 6 format. Start by reading the Foundation 6 Media Query page here.
   Your website software will surely have a 'Find' and 'Replace' feature, which is the best shot for this job. Here are some examples of :
   
   OLD Foundation 5 scss code compared to the
   NEW Foundation 6 format.
   
   @media #{$small-up}
   @include breakpoint(small)
   
   @media #{$large-up}
   @include breakpoint(large)
   
   @media #{$portrait}
   @include breakpoint(portrait)
   
   @include grid-column($columns:12);
   @include grid-column(12);
   
   @include flex-video-container();
   @include flex-video($flexvideo-ratio-widescreen);
   
   @include button($background:$primary-color);
   @include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid); font-size: 0.85rem;
   
   
5. Command Line Prompt 'foundation watch' generates your final app.css file upon each scss file save. If there is an error in your scss, GULP displays the Line Number where that error occurred. Read up, make necessary corrections and save again until app.css is generated without error.
6. View your Foundation 6 website test page, continue to tweak the CSS and, when happy with appearance, you will be ready to apply your new Foundation 6 Template to every page on the website.

Foundation 5 ==> Foundation 6 conversion complete.

The more conversions you do, the quicker and easier it becomes.