十大前端开发框架(下)

在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Bootstrap已经审美疲劳了,那么请深吸一口气,接下来将带给你一些其他口味的框架。让我们先从Bootstrap最有力的竞争者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就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。

 

6. GroundworkCSS

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

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

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

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

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

 

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

 

8. HTML KickStart

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

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

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

 

9. IVORY

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

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

 

10.Kube

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

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

 

总结

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

10 收藏 评论

关于作者:厉瑶

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

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部