foundation-sites - The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
todo
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.
Sass
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.
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:
In your settings file, add a variable $global-flexbox and set it to true.
In your main Sass file, add @include foundation-flex-classes; below all other Foundation components.
If you're using the current flex grid alignment or source ordering mixins, replace them with the new generic flexbox mixins:
If you're using vertical alignment classes on flex columns, replace those classes with the new generic flexbox classes:
Replace flex-grid-order() with flex-order().
Replace flex-grid-row-align() with flex-align().
Replace flex-grid-column-align() with flex-align-self().
Replace .align-* with .align-self-*.