Version 6.2 — Tethys

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

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.
• Added two new files to the dist/ folder of our package: foundation-rtl.css and foundation-rtl.min.css, which are default builds of Foundation with right-to-left support enabled.
• Added a JSPM configuration to our npm package—thanks @glen-84!
• In the app.scss files we distribute with our templates, we now place the CSS for utility functions at the bottom of the file, below every component. This ensures that the styles for those classes actually apply.

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](https://github.com/zurb/founda...

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

Version 6.1.2 — Planet Nine

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 $topbar-title-spacing: 1rem
• Removed $topbar-link-color

General

• Our Sass unit tests have been migrated from Bootcamp to True—thanks @colin-marshall!
• The jQuery dependency in package.json has been locked to 2.1.x, like bower.json. Before, npm would allow for bumping minor versions while Bower would not. For Foundation 6.2, we'll bump our jQuery dependency to 2.2.

Features

• table() mixin: added a $nest parameter. When set to true, selectors for tbody, td, etc. are nested inside the current selector. This allows you to constrain the Foundation table styles to a custom class. #7454
• Flex Grid: added styles for .column.row.
• Added a new variation on the syntax for top bar, which allows for a separate title area and menu area. Works great with the Responsive Toggler plugin! Learn more in the Advanced section of the top bar documentation. Thanks @brettsmason for the idea and the CSS!

Bug Fixes

• Grid
  • Properly pass a custom column class to the block grid CSS when using custom grid classes. #7692
  • Fix misaligned gutters when nesting a row inside of a collapsed row.
  • Fix uncentering and offset classes occasionally working.
  • Properly center rows nested inside of expanded rows.
• Flex Grid
  • Prevent columns with the .shrink class from overflowing on iOS devices. #7654
  • Prevent an error related to an unassigned variable $gutter when compiling with Ruby Sass.
• Forms
  • Prevent text inside of an input group label from wrapping. #7769
  • Fix inconsistent positioning of the triangle inside <select> elements across browsers.
  • Fix form error background colors being hardcoded to $alert-color.
  • We commented out Normalize.css's <fieldset> styles, as we apply a different reset that was conflicting with Normalize.
  • Prevent text inside of a <legend> from overflowing in IE10.
  • Use $button-radius instead of $global-radius to determine the border radius of <input type="submit"> and <input type="button"> elements.
• Dropdown
  • Properly apply the $dropdown-font-size variable in the dropdown CSS. #7919
  • Prevent submenus from anchoring on the wrong side when the top-level menu is vertical.
• Dropdown Menu
  • Add proper right-to-left support. #7931
  • Cut back the specificity of the various state classes, such as .is-dropdown-submenu and .is-dropdown-submenu-parent.
• Reveal
  • Fix the $reveal-offset variable not being used in the modal CSS. #7780
  • Prevent a callout with data-closable inside of a modal from closing the modal.
  • Prevent modal from resizing right before it disappears, when animating out.
  • Fix modals not closing if set to be full-screen, or set to not have an overlay.
• Breakpoints
  • breakpoint() mixin: will emit warnings if used improperly, such as creating an xxlarge only media query, when xxlarge is the highest breakpoint.
  • Updated the code to avoid a deprecation warning in Ruby Sass 3.4.20.
• Drilldown
  • Fix the wrong state class being added to drilldown submenus. #7885
  • The CSS triangle created for the back button is now part of the <a>, rather than the parent <li>, making it easier to style. #7949
• Slider
  • Added proper right-to-left support.
  • Fix left and right handles overflowing the container.
• Top Bar
  • Prevent buttons that are <a>s inside of top bar from getting link color styles.
  • Properly apply the background color of the top bar to <ul>s nested inside of it.
• Accordion: Remove double border at the bottom of the accordion container, and prevent the border on the last accordion title from disappearing when it's the active one.
• Accordion Menu: Fix aria-expanded in submenus not being updated.
• Button: Prevent the .expanded and .stacked-for-small classes from fighting with each other.
• Media Object: Remove an invalid selector and replace it with a more valid one.
• Menu: Fix styles in the .simple class from being overridden by more specific base menu CSS.
• Menu Icon: In 6.1, we quietly removed the .dark class for .menu-icon, which hadn't been documented. By popular demand, we added it back!
• Off-canvas: Fix closeOnClick not working when set to false and there are two menus on the page.
• Orbit: No longer attempts to auto-play if there's only one slide.
• Pagination: Correct the behavior of $pagination-mobile-items to prevent all of the page numbers from disappearing on mobile.
• Progress Bar: Changed the selector for .progress-meter-text to be standalone instead of nested, reducing its specificity.
• Sticky: Fix wack behavior when used in conjunction with off-canvas.
• Table: Add width: 100% to tables so they expand automatically.
• Toggler: Added a better fallback when using without Motion UI.
• Tooltip: Fix templateClasses option not working.

We would have saved this release codename for Foundation 9, but by then it may have been found that the planet doesn't exist.

Version 6.1.1 — Charon

• Added !default to $foundation-colors, in case you want to modify it yourself. It was not added to the settings file, however.
• Removed a rogue root-level & in Sass that caused errors in Ruby Sass.
• Prevent the open trigger of off-canvas from firing multiple times.
• Fixed two issues with off-canvas panes that use the .reveal-for-* classes:
  • If an off-canvas is revealed, a click trigger won't open it.
  • If an off-canvas is open on a small screen and the browser is scaled up, it will "close" properly.
• Fixed an issue with Sticky where calling data-sticky with no anchor points would cause it to remain sticky only for the height of the view, not the height of the document.
• Fix Abide not firing the formvalid and forminvalid elements from form elements.
• Added an option for off-canvas to trap focus, trapFocus. The default value is false.
• Fixed the Interchange replaced event not firing for replaced background images.

Charon is a moon of Pluto that manages to have a diameter nearly half the size of its host planet.

Version 6.1 — Hyperion

Upgrades Required

Base Font Size

In Foundation 6.0 (and 5.0 before it), the base font size was changed with $global-font-size, and the number used in rem-calc() was changed with $rem-calc. This made adjusting the font size fairly confusing, and had the side effect of the base font size affecting the "real" pixel widths of the grid and breakpoints.

In Foundation 6.1, we rolled the functionality of $rem-calc into $global-font-size. $global-font-size is now used in the math behind rem-calc(). This insures that, for example, increasing the base font size won't make your grid wider. Breakpoints will also now always be the same, regardless of your design's base font size.

To upgrade, remove $rem-base from your project and just use $global-font-size. The value of $global-font-size can be a percent value, or a pixel value.

Responsive Gutters

The way grid gutters function has changed. Before, one variable controlled the global grid gutter width.

$grid-column-gutter: 30px;

Now, the gutters are responsive, meaning they change widths at different screen sizes. These are the default values:

$grid-column-responsive-gutter: (
  small: 20px,
  medium: 30px,
);

You can add additional gutters that correspond to other breakpoints, based on what's in your project's $breakpoints map.

The existing gutter functionality will keep working in 6.1, but the old gutter functionality will be removed in Foundation 6.2, so here's how you can upgrade:

• To keep the static gutters in an existing project, don't change anything, and they'll continue to work the same until Foundation 6.2.
• To activate responsive gutters in an existing project, set $grid-column-gutter to null, or remove the variable from your settings file entirely.
• Want to upgrade, but not into responsive gutters? Use this value:
  • $grid-column-responsive-gutter: ( small: 20px, );

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 $dropdownmenu-arrow-color: $anchor-color
• Added $accordionmenu-arrow-color: $anchor-color
• Added $drilldown-arrow-color: $anchor-color
• Changed $select-background: $white
• Removed $rem-base

Features

• Responsive gutters! Grid gutters are now responsive. On small screens, the gutter is 24px. On the large breakpoint and up, the gutter is 30px.
• Abide actually works! Our awesome community stepped up and helped us overhaul Abide, fixing many, many issues that shipped in 6.0. Thanks to @briantan888, @designerno1, @semikolon, @viniciusban, and others.
• Equalizer is way faster! We significantly refactored Equalizer to improve performance when the window is resized and better handle nested uses of the plugin.
  • Along with this, a new plugin option was added, equalizeOn. Pass in the name of a breakpoint to have Equalizer kick in on that specific breakpoint or wider.
  • And one more thing! The option equalizeByRow allows you to equalize columns within a row, even as they wrap into separate lines.
• Added mixins for flex grid row and column alignment.
  • flex-grid-row-align()
  • flex-grid-column-align()
• Added mixins for tabs, so you can write your own class structure with our styles.
  • tabs-container()
  • tabs-container-vertical()
  • tabs-title()
  • tabs-content()
  • tabs-content-vertical()
  • tabs-panel()
• The dist/ folder of the npm/Bower packages now include alternative compiled CSS file with the Flex Grid enabled, called foundation-flex.css and foundation-flex.min.css.
• Added the settings file back to the npm/Bower packages. We removed it at first because we didn't want developers trying to edit and import it directly. However, we added it back after some developers told us that it's useful to be able to copy the file out of the package. We also need it there to get our Rails gem working.
• Added a $gutter parameter to the grid-row() and flex-grid-row() mixins. In light of responsive gutters being added, when this parameter is null, the responsive gutter logic is used.
• Added features to the flex grid borrowed from the float grid: .expanded class, offsets, and responsive collapsing.
• The CSS for the flex grid was streamlined to use less @media blocks.
• As clever as quantity queries are, it turns out display: table-cell does the job just as well. The CSS for expanded buttons and button groups is now much slimmer. #7326
• Interchange will automatically initialize Foundation plugins inside of replaced HTML.
• Added a .destroy() method to off-canvas.

Bug Fixes

• Many fixes for Abide:
  • Validation failing with <input type="number">
  • Form not submitting even when valid
  • The Abide.validateForm() method doesn't fire an event
  • Hidden inputs are validated
  • Empty <textarea> elements are always marked invalid
  • Custom patterns can't be passed
  • Required email and password fields always marked invalid
• $dropdown-width is now properly applied to dropdown panes. #7353
• Prevent dropdown menus being misaligned by one pixel because of the border. #7514
• Fix incorrect styling for hollow button groups. #7571
• Removed the padding-top property from flex video, which was cropping the video inside on the left and right.
• A number of components had background properties changed to background-color, to make style overrides easier.
• Fixed a specificity issue causing -centered and -uncentered to fight with each other.
• $accordion-content-background is now properly applied to accordion content panes.
• Use overflow-x: auto instead of overflow-y: scroll with scrolling tables to fix cross-browser issues.
• Use $accordion-content-padding instead of $accordion-item-padding to accordion content panes. It just makes sense.
• Fixed more issues with JavaScript plugins not initializing when the code was run through a mangler.

Deprecations

• Removed hasvalue() in favor of has-value(), as announced in Foundation 6.0.4.
• Removed v-align-center() in favor of vertical-center(), as announced in Foundation 6.0.4.

Hyperion was the seventh moon of Saturn to be discovered, and also the first non-spherical moon to be discovered. The guy who named it, William Lassell, actually discovered the moon two days after William Bond, another astronomer. However, Lassell published his discovery before Bond, so his name won out.

Version 6.0.6 — Anthe

General

• We got a CDN going! The folks at jsDelivr made us a dedicated URL and everything! Head over to foundationcdn.com and you can get CSS and JavaScript CDN links. It's also possible to get links for individual JavaScript plugins.
• The way Normalize is exported has changed. Before, Normalize.css was automatically printed when calling @import 'foundation'. Now, Normalize is bundled with the foundation-global-styles() mixin. If you're using one of our project templates (or your project's main Sass file is configured similarly), you won't need to change anything to upgrade.
• Legacy support for Foundation 5 breakpoints has been added. If you're upgrading a project that uses $small-up, $medium-up and so on, those variables are now in the Foundation 6 codebase. They reference the values in the $breakpoints variable, which is how breakpoints are set in Foundation 6. Eventually, you should convert your Sass codebase to use the breakpoint() mixin over these variables, as they will be removed in version 6.2.
• CSS downloads of Foundation now include a version number at the top of foundation.css, as a handy reference.

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.

• Changed $button-margin to 0 0 $global-margin 0 from 0 $global-margin $global-margin 0.
• Changed $topbar-background to $light-gray from #eee.
• Changed $topbar-link-color to $primary-color from #fff.

That last one is critical, as a number of developers filed issues about links inside top bar being white.

Style Changes

• Button: removed the right margin on buttons.
• Callout: we removed the link tinting feature which gave green callouts green links, red callouts red links, and so on. The foreground/background contrast is way too low, and the CSS conflicts with other components that use <a>, such as buttons.

Bug Fixes

CSS

• Top Bar: give <input type="button"> elements in a top bar an automatic width, instead of the 200px width prescribed by .top-bar input. #7389
• Top Bar: switched link color from white to $primary-color.
• Media Object: removed the Sass & that snuck its way into the CSS output.
• Grid: fixed a misalignment issue when a column row is nested inside of a row.
• Input Group: fix border radii not being applied properly, specifically in conjunction with the $global-radius variable.

JavaScript

• General: if a plugin fails to initialize, the JavaScript error is caught, allowing other plugins to be initialized. #7356
• Drilldown: fix back button not working when custom markup is used. #7360
• Toggler: prevent certain config data attributes being overwritten on initialization.
• Reveal: prevent double overlays from appearing.
• Reveal: fixed the modal appearing below the overlay in iOS. #7415
• Dropdown: prevent the page from scrolling when the space bar is pressed while a form field inside the dropdown is focused. #7416
• Accordion Menu: prevent animation bugs if the menu is toggled up and down really fast. #7418
• Slider: prevent issues when the decimal option is 0. #7461
• Accordion: can now be used with any element, not just <ul> and <li>. #7469
• Responsive Menu: prevent a flash of un-styled content before the JavaScript has initialized.

v6.0.5...v6.0.6

Anthe is a small moon of Saturn, weighing in at a meager 5E12 kilograms. When I typed that number into Wolfram Alpha, I learned that this number is equal to half of all the gold in the ocean here on Earth.

Version 6.0.5 — Prometheus

Markup Changes

The following components saw HTML changes to fix bugs or improve accessibility.

Labels and badges should have unique IDs, and the elements they describe should have the attribute aria-describedby.

<h1 aria-describedby="messageCount">Unread Messages</h1>
<span class="badge" id="messageCount">1<span>

No update is required, but current uses of the label and badge are not fully accessible without these changes. Refer to the documentation for label and badge to learn more.

Buttons in input groups require a wrapper. This fixes issues with <button> and <input> elements not working within input groups.

<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number">
-  <input type="submit" class="input-group-button button" value="Submit">
+  <div class="input-group-button">
+    <input type="submit" class="button" value="Submit">
+  </div>
</div>

An update is required if you want to use <button> or <input>. If you're using <a>, the old structure will continue to work fine, but you should update anyway.

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.

Changed $block-grid-max from 6 to 8.
Changed $input-color from $dark-gray to $black
Added $grid-column-align-edge: true
Added Sass variables for Title Bar:

• $titlebar-background: $black
• $titlebar-color: $white
• $titlebar-padding: 0.5rem
• $titlebar-text-font-weight: bold
• $titlebar-icon-color: $white
• $titlebar-icon-color-hover: $medium-gray
• $titlebar-icon-spacing: 0.25rem

Package Changes

• The Bower package now references dist/foundation.js as the main JavaScript file.

New Features

• Links within dropdown menus can be configured to function as normal when tapped twice in a row on a touch device. This means, on a touch device, the first tap opens the sub-menu, while the second tap follows the link. To enable this feature, set the forceFollow option to true in your JavaScript, or the attribute data-force-follow="true" in a dropdown menu's HTML.
• Magellan can be configured with a custom offset to change where the "top" of the page is as the user scrolls. This is useful if your design has a sticky header, making the effective top of the page farther down. Change this setting with the barOffset/data-bar-offset option. The default value is 0.

Bug Fixes

• Drilldown: fixed links in sub-menus not working on touch devices. (#7207 & #7099)
• Drilldown: fixed menus sometimes being hidden due to an incorrect height calculation. (#7339)
• Drilldown: fixed issue where the plugin removed href attributes from anchors, but didn't reapply them if the plugin was destroyed.
• Tabs: new tabs can be added to a plugin after initialization and still function properly. (#7181)
• Orbit: added a proper fallback if Motion UI is not available or unsupported
• Top Bar: fixed the $topbar-link-color variable not being applied
• Grid: fixed the grid-column-end() mixin's CSS not being applied due to a specificity issue. (#7323)
• Grid: fixed the grid-context() mixin not resetting the value of $grid-column-count. (#7330)
• Grid: fixed the grid-column() mixin not working when passed an x of y value. (#7265)
• Reveal: when a modal closes, focus will now properly shift back to the anchor that opened the modal (#7341)

Prometheus is a shepherd moon of Saturn. A shepherd moon is a satellite that sculpts and shapes the rings of a planet with its gravity. It's like a... hair stylist for planets. A ring stylist.

Version 6.0.4 — Tarvis

Breaking Changes

Yes, there are a few. We're going to abuse semver a little bit at the beginning here while we massage the Sass API.

• Renamed Sass function hasvalue() to has-value(). The old function name will be removed in Foundation 6.1.
• Removed Sass function v-align-center() in favor of vertical-center()—see below. v-align-center() will be removed in Foundation 6.1.

Sass Settings Changes

The following changes were made to _settings.scss. All new projects will get these changes automatically.

• Removed $text-direction, which was a duplicate of $global-text-direction.
• Removed $global-namespace, which is non-functioning.
• Added $offcanvas-fixed-reveal: true.
• Added $dropdownmenu-border: 1px solid $medium-gray.

New Features

• Okay, it's not new new, but support for data-options as a way to pass parameters to JavaScript plugins is back.
• If an off-canvas menu is revealed on a larger screen, you have the choice to make the menu fixed position or not. This is handled by a new Sass variable, $offcanvas-fixed-reveal. The feature is enabled by default.
• We added a few new mixins for vertically and horizontally centering items in CSS. They use the position: absolute; plus transform: translate(-50%, -50%); trick we all know and love.
  • vertical-center() will vertically align an element.
  • horizontal-center() will horizontally align an element.
  • absolute-center() will vertically and horizontally align an element.
  • These functions replace the old vertical-center() and v-align-center() mixins, which did something similar, but were somewhat confusingly named.

Thanks to @hugogiraudel for sharing his positioning mixins with us!

Bug Fixes

• Added !default flags to components missing them.
• Dropdown menus were refactored to better handle click and hover states, and function much faster overall.
• Fixed pagination arrows not appearing on next/previous links.
• Fixed drilldown menus not working with RTL pages.
• Fixed z-index issues with revealed off-canvas menus, which prevented anything inside the menu from being clicked on.

We also pulled in many, many pull requests that refine our documentation. Thanks again to the community for fixing our typos for us :)

Tarvis is a moon of Saturn, part of the Gallic group of natural satellites. The moon is named after Tarvos Trigaranus, a figure in Celtic mythology depicted as a bull with three cranes sitting on its back.

Version 6.0.3 — Erriapus

Fixed an urgent issue with hover dropdowns not working in some instances.

Erriapus is a moon of Saturn. One theory of its creation is that it's actually a fragment of another moon of Saturn, Albiorix. You may better know Albiorix as Foundation 6.0.1.

Version 6.0.2 — Bebhionn

• Cleaned up the contents of the npm and Bower packages so they have less files.
• Added !default flags to Sass variables missing them. This prevented some settings variables from being modified. These components were fixed:
  • Breadcrumbs
  • Base typography
  • Pagination
• Added a Sass variable, $block-grid-max, to change how many block grid CSS classes are created. This allows you to go higher than six-up with block grids.
• Fix dropdown menus not working with touch devices if clickOpen="false".
• Removed an unneeded JS file, motion-ui.js, which was the same as foundation.util.motion.js.
• Fixed the .end class not properly floating columns to the left.
• Fixed the last element in a block grid not properly floating to the left.
• Orbit adds the .is-active class to the first slide if it's not already there.
• Fixed an issue with hover dropdowns when clicked on.
• Fixed a Sass compile error when $breakpoint-classes contains every breakpoint in $breakpoint.

Bebhionn is a teeny-tiny moon of Saturn. The satellite, discovered in 2005, is named after Bébinn, the Irish goddess of birth, so that's terrifying.