WEB前端框架-Foundation之入门篇-Web前端之家

对于很多传统Web开发,每次从零开始开发一个工程项目都是必经之路;当每个工程项目都是不一样的时候,去创建一个可重用的代码库却是一件非常棘手
的事情。许多有经验开发者可能更愿意花时间去创建一些前端框架,然而这却又是一件巨大的任务,更不用谈维持最新的框架及最佳实践。眼看每个程序员的需求,明显地,开发者是非常需要那些开源的、稳定的、可扩展性的和有齐全的文档说明的代码。关系到工程的大小,一个
CSS网格系统可能已经满足,如果你有选择地添加或者删除函数方法去满足你的需求岂不是更好吗?在本章中,我们将学习一个叫Foundation可自定义的前端框架。

本文由 伯乐在线 –
厉瑶
翻译。未经许可,禁止转载!
英文出处:Site
Point。欢迎加入翻译组。

如果想创建一个类似Foundation的框架,需要在细节上正确地处理。因此接下来几周时间,我将会全方面地介绍涵盖“入门”、“定制构建”等专
题,讲解这个特殊的框架的方方面面。更重要的是,我将举一些例子来说明Foundation前端框架怎样能够更好地满足、适应你将来开发的web开发。

在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Bootstrap已经审美疲劳了,那么请深吸一口气,接下来将带给你一些其他口味的框架。让我们先从Bootstrap最有力的竞争者Foundation说起。

Foundation是什么?

 

Foundation由很多针对于响应式开发、非常有用的工具组成,以移动终端优先的一个前端开发框架。基于HTML,CSS和jQuery创
建,Foundation运用上现代前端技术与最佳实践,但也只能优雅降级到IE8。虽然这是HTML和CSS开发者最常用的框架,但是你还是有选择地使
用与Sass和Rails配合使用的Foundation来做一些更加深入、有趣的事情。

5. Foundation

Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。

Foundation拥有一套12列的灵活可嵌套的网格系统,你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式,比如字体排版,按钮,表单,以及多种多样的导航控件。它也提供了很多的CSS组件,例如操作面板(panels),价格表(price
tables),进度条(progress
bars),表格(tables)以及可以适应不同设备的可伸缩视频(flex
video)。与此同时,Foundation还包括了很多的JavaScript插件,如下拉菜单(dropdowns),joyride(网站功能引导插件),magellan(网站固定导航插件),orbit(支持触摸的响应式图片轮播插件),reveal(弹出框插件),sections(强大的tab插件)以及tooltips(工具提示)等。

Foundation框架还提供了很多有用的扩展。

  • 模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle
    stencils以及矢量PDF两种格式的下载,你可以用它们来方便快捷的绘制线框图和原型图。
  • HTML模板 ——
    HTML模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码,然后丢到页面的标签之间就好了。
  • 图标字体(Icon Fonts) —— 包含自定义图标的一种网页字体。
  • SVG 社交网络图标(Social Icons)——
    一组不依赖分辨率的社交网络图标(可缩放矢量图标)。
  • 响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列,然后表格的其他列可以通过滚动条拖拉进行访问。
  • 关闭帆布布局(Off-Canvas Layouts)——
    这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏,当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候,网页内容或者导航控件将会滑动出现。

如你所见,对于web开发者以及设计师来说,Foundation就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。

 

开发Foundation的公司叫ZURB,已
经为开发者和设计者创建了一套高效率的工具集。每个模块作为整体框架的一部分,都有其作用,但同时也可以独立完整地运行。换句话说就是,你可以在工程中混
合和配合这些模块特点,或者作为一个单一功能添加到以前的工程当中。你还可以把她当作一个功能插件添加到另外一个框架当中。

6. GroundworkCSS

GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

GroundworkCSS拥有一个灵活,可嵌套的流式网格系统,方便你创建任何布局。这个框架有很多让人印象深刻的功能,比如在平板以及移动端上的网格系统,当屏幕的宽度小于768或者480像素时,页面中原本并列排版的表格列(grid
column)会自动变为独立的行,而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本(ResponsiveText)插件,这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。

GroundworkCSS包含了大量的UI组件,如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles(一套替代radio按钮以及其他默认表单元素的优雅组件)、工具提示、对话框、Cycle2(一款强大的,响应式的内容滑块)以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。

你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式,你可以测试在不同的浏览设备上各种组件的响应式布局情况。

GroundworkCSS的文档写的非常好,并且包含着很多的示例,为了让你更快的上手,他还提供了多种响应式的模板。对于这款框架,唯一我可以想到的缺点就是不能自定义要下载的框架内容。

 

新澳门萄京娱乐场官网,总的来说,这是一个时下流行的框架适用于大部分开发者。Foundation提供一系列好的功能集合,并且完全是免费的,还有不断地发展壮大的社区,可以帮助你解决学习过程中遇到的问题。

7. Gumby

Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。

它的流式-固定布局(fluid-fixed
layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。

Gumby提供了一个功能丰富的UI工具包,包括按钮,表单,移动端导航,tabs,跳转链接(skip
links),拨动开关(toggles and
switches,可以方便快捷地切换元素的class,而不需要进行额外的js操作),抽屉功能(drawers),响应式图片以及retina图片等等。为了紧跟最近的设计潮流,Gumby的UI元素中还包括了Metro风格的扁平化设计,你也可以用Pretty风格的渐变设计,或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式,拥有独立分辨率的Entypo图标,你可以在自己的web项目中尽情使用。

Gumby有一个很好自定义下载选择器,你可以自行配置各个组件的颜色,并且按自己的需求方便地下载。

 

为什么你要使用Foundation?

8. HTML KickStart

HTML
Kickstart 是一款可以用来方便创建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。

这款框架提供了多种样式表,包括网格,排版,表单,按钮,表格,列表以及一些跨浏览器兼容的web组件比如JavaScript的幻灯片功能,tabs,面包屑导航,包含子菜单的菜单以及工具提示等等。

你可以使用99Lime
UIKIT提供的UI组件来搭建你的产品线框图。

 

现在有很多开发者都普遍地利用框架,这些框架在创造者手中已经变得臃肿,因为试图覆盖在一个特定环境中的每一个事件。一旦像一个简洁、轻量工具开始工作,可以增长为成百上千的http请求和就好比一个解散的合唱团一样,这都取决于你的需求。

9. IVORY

IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

当你需要一款轻量灵活,不需要额外的其他功能,并且适应不同浏览设备的框架时,IVORY是你最好的选择。

 

Foundation包含一系列的方法与特性。在以百分比为基础的流体网格系统上创建的,使用以jQuery封装好的滑动条,一个lightbox
插件,还有HTML元素,而且这一切都是基于为移动终端为先的准测。你完全可以创建自定义、使用jQuery插件来增强input元素某些效果的
form,下拉菜单和多选按钮,这也意味着你很容易地添加自定义样式。同时,这框架让你选择性地通过使用移动终端网格布局、添加灵活性来设置自定义移动终
端布局,以致真正地使自己工程项目在移动终端和电脑上实现响应式。

10.Kube

最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。

Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局,还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希望得到Kube最大化的灵活性以及个性化定制,那么你可以下载开发者版本(developer
version),这个版本包括了LESS文件(包括各种变量,mixins以及模块)。

 

Zurb团队在版本4中重新编写很多很多的核心函数方法来适应相当广泛地使用案例。代码保持精简和相应的地方有必须的注释。可以直接地添加、删除或者裁剪相应地函数来适应你的需求。

总结

我希望看过本文之后,当你为新项目选择框架时,能够对各种各样的框架有更好的认识。在文章中,我尝试着列出了我所知道的目前应用最广泛,功能最全面,结构最优的一些前端开发框架。不过如你所知,大千世界,瞬息万变,因此,如果你知道本文中没有列出的其他的优秀开发框架,欢迎你在评论中与我们分享,这样会使本文更加有帮助,谢谢。

赞 10 收藏
评论

用户正在使用地版本3也是可以从一个迁移文档来更新安装,或者,如果他们愿意的话,还可以继续使用版本3而不用跳到版本4。

关于作者:厉瑶

新澳门萄京娱乐场官网 1

有理想有自我价值实现感的前端程序媛,坐标杭州,专注于前端开发,立志成为优秀前端工程师,个人博客(新浪微博:@玉面小飞鱼)

个人主页 ·
我的文章 ·
2

下载一个自定义的Foundation

Zurb官网上有一个网页是允许你预先选填自定义的功能、样式来满足自己的需求即可,然后再把此Foundation导出下载到本地上使用。例如,你只是需要一个CSS网格布局,好,那你只是需要去掉勾选everything
except
“grid”的按钮,然后填入你的其他工程,如标签和按钮,之后就可以得到你想要的了。再或者,你不管三七二十一,全选所有提供的功能、样式,然后只需要点击一下按钮就可以使用了。框架还允许自定义默认的CSS颜色甚至一些关键宽度值,如最大宽度。

尽管这是非常方便的,但它依然是一种形式,而且我觉得还有可以改进的地方。理想地,我希望看到可能是一些可视化的HTML样板的过程。同时,版本4使用em作为长度单位并且em是font-size主单位它会看起来很直观,包括像素到em计算器,只是使得放缩更加容易而已。

点击

到目前为止,我们了解到Foundation所提供的关键特点与各方面便利之处,并且学习了如果下载自定义的Foundation,你现在已经有了一个下载好的Foundation,那么开始尝试更多学习与使用它,如果你在此过程中遇到困难,别担心,你可以在文档这里找到大部分的答案,再不行就可以在此文章下面评论提出问题。

在下一篇我们将开始讲解“WEB前端框架-Foundation之网格系统”,主要讲导航栏、选项卡、按钮和一些关键UI元素。我们还会讲当你使用Foundation作为你的工程框架时,增强你自己开发的有用工具。敬请期待吧!

发表评论

电子邮件地址不会被公开。 必填项已用*标注