Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Foundation for Sites
Webdesign

Foundation 6.3: 最新更新以及2017年展望

by
Length:MediumLanguages:

Chinese (Simplified) (中文(简体)) translation by 4EB Studio (you can also view the original English article)

ZURB和Foundation开发社区的伙伴们一直在加紧工作,发布了Foundation网站版本的一次重大更新。让我们深入其中,看看发生了什么,并且问问项目团队未来的发展。

有哪些更新?

Foundation 6.3版本为整体框架带来了一些实实在在的变化,同时保持了其一贯的好用性。

UI Cards

卡片式设计作为网页设计的一种模式,越来越得到广泛的应用。它们是展示用户精简类信息非常好的方式,并且能够很好的在响应式网站中工作。不仅如此,只要你使用得当,它们也是非常直观的表现形式。

经常有人讨论是否要在Foundation中放入卡片功能:对于一个响应式框架你是否需要这样一个组件?抑或是你是否应该使用你自己的工具创建你自己的卡片模式? 对我来说Foundation是一个快速的原型工具,卡片的加入意味着我能更加快速的进行原型开发。即使在正式制作中,这些卡片也是非常受欢迎的补充力量。

Flexbox Helpers

Flexbox非常伟大,因为它允许我们在设计中使用更加灵活的布局(你已经猜到了!)。 Felxbox旨在提供更加有效的方式对页面中的条目进行布局及分配空间,即使(这也是最伟大的部分)这些条目的大小是动态的或者未知的。

Foundation 6.3 提供了我们帮助工具让Flexbox更加容易理解并且更加容易创建原型。例如,浮动和清理被砍掉了,替代它们的就是使用Flexbox Helpers。

“Flexbox是当今网页设计一个重要的部分,我们希望继续保持它的领先地位。“ - Kevin, Foundation社区负责人

全新的Off-Canvas

有些人会说这个来的太迟了,但是,它最终还是来了。Off-Canvas 元素已经被从写了并且非常棒。你甚至不需要改变任何标记,因为它具有向后兼容的功能。

全新的Off-Canvas标记甚至更加简单。我们现在可以使用Off-Canvas作为遮罩以及从顶部或者底部打开,而不是只将内容推开。即使现在用起来更加驾轻就熟,但还是请务必查看一下Foundation网站版本的Off-Canvas文档

从手风琴效果(Accordion)到标签页(Tabs):响应式魔法

曾经在大屏幕上使用的标签页在移动设备上是不是看上去一团糟?现在不会了! 使用“响应式手风琴效果到标签页”功能,你可以根据你的屏幕大小进行UI界面切换,并且为移动用户提供更好的用户体验。这个功能很容易执行并且受益多多!

垂直规律(Vertical Rhythm)到跳动舞步

使用垂直规律(Vertical Rhythm)进行文字排版会极大地改善你的网站的外观和感觉。Foundation一直让我们很容易的操控不同大小的标题和正文文本,但是随着Foundation 6.3的更新,字体大小,行高以及空白边的设置都可以在一个单个设置中访问。 让易用性最大化。

观察,观察.. 变动观察器

有时候小任务可能变得乏味,但是当那些更新来的时候会使这种痛苦消失。 这就是全新的变动观察器(Mutation Observers)的工作原理,它在幕后工作,并自动检测DOM更改并触发组件中的更新。 这可以节省你不得不做的手动重排元素来触发更改,如显示弹出框,顶部工具栏(sticky bars),均衡(equalizer)等。非常棒。

标签页(Tabs)的深层链接

深层链接在引导你的用户到正确的位置上扮演着重要的角色,特别是在电子商务网站以及移动app中尤为重要。使用Foundation 6.3,你可以轻松地将用户引导到已放置在标签中的特定内容,从而自己使用深层链接。

打印样式

在Foundation发布这次更新之前,你不得不为网页自定义设置打印样式表。Foundation只能显示移动屏幕,而其他的框架甚至连这个都做不到,这就意味着你必须自力更生。

那些苦逼的日子已经一去不复返了,这都要感谢Foundation 6.3的到来,因为你现在可以指定你需要的打印页的断点,Foundation会自动设定其他的点。非常好。

ZURB: 采访

我们想要一些关于框架如何达到当前地位的内部信息。我们还问了2017年我们可以期望Foundation做些什么?这是ZURB团队不得不说的:

2016年战胜的最大挑战是什么?

应该是浏览器如何处理某些CSS选择器和我们网格系统。它们现在都能很好地工作,但是对于匹配先进的浏览器还是花费了一些时间。

我们的CSS网格系统需要(过去和现在)变得更加功能丰富,并且成为Foundation的核心组件。 我们需要看看它的核心价值能提供什么,以及它如何让任何使用我们框架的人都能受益。

你期望2017完成什么?

我们正在进行的一项工作,也是我们将非常确认能够在2017年完成的是为Foundation从写我们的JavaScript。我们将更多地利用先进工具,并使我们的用户更容易地接入自定义组件。

还有一件事就是从写菜单组件。它们已经非常强大,但是,一旦你将它们用在规范之外,它们还是有些脆弱。 我们将努力让它达到你可以自定义的程度,但它还是要依你的项目本身而定。

2017年主要的优先任务是什么?

我们将着眼于框架的易用性,比如建立区块的重复使用以及Foundation更强的扩展性,以便用户可以添加自己的twist进来。使其更易扩展,允许更加丰富的组件以及可重复利用的区块可以让原型使用更加快速和干净。

2017年会有哪些新的事情?

我们想做更多在SVG上,毕竟它在响应式网页设计中一直扮演着重要的角色。我们想看看我们能够针对不同情况和屏幕大小,执行和操控SVG到什么程度。 我们将要关注的一件事是使用Foundation网站版本制作和整合SVG到你的项目中去的更简单的方式。

你会担心Foundation变得过于臃肿吗?

这是我们一直关注的。一方面,更多组件可以帮助我们快速创作原型和开发。另一方面,更多的组件就意味着无用的代码,让很瘦的项目变的臃肿。 我们正在优化如何进行整合并且让你可以为你的项目选择指定的组件。我们密切关注的一件事就是保持核心程序的紧凑和坚固。

Motion UI 如何发展?

这个问题问得很好!我们真的很忙,现在也该是时候从写让它变的更易用了。我们还将深入了解如何使用你自己的动画到Motion UI中去。

目前缺少的一件事是全面和有用的文档。 我们想这也许就是人们为什么没有像我们预期中那样使用它,虽然Motion UI本身已经是一个非常强大的库了。我们会在我们的博客和订阅邮件上发布它的进展。

“Motion UI已经非常强大,但是我们需要改进文档说明让用户更易使用和执行。” - afi, Foundation倡导者

Flexbox是Foundation的未来吗?

我们热爱Flexbox,它确实是一个大步向前迈进的灵活和动态组件。随着我们一直向前推进Foundation网站版本,我们也将继续朝着未来迈进,Flexbox在其中发挥了巨大的作用。 我们将继续使用flex属性集成越来越多的组件,并为所有组件使用flex模式。

总结

很好,你已经拥有它了,一个变的越来越好的伟大框架。 随着Foundation 6.3和Motion UI的到来,我们作为开发者和使用者将能够比以往更快速的开发原型和启动项目。这是Foundation5周年最好的礼物,恭喜恭喜!

“我要给我们开发人员社区的贡献者们一份巨大的公开致谢,你们不断的改进着Foundation每一次更新。多谢你们!“ – Kevin, Foundation社区负责人

相关阅读

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.