发布于 2015-12-04 00:49:00 | 213 次阅读 | 评论: 0 | 来源: 网友投递
Foundation WEB前端UI框架
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。
Foundation 6.0.5 发布,更新如下:
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.
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
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
.
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)
下载页面:6.0.5
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。