Work required to upgrade Zurb Foundation v5 to v6.2

Question

What and how much work does it take to upgrade Foundation 5 to 6.2?

Our dev store takes over the development of the existing F5 project. It seems that the external interface is 80%, although we are likely to switch to JSX, so as not to touch. I need help in weighing if F6.2 is worth the hassle, as the client is limited on a budget. The Zurb F6 ad contains only a few advantages with a lower priority (A11y, fewer classes). Flexbox might be useful, a small CSS Foundation is less concerned about UnCSS .

I used F6.2 once, but would like to hear from people who updated real sites from F5 to F6.x using gotchas and time. There is still no guide to upgrade F5 to F6 , and there are no release notes .

Answer 1

The upgrade from Foundation 5 to the latest Foundation 6 includes a complete revision of the site from the new site template, because most of the HTML code is slightly different. No, it’s not difficult, but yes, there is a lot of work on the transition. However, numerous improvements are worth it.

You need to start a new website project in a new folder in order to get all updated sets of files that are contained in these folders ...

• bower_components
• node_modules
• SCS
• CSS

There are various ways to install Foundation for sites 6, my preference is the npm node package manager using the command line, for example:

new foundation
What are you building today? = Site (Foundation for sites)
What is called a project = whatever_projectname
Which template would you like to use? = Main template: includes the Sass compiler

cd what_projectname

BUILD css \ app.css using GULP
foundation assembly

FOR UPDATE css \ app.css
npm start
OR
foundation watch
CTRL + C to complete

After you have downloaded a new set of downloadable v6 files, then in the "scss" folder you need to configure the project's SCSS files and restore the CSS .

• Open _settings.scss and modify the entries as desired, mainly to match what you had in previous v5. Especially the font family, headings, font size, colors, line height, etc. All $ variable names are different, but you will quickly get its gist.
• Open app.scss and select what @includes you want to import, only the ones you really need to minimize the final CSS file size.
• After all your @includes, then you copy / paste all the SCSS style code from your previous Foundation 5 web project .
• Now for the present work. You must convert all of the MIXIN and MEDIA QUERY version 5 code to the new version 6 format. Start by reading the Foundation 6 Media Query page here .
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <which is the best shot for this job. Here are some examples:
  
  OLD Foundation 5 scss code compared to format
  NEW Foundation 6 .
  @media # {$ small-up}
  @ enable breakpoint (small)
  
  @media # {$ large-up}
  @ enable breakpoint (large)
  
  @media # {$ portrait}
  @ enable breakpoint (portrait)
  
  @include grid-column ($ columns: 12);
  @include grid-column (12);
  
  @include flex-video-container ();
  @include flex-video (wide format flexvideo-ratio);
  
  @Include button ($ background: $ primary-color);
  @Include button ($ expand: false, $ background: $ primary-color, $ background-hover: auto, $ color: auto, $ style: solid); font-size: 0.85rem;
  
  
• The base watch command line query generates your last app.css file every time you save a scss file. If there is an error in your scss, GULP displays the line number on which this error occurred. Read, make the necessary corrections, and save again until app.css is generated without errors.
• Browse through the test page of the Foundation 6 website, continue to customize the CSS, and when you're happy with the look, you'll be ready to apply your new Foundation 6 template to every page on the website.

Foundation 5 ==> Complete Foundation 6 transformation .

The more conversions you make, the faster and easier it becomes.

Answer 2

I think this is much more involved than that (which is explained in the question). Listed below are the changes I should have applied to (relatively simple project). The amount of effort made me think twice before updating my other larger projects. However, I thought the following might be useful for other people who might consider updating their websites.

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

2.//////////////SCSS VARIABLES: In 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 that will not compile from scss to css

3.//////////// PANELS AND BOXES: In php / html: REPLACE classes (panel) and (warning) with class removal. For me, the following lines that I used in the Replace Editor dialog box ( using regular expressions ). Depending on your design and coding style, you will probably need different lines.

• 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>

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

• ADD <p> added to the text inside each warning window around the text message: <p>...</p>

4.//////////// // MENU: I believe that the best way to handle menus is to rewrite 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 templates: - 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/ // }, // } // }); 

** In no case is a complete list of all necessary changes. If so, the Foundation team would publish this a long time ago. However, this is a starting point that can give you an idea of ​​what is happening.

Luck.... **