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

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....**