foundation 框架_Foundation 6 – 10惊人的新功能

在Bootstrap团队致力于他们令人印象深刻的新主要发行版时, Foundation前端框架的开发者们并没有为他们所接受。 去年,他们进行了一次很棒的世界巡回演唱 ,与用户分享他们的知识,并询问他们在现实生活中如何使用Foundation。

回到办公桌后,他们汇总了用户的需求和愿望,并着手计划框架的新的主要版本:Foundation 6。

它仍在开发中,但是计划是非常有希望的。 即将发布的功能集中在3个主要领域: 性能,可定制性和可访问性 。 现在让我们看看其中的10个功能。

1.简化的工作流程

根据用户的经验,基金会团队为基金会6开发了一个新的口号,即“从原型到生产” 。这意味着新的,简化的工作流程将使设计人员和开发人员可以直接从原型到生产

原型生产

新的Foundation 6的目标是提供一个灵活且易于自定义的框架,使从一开始编写干净的语义代码成为可能。 当前版本的Foundation 5还允许快速原型制作,但是我们期望在即将发布的版本中进一步优化工作流程

2.简化了Sass版本的设置过程

Foundation框架最令人敬畏的事情之一是它是使用Sass样式表语言构建的,因此可以根据我们的实际需求快速自定义默认样式规则

Sass版本的基金会

不过,Sass的设置过程对于许多用户来说有点吓人,因此新的主要发行版将简化Sass版本的设置过程 。 这意味着Sass设置将比以前需要更少的依赖项 。 当然,如果您喜欢原始CSS版本,仍然可以选择。

3.面向极简主义者的全新,精巧的设置堆栈

除了常规的Sass版本,Foundation 6还提供了增强的Sass版本,它将为开发人员提供强大的自定义选项

Zurb内部发展

因此,基本上,我们将可以在ZURB内部使用的同一开发环境中工作。

4.减少页面加载时间

Foundation团队不得不面对一些建设性的批评 ,这些批评声称在大多数Foundation项目中,约有90%CSS代码未使用。 这不仅适用于Foundation,而且适用于其他主要CSS框架,例如BootstrapTopCoat

作为答复的一部分,Zurb决定通过减少大约40-50%的代码来显着减少输出CSS的文件大小。

减少页面加载时间

有趣的是,他们试图通过指出Foundation不是一个框架将具有样式类的margin和padding或round和radius ”来区别于Bootstrap。 (仅供参考请参阅引导4的新的实用工具类我们以前的文章 )。

5.基本样式充当线框

性能改进工作的另一部分是创建充当线框而不是最终设计的基本样式 。 这主要是导致主题变浅,但还有另一个很大的优势。

随着更多的样式规则将移至各个组件中,开发人员将有机会更轻松地设计其样式

基本样式为线框

希望这意味着基于Foundation的网站将不再具有相似的,标准化的外观 ,而设计师将有更多的空间来体验美丽而独特的解决方案 ,从而驳斥了近期对无聊的网络的担忧

6.促进选择性进口

Foundation 5允许开发人员仅选择他们要使用的组件。 Foundation 6将把选择性导入功能移到_settings.scss Sass文件中,从而将这一工作提升到了一个新的高度

便利的选择性进口

这样_settings.scss将成为真正的通用配置文件 ,因为我们不仅能够借助其自定义行宽或默认字体等功能,而且还可以轻松退出我们不需要的组件 。 如果这样做,我们可以进一步提高性能。

7.贫民廉洁

在重新设计的过程中,基金会团队重新考虑了框架的各个方面,因此他们还改变了使用Sass样式表语言的方式

他们发现在某些情况下,他们过度使用了Sass,从而导致CSS输出不必要的过度复杂化 。 出于精简代码库的目标,他们也使Sass结构合理化。

成分混合

在Foundation 6中,我们可以期望减少嵌套和专用性,简化媒体查询 (它们合并了重复代码),并缩小组件混合 。 后者意味着将有较少的组件混合,而其余的将具有较少的参数,这将导致更简单,更逻辑的代码

如果您喜欢mixin,请放心,每个组件都将包含它们,只是它们将被重新设计以使其比当前更有效和有用。

8.改进的网格混合

在减少组件混合时,Foundation 6将带有增强的网格混合 ,这将使我们能够创建更加定制的网格

改进的网格混合

Zurb承诺,我们将能够轻松构建所需的复杂网格系统 ,包括更复杂的自定义行嵌套网格 ,以及将默认类转换为语义标记的能力。 改进的网格混合功能将使当前的网格创建更加直观,灵活和快捷

9.无缝集成自定义JavaScript插件

Foundation 5当前具有许多JavaScript组件,例如很酷的模态对话框,工具提示,粘性导航栏,灯箱,以及现代网站需要的许多其他组件,但是即将发布的主要版本将使我们能够利用Foundation核心编写自定义JavaScript插件 。 。 在用户友好性和性能上都迈出了巨大的一步。

基金会的清除插件

将来,我们将能够访问内置的初始化方法切换触发器断点 ,并利用Foundation全局JavaScript的所有其他功能。

10.完全可访问性

新Foundation 6的最令人惊讶的功能可能是完全可以访问 。 每个组件和代码片段都将带有适当的WAI-ARIA属性和标志性角色。 此外,开发人员甚至将获得有关如何使用a11y Web标准 的用户指南

完全可访问性

因此,如果我们想为客户提供一个完全可访问的网站,除了使用Foundation 6构建设计外,我们不需要做任何其他事情。请注意,我们仍然需要在我们HTML页面上添加适当的ARIA规则。自己虽然Zurb的到来A11Y用户指南,必将促进学习的过程。


翻译自: https://www.hongkiat.com/blog/foundation-6/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值