csszurb-foundationzurb-foundation-6

How to migrate a web site to Zurb Foundation 6 from Zurb Foundation 4?

I am looking a at large project that used Foundation version 4.x . This project has used the grid extensively: almost all HTML pages have

css classes from version 4x such as 

row, large-12 columns, panel, callout

I am trying to figure out a few basic methods to transition ?

question :are row, columns and panel classes still supported ?

how to translate old row and column to new grid classes i.e. if I have a 

<div class="row>
  <div class="large-12 columns">

what is the equivalent in Foundation 6?

Solution

  • The Flex Grid or Float Grid is supported still, however you need to import Foundation slightly differently.

    To use the Float Grid in Foundation v6.4+, you need to:

    In CDN link or package managers: import foundation-float.css in place of foundation.css.

    In Sass: set both $xy-grid and $global-flexbox to false.

    To use the Flex Grid in Foundation v6.4+, you need to:

    In CDN link or package managers: import foundation-flex.css in place of foundation.css.

    In Sass: set $xy-grid to false.

    To update your HTML to use the XY Grid

    Based on the example you have given, the most direct 'conversion' would be:

    <div class="grid-x">
    <div class="cell">

    You can learn more about the XY Grid system here