Foundation 6.0.5 发布,Web 的 UI 框架

编辑: oschina
2015-12-04 00:00:00

Foundation 6.0.5 发布,更新如下:

Markup 更新

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 设置更新

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 or $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 更新

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


  • 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 修复

  • 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)


Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。

16 收藏
3 评论
16 收藏