Upgrading to Foundation 6.2

Foundation 6.2 introduced some big changes to our JavaScript and Sass codebase. Follow the steps below to get your project updated. Note that these migrations only apply if you use Foundation with a build system.

JavaScript

The JavaScript is now written in ES2015, which means if you consume the js/ folder of the Foundation package as part of a build process, it will need to be transpiled using Babel. There are many ways to use Babel, including plugins for every build system imaginable.

Note that this doesn't change anything about how you write JavaScript. You can use the new ES features if you want, or you can keep writing code how you always have.

Here's how you can update a ZURB Template project:

1. Install the required Babel packages: npm install gulp-babel babel-preset-es2015 --save-dev
2. Add a .babelrc file to the root of your project with these contents:

{
  "presets": ["es2015"],
  "compact": true
}

3. In gulpfile.js, add the Babel plugin to your javascript task, right above the $.concat() step:

gulp.task('javascript', function() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel()) // <-- There it is!
    .pipe($.concat('app.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/js'))
    .on('finish', browser.reload);
});

Sass

New Sass Export

We moved the CSS for .menu-icon out of the title bar CSS, into its own file. If you use the menu icon class, add this line to your app.scss file:

@include foundation-menu-icon;

Responsive Gutters

In Foundation 6.1, we introduced responsive gutters, with a migration path. With Foundation 6.2, we're finishing the transition to responsive gutters.

To update your codebase, in your settings file:

• Take the value of $grid-column-responsive-gutter and move it to $grid-column-gutter.
• Remove the $grid-column-responsive-gutter variable.

Color Palette

We created a new wrapper around the color variables like $primary-color, $secondary-color, and so on, called $foundation-palette. Adding new colors to this palette allows you to change what CSS classes buttons, callouts, labels, etc. use to change colors.

$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840,
);

To use the new palette variable and retain support for the old variable names, add this mixin to the bottom of the "Global" section of your settings file. It'll copy the values from $foundation-palette into the old color variables.

$foundation-palette: (); // <-- Color variables in here
@include add-foundation-colors;

Flexbox Mode

Users of the flex grid will likely want to switch their project over to flexbox mode, which converts a handful of float- and table-based components to use display: flex instead.

To upgrade to flexbox mode:

1. In your settings file, add a variable $global-flexbox and set it to true.
2. In your main Sass file, add @include foundation-flex-classes; below all other Foundation components.
3. If you're using the current flex grid alignment or source ordering mixins, replace them with the new generic flexbox mixins:

• Replace flex-grid-order() with flex-order().
• Replace flex-grid-row-align() with flex-align().
• Replace flex-grid-column-align() with flex-align-self().

4. If you're using vertical alignment classes on flex columns, replace those classes with the new generic flexbox classes:

• Replace .align-* with .align-self-*.