Work needed to upgrade Zurb Foundation v5 to v6.2

Question

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.

Answer 1

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.

Answer 2

I think it is much more involved than this (what is explained in the question). Following are the changes, which I had to apply to a (relatively simple project.) The amount of effort involved made me think twice before upgrading my other bigger projects. However, I thought the following might be useful for other people who might be thinking about upgrading their websites.

1. ////////////// JS: On the File System, replace the js scripts, which are referenced at the bottom of the html/php scripts, with the new versions, which are available at \bower_components\foundation-sites\dist. For example, copy \bower_components\foundation-sites\dist\abc.js to yourProject/js/abc.js.

2. ////////////// SCSS VARIABLES: In the files (_settings.scss), (_custom_styles.scss), etc:

• REPLACE $paragraph-font-size WITH $global-font-size

• REPLACE $callout-bg WITH $callout-background

• .... and replace any other variables, which fail the compilation from scss to css

3. ////////////// PANELS & ALERT BOXES: In php/html: REPLACE the classes (panel) & (alert) WITH the class callout. For me, following are the strings, which I used in the Editor's Replace dialogue (using regular expressions). Depending on your design and coding style, you will probably need different strings.

• REPLACE :<div data-alert class='alert-box **success** round'> WITH :<div class='**success** callout' data-closable='slide-out-right'>

• REPLACE :<div data-alert class='alert-box **alert** round'> WITH :<div class='**alert** callout' data-closable='slide-out-right'>

• REPLACE :<a href='#' class='close'>&times;</a> WITH :<button class='close-button' aria-label='Dismiss alert' type='button' data-close> <span aria-hidden='true'>&times;</span> </button>

• REMOVE the line: <script src="./js/foundation.alert.js"></script>

• To the text inside each alert box, ADD <p> around the text message: <p>...</p>

4. ////////////// MENUS: I think the best way of handling menus, is to re-write them from scratch.

5. ////////////// TABLES: REPLACE :class='table' WITH :class='hover'

6. ////////////// Make TABLES Responsive (optional):

• REPLACE :<table WITH :<div class='table-scroll'><table

• REPLACE :</table> WITH :</table></div>

7. ////////////// ABIDE:

• REPLACE :</label>(.*)\r\n(.*)<small class=['|"]error['|"]>(.*)</small> WITH :<span class="form-error">$3</span>\r\n$2</label>

• REPLACE :<form (.*) data-abide(.*)> WITH :<form $1 data-abide novalidate $2>

- Custom patterns: - use the following 2 lines, instead of the commented lines:

// Foundation 6 Style:
Foundation.Abide.defaults.patterns['dd_mm_yyyy'] = /((0[1-9]|[12][0-9]|3[01])[- \/.]0[1-9]|1[012])[- \/.]\d\d/; 
Foundation.Abide.defaults.patterns['short_time'] = /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9])/; 

// Foundation 5 Style:
// $(document).foundation({
 // abide : {
   // patterns : {
     // short_time: /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9])/,
     // dd_mm_yyyy: /((0[1-9]|[12][0-9]|3[01])[- \/.]0[1-9]|1[012])[- \/.]\d\d/
   // },
  // }
// });

**By no means, this is a comprehensive list of all the required changes. If it is, the Foundation team would have published it long time ago. However, it is a starting point, which might provide you with an idea of what is involved.

Good Luck....**

Answer 3

Also found that abide wants custom validators to be defined prior to initialising Foundation 6 eg. I have a phone number validator which is called first

// Set Custom validator for Description fields to not accept phone numbers
noPhone(); 
$(document).foundation();