Version 6.2.0 RC1

Lots of awesome changes in this release, from ES2015 to flexbox.

• To install with npm: npm install foundation-sites@beta
• To install with Bower: bower install zurb/foundation-sites#6.2-dev

Be sure to read our upgrade guide before making the leap.

General

• ECMAScript 2015! We updated our entire JavaScript codebase to ES2015, which is transpiled to ES5 using Babel. The entire codebase is backwards-compatible. No changes to your existing code are required.
  • Users of the ZURB Template will need to add Babel to their build process—see our 6.2 upgrade guide for more info.
  • The dist/ folder of the packages will continue to have ES5 code.
  • Huge, huge props to @colin-marshall, who converted almost all of the core plugins to ES2015 classes for us.
• Flexbox mode! We introduced a flexbox grid in Foundation 6. With version 6.2, we're introducing a global flexbox mode, which turbocharges existing Foundation components with flexbox properties when enabled. To enable it, set the $global-flexbox variable in your settings file to true.
  • The flex grid classes for alignment and source ordering are now generic flexbox utilities, usable by any flexbox component. To get these classes, add @include foundation-flex-classes to your main Sass file.
  • We've got a new flexbox page in the documentation that goes into more detail.
• Customizable color palettes! A new Sass variable called $foundation-palette now holds the hex codes for the primary, secondary, success, warning, and alert colors. The colors in this variable are used to create color classes for buttons, labels, and so on. This means you can add new colors to the list, and get new CSS classes to customize components.
  • The old variables, $primary-color and so on, still work, but now reference the values from this map.
  • Projects without $foundation-palette will continue to work like normal.
• Native elements! We added optional CSS styles for <input type="range">, <progress>, and <meter>. Because these elements are not supported by older browsers, they aren't enabled by default.
  • Enable range inputs with @include foundation-range-input.
  • Enable progress bars with @include foundation-progress-element.
  • Enable meters with @include foundation-meter-element.
• ZURB Template updates!
  • We updated the ZURB Template to Gulp 4.0 and an ES2015 Gulpfile. Upgrading to Gulp 4.0 allows us to more elegantly solve problems with task concurrency that we encountered with Gulp 3.
  • The template also now includes a configuration file, config.yml, which allows you to configure the build process without modifying the Gulpfile.
  • Lastly, we added Babel to the build process.
  • Note that the updates to the template will not be in master until 6.2 is properly released.
• Forms were placed before buttons in the default cascade, which fixes specificity issues between forms and buttons.
  • You don't have to upgrade this, but if you want to, just place @import foundation-forms before @import foundation-buttons in your main Sass file.
• The .menu-icon classes, previously bundled with Title Bar, now has their own file and CSS export. To use it, add @include foundation-menu-icon to your main Sass file.
• The foundation-sites npm package now works as an Eyeglass module.
• Updated jQuery dependency to version 2.2.x.

Sass Settings Changes

The following changes were made to _settings.scss. All new projects will get these changes automatically. If you're upgrading an existing project, you'll need to change these defaults or add the new variables yourself.

• Added: $global-flexbox: false — enables flexbox mode for components.
• Added: $print-transparent-backgrounds: true — sets if background colors of elements should be transparent when printing.
• Added: $input-placeholder-color: $medium-gray — sets text color of text input placeholders.
• Added: $topbar-submenu-background: $topbar-background — allows you to set a different menu color from the top bar background color. #8091
• Added: $topbar-unstack-breakpoint: small — allows you to set the breakpoint at which a top bar shifts from mobile to desktop mode.
• Added: $menu-item-color-active — color of menu items with an .active class.
• Added: $menu-item-background-active: $primary-color — background color of menu items with an .active class.
• Removed: $tab-border — use $tab-content-border instead.
• Removed: $tooltip-pip-offset — wasn't being used.
• Removed: $menu-expand-max — not needed any more with how menu CSS works now.
• Updated: $grid-column-gutter should now use the value $grid-column-responsive-gutter had in Foundation 6.1.

If you're interested in using the <meter> element, it has these settings variables:

• $meter-height: $progress-height
• $meter-radius: $progress-radius
• $meter-background: $progress-background
• $meter-fill-good: $success-color
• $meter-fill-medium: $warning-color
• $meter-fill-bad: $alert-color

The <input type="range"> and <progress> components use the same variables as Slider and Progress Bar, respectively.

Deprecations

• flex-order() is replacing flex-grid-order().
• flex-align() is replacing flex-grid-row-align().
• flex-align-self() is replacing flex-grid-column-align().
• The use of alignment classes such as .align-top, .align-middle, and so on is being replaced by generic flexbox utility classes called .align-self-top, .align-self-middle, etc.
• Responsive gutter logic is now defined with $grid-column-gutter instead of $grid-column-responsive-gutter.

The old flex grid alignment/ordering mixins are still in the codebase, but using them will print a deprecation warning. They'll be removed entirely in Foundation 6.3.

In addition, the responsive gutter logic has completely replaced the old gutter logic. If you're not interested in using responsive gutters, you can still pass a numeric value to $grid-column-gutter, and it will be used on all screen sizes.

Features

• Added flexbox helper mixins:
  • flex(): sets an element to display: flex;.
  • flex-order(): sets source order for a flex child.
  • flex-align(): sets horizontal or vertical alignment for a flex parent.
  • flex-align-self(): sets vertical alignment for a flex child.
• Button Group: added a .stacked-for-medium class.
• Flex Grid: added block grid support.
• Mixins
  • form-input-error(): added a $background-alpha parameter, which adjusts the opacity of the background color.
  • foundation-everything(): setting the $flex parameter to true will now also enable flexbox mode.
  • Added map-deep-get() to access deeply-nested properties in Sass maps.
  • Added grid-layout-center-last() to auto-center the last row of items in a block grid.
• Menu
  • Added an .active class, which can be applied to an <li> to visually represent the active item.
• Toggler
  • data-toggle can now trigger multiple elements at once. Just separate the IDs with spaces.
  • Added data-toggle-focus, which toggles elements on/off when an element is focused and unfocused.

Bug fixes

• Breakpoints: removed the warning statements around using xxlarge only and xxlarge down in the breakpoint() mixin, in favor of better fallbacks:
  • If you use only with the highest breakpoint, the resulting media query will be (min-width: n), where n is the width of the breakpoint.
  • If you use down with the highest breakpoint, no media query will be output. This is because xxlarge down means "the xxlarge breakpoint and down", which is equivalent to "everything".
• Button Group
  • Reworked to not use borders, which fixes several visual bugs with button groups. Thanks @andycochran! #7933
  • Fixed misaligned arrow inside a split button.
• Dropdown Menu: don't output unnecessary a::after CSS if $dropdownmenu-arrows is false.
• Forms: fixed some styles not being applied to <input type="radio">.
• Magellan: fixed it not working properly in Firefox.
• Menu: fixed <span> elements inside an <a> being misaligned.
• Mixins
  • clearfix(): added extra properties that allow it to work with flexbox elements. #8152
• Off-canvas: prevent margin collapsing on .off-canvas-content, which could create visual bugs with short pages.
• Pagination: use hex codes instead of special characters in the CSS content property.
• Reveal: the plugin's positioning logic was reworked to fix many issues with modals, including:
  • Modals having an extreme top offset #8041
  • Not positioning correctly on small screens #7977
  • Not being able to scroll on Mobile Safari or Chrome for Android #7971
• Slider: fixed dual-handled sliders sometimes not rendering the fill properly on init. #8128
• Sticky: fixed incorrect height calculations due to DOM contents shifting around before the page is fully loaded.
• Typography: fixed $keystroke-radius variable not being applied to <kbd> elements.

Contributors

Here are the folks who made this release possible. If you want to contribute, check out our contributing page on the Foundation site, or browse the help wanted issue tag on GitHub.

• akodde
• Alex Hanna
• Alexander Martin
• Andy Cochran
• Brian Tan
• Chris Oyler
• Chris Ramos
• Colin Marshall
• Erik Mellum
• Geoff Kimball
• Lynda
• Michel Sabchuk
• monosize
• Pete Cooper
• Prayag Verma
• Rafi Benkual
• Tom Byrer
• Tvrtko Majstorović
• Vic McGlaughlin