搜索
首页web前端css教程Foundation 6中的新功能是什么?

>基础6:简化的CSS框架,用于更快,更高效的Web开发

从头开始构建

可以完全控制,但有时框架加速了开发。 Foundation是与Bootstrap一起的长期竞争者,刚刚发布了其第六次迭代,速度,效率和易用性有了显着提高。本文探讨了基础6中的关键增强功能。

What's New in Foundation 6?

密钥改进:

  • 降低的大小和增强的模块化:基础6急剧缩小其大小(比基础5小50%以上),通过组件模块化,降低CSS特异性以及简化的SASS变量和Mixins实现。 这转化为更快的加载时间和减少的膨胀。
  • 运动UI集成:此可选库添加了可自定义的动画和过渡,通过Sass Mixins提高用户参与度以及网站交互性。
  • YETI启动工具(仅MACOS):>此伴随应用程序简化了项目设置,支持Web和应用程序开发,并集成了UNCS和UGLIFYJ(例如UNCSS和UGLIFYJS)。 计划了Windows支持。
  • 值得注意的代码协作:
  • 该平台通过安全的在线项目访问和交互式注释有助于团队协作。
  • >可访问性增强:
  • 基础6优先考虑可访问性,确保所有组件的键盘和屏幕读取器兼容性,并具有全面的ARIA启用文档。
  • >>精致的响应式断点:
  • 更新的断点和实用程序提供了对响应式设计的更精确控制,并增强了与媒体查询的交互。
  • 开发人员有什么新功能?

基础6不仅是增量更新;这是一个完整的大修。 Zurb从头开始重建了框架,并结合了浏览器技术中的社区反馈和利用进步。 重点是提供可靠的,可自定义的基础结构。 >新功能包括Flex网格,Motion UI,Yeti启动以及更新的构建块和模板。 现有组件已精简以提高性能和易用性。

>

优化亮点:

显着尺寸降低(CSS:160KB至68KB,JavaScript:110KB至92KB)从以下
  1. 模块化组件:较大的组件被分解为较小,更易于管理的模块。
  2. 降低的特异性:较少的嵌套选择器和样式可以更轻松地自定义。>
  3. 简化的sass:更少的变量和混合物提供了一个更清洁,更集中的框架。
  4. >通用JavaScript实用程序:组件共享共同实用程序,最小化冗余。

运动UI:将寿命添加到您的设计 以前是应用程序基础的一部分, Motion UI现在是可选的,但强烈建议添加。 它提供了预建的过渡和动画,可以轻松地使用CSS类或使用Sass Mixins进行自定义。 一个小的JavaScript插件有助于动态触发和事件处理。

What's New in Foundation 6?

YETI启动:简化的项目设置

> >雪人发布简化了建立新的基础项目的过程。它提供了标准的Sass动力设置和Zurb的开发堆栈(包括UNCS,UGLIFYJS,图像压缩和静态站点生成器)之间的选择。 当前仅MacOS。

What's New in Foundation 6?

值得注意的代码:增强协作

值得注意的代码允许开发人员在线共享项目,使团队成员能够通过注释提供反馈和跨不同屏幕尺寸的响应测试。

What's New in Foundation 6?

可访问性:核心焦点

> 基础6优先考虑可访问性,确保所有组件都是键盘和屏幕阅读器友好的。 该文档提供了全面的ARIA指导。

>模板和构建块:现成的组件

> >更新的模板和构建块为新项目提供了一个启动,提供了完全响应的设计和可自定义的组件。

What's New in Foundation 6? >新的JavaScript实用程序

基础6揭露了几个有用的JavaScript实用程序,包括:

>媒体查询实用程序:

简化了与响应式断点的互动。
  • > 计时器和图像加载实用程序:提供了对计时器和图像加载事件的控制。
  • 触摸实用程序:很容易在元素中添加触摸互动。
  • 轨道滑块已经简化,重点是轻巧,可定制的核心,而不是广泛的预构建功能。

    What's New in Foundation 6?

    更新的响应式断点:

    基础6通过修订后的Sass Mixin简化了断点管理,使样式井井有条和直观。 自定义断点大小在_settings.scss>文件中很容易定义。

    >

    设计自由:

    基础6的减少样式为独特的设计提供了更灵活的基础,使开发人员能够创建不同的网站。

    结论: 基础6代表了一个重大进步,为Web开发提供了简化,高效且可自定义的框架。 尽管某些功能已简化,但性能和易用性的总体改进使其成为为其项目寻求坚实基础的开发人员而言,这是一个令人信服的选择。 将来的文章将介绍有关网格和菜单的更多细节。>

    >常见问题(缩写):

    > >

    新功能:
      flexbox网格,改进的版式,简化的代码库,运动UI,YETI启动,著名的代码,增强的可访问性。 与以前的版本进行比较
    • 较小,更快,更模块化,更易于自定义。
    • >
    • >入门:>从官方网站下载,使用组件和功能,探索在线教程。
    • 好处:更快的加载时间,灵活性,易用性,可访问性。
    • 移动开发:是的,响应式设计。
    • >
    • 支持:大型社区,在线教程和指南。
    • 许可:开源并免费使用。
    • >
    • 这一修订后的响应可维护原始信息,同时改善清晰度,流动和组织。 它还使用更多简洁的语言并简化了常见问题部分。>

以上是Foundation 6中的新功能是什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
@KeyFrames vs CSS过渡:有什么区别?@KeyFrames vs CSS过渡:有什么区别?May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用页面CMS进行静态站点内容管理使用页面CMS进行静态站点内容管理May 13, 2025 am 09:24 AM

我知道,我知道:有大量的内容管理系统选项可用,而我进行了几个测试,但实际上没有一个是一个,y'知道吗?怪异的定价模型,艰难的自定义,有些甚至最终成为整个&

链接HTML中CSS文件的最终指南链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接,如。4)确保正确使用文件路径和CSS文件加载顺序,优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格:全面评论CSS Flexbox与网格:全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求:1)Flexbox适用于一维布局,如导航栏;2)Grid适合二维布局,如杂志式布局。两者在项目中可结合使用,提升布局效果。

如何包括CSS文件:方法和最佳实践如何包括CSS文件:方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件,如。2.对于小型调整,可以使用内联CSS,但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less,通过@import导入其他CSS文件。4.为了性能,应合并CSS文件并使用CDN,同时使用工具如CSSNano进行压缩。

Flexbox vs Grid:我应该学习两者吗?Flexbox vs Grid:我应该学习两者吗?May 10, 2025 am 12:01 AM

是的,youshouldlearnbothflexboxandgrid.1)flexboxisidealforone-demensional,flexiblelayoutslikenavigationmenus.2)gridexcelstcelsintwo-dimensional,confffferDesignssignssuchasmagagazineLayouts.3)blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学(或我如何优化CSS KeyFrames动画)轨道力学(或我如何优化CSS KeyFrames动画)May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的?约翰·瑞亚(John Rhea)挑选了他写的一个旧的CSS动画,并介绍了优化它的思维过程。

CSS动画:很难创建它们吗?CSS动画:很难创建它们吗?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器