Skip to content

Version 6.1 — Hyperion
Compare
Choose a tag to compare
@gakimball gakimball released this 23 Dec 01:22
· 6296 commits to develop since this release
v6.1.0
fdd38a9

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.

image

Assets 2