HTML5开发工具

当前位置: HTML5技术网 > HTML5开发工具 > 细数2014年5个最流行的前端框架

细数2014年5个最流行的前端框架

原文  http://www.uisdc.com/2014-5-popular-frontend-frameworks


       @寸志 :现如今快要被各种各样的 CSS 前端框架给淹没了,真做的不错的其实也就那么几个。本文将对比五个我认为是现在最好的框架。这些框架每一个都有自己的优缺点和适用的应用类型, 你需要根据自己的需要来选择不同的框架。


       例如,如果你的项目简单,就不需要使用一个复杂的框架。又或者,很多框架都是模块化的,你可以只是用你需要的模块,或者把不同框架的模块混到一起使用。


       跟上潮流,来个响应式网站: 《重磅来袭!设计师不应该错过的响应式设计框架》


       我将要介绍的这些框架的顺序与它们在 GitHub 的流行程度有关。自然,就是从最流行的 Bootstrap 说起。


       提示:在接下的几周或者几个月内,下面的一些信息很可能会过时。比如 GitHub 上的 star 数、版本号等等。如果你在文章发布很久之后来读本文的话,一定别忘了这一点。还有,下面这些框架的大小指的是经过压缩的必要的 CSS 和 JavaScript 文件大小。


       Bootstrap


       Bootstrap 无疑地是目前这些类库的领跑者。它非常流行,流行程度还在一天天的增加。这个令人赞叹的工具集不会让你失望的,在你构建成功站点之路上少不了它。

  • 作者: Mark Otto 和 Jacob Thornton
  • 发布时间:2011年
  • 最新版本:3.3.
  • 流行程度:GitHub 上 75,000+ 的 star
  • 介绍:“Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架,可用来开响应式的移动有限的 Web 项目。”
  • 核心理念/原则:响应式 与移动优先
  • 框架大小:145 KB
  • 预处理器: Less 和 Sass
  • 响应式:是
  • 模块化:是
  • 上手模块/布局:是
  • 字体图标:大半 Glyphicon 图标
  • 插件/扩展: 无,不过有大量的第三方插件
  • 特色组件: 超大屏设计
  • 文档: 完善
  • 自定义: 基础的 GUI 自定义;不过你需要手动输入颜色值,因为不支持颜色选择器
  • 浏览器支持: Firefox、Chrome、Safari、IE8+ (IE8 的话需要使用 Respond.js )
  • 开源协议: MIT

       Bootstrap 使用心得
       Bootstrap 最大的优势就是它非常流行。从技术上讲,它并不是比其他在列框架要优秀。只是它有很多资源(文章、教程、第三方插件和扩展以及主题构造器等等),比起其他 四个框架合到一起还要多。简单地讲,Bootstrap 就是无处不在。这也是大家继续使用它的原因。
       提示:当我说“特色”的组件,这种特色就是针对目前列出的这些框架而言的。
       Foundation(ZURB)
       Foundation 是这个领域的第二大玩家。拥有像 ZURB 这样的公司在背后支持,不得不说它确实有一个非常坚实的基础。总之,Foundation 被很多大的网站采用。包括 Facebook、Mozilla、Ebay、Yahoo 以及 National Geographic 等等。

  • 作者: ZURB
  • 发布时间: 2011
  • 最新版本: 5.4.7
  • 流行程度: GitHub 上 18,000+ 的 star
  • 介绍: “世界上最先进的响应式前端框架”
  • 核心理念/原则: 响应式、移动优先、语义化
  • 框架大小: 326 KB
  • 预处理器: Sass
  • 响应式: 是
  • 模块化: 是
  • 上手模块/布局: 是
  • 字体图标: Foundation 字体图标
  • 插件/扩展: 有
  • 特色组件: Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
  • 文档: 完善,还有很多其他资源
  • 自定义: 无 GUI 的自定义工具,需要自己手动修改
  • 浏览器支持: Chrome、Firefox、Safari、IE9+;iOS、Android、Windows Phone 7+
  • 开源协议: MIT

       Foundation 使用心得


       Foundation 的确是一个非常专业的框架,有商业的支持、培训以及外包。它同时还提供很多资源,帮助你更加快速更加容易地学习和使用这个框架。


       Semantic UI


       Semantic UI 一直在努力让网站建设更加语义化。它利用了自然语言的原则,使得代码更容易读更容易理解。


  • 作者: Jack Lukic
  • 发布时间: 2013
  • 最新版本: 1.2.0
  • 流行程度: GitHub 上 12,900+ 的 star
  • 介绍:“一个 UI 模块框架,基于来自自然语言的一些有用的原则。”
  • 核心理念/原则: 语义化、tag ambivalence、响应式
  • 框架大小: 552 KB
  • 预处理器: Less
  • 响应式: 是
  • 模块化: 是
  • 上手模块/布局: 无
  • 字体图标: Font Awesome
  • 插件/扩展: 无
  • 特色组件: Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、Dimmer 
  • Rating、Shape
  • 文档: 非常好。Semantic 有组织良好的文档,外加一个 单独网站 提供指南,帮助用户快速上手,自定义和创建主题。
  • 自定义: 无 GUI 的自定义工具,需手动修改
  • 浏览器支持: Firefox、Chrome、Safari、IE10+ (IE9需要prefix支持)、Android 4、Blackberry 10
  • 开源协议: MIT

       Semantic UI 使用心得

 

       在这些框架中,Semantic 是最具革命性特性最全的框架。为了让样式逻辑清晰,语义化,整个框架的结构以及命名约定都要优于其他框架。


       Pure(Yahoo!)


       Pure 是一个轻量的、模块化的框架——使用纯 CSS 编写的——根据你的需要,可以组合或者分开使用 Pure 的模块。



  • 作者: Yahoo
  • 发布时间: 2013
  • 当前版本: 0.5.0
  • 流行程度: GitHub 上 9,900+ 的 star
  • 介绍: “一系列小的,响应式的 CSS 模块,可以用在你的每一个项目中。”
  • 核心理念/原则: SMACSS 、极简主义
  • 框架大小: 18 KB
  • 预处理器: 无
  • 响应式: 是
  • 模块化: 是
  • 上手模块/布局: 有
  • 字体图标: 无,你可以使用 Font Awesome
  • 插件/扩展: 无
  • 特色组件: 无
  • 文档: 好
  • 自定义: 基础的 GUI 皮肤构造工具
  • 浏览器支持: 最新的Firefox、Chrome、Safari; IE7+、iOS 6.x、7.x;Android 4.x
  • 开原协议: Yahoo! Inc. BSD


       Pure 使用心得


       Pure 只提供一套极简的样式,便于你从零开始你的项目。对于那些不需要一个全栈框架,只需要某些组件的加入到他们自己的项目中的用户来讲,这个框架非常符合。


       UIkit(YOOtheme)


       UIkit 包含了一些列简洁的易用的便于自定义的组件。尽管它没有其他在列的框架流行,但是它提供了相当的功能和质量。


  • 作者: YOOtheme
  • 发布时间: 2013
  • 当前版本: 2.13.1
  • 流行程度: GitHub 上 3,800+ 的 star
  • 介绍: “轻量的,模块化的前端框架,可用来快速构建强大的网页界面”
  • 核心理念/原则: 响应式、移动优先
  • 框架大小: 118 KB
  • 预处理器: Less、Sass
  • 响应式: 是
  • 模块化: 是
  • 上手模块/布局: 是
  • 字体图标: Font Awesome
  • 插件/扩展: 有
  • 特色组件: Article、Flex、Cover、HTML Editor
  • 文档: 好
  • 自定义: 高级的 GUI 自定义工具
  • 浏览器支持: Chrome, Firefox, Safari, IE9+
  • 开原协议: MIT

       UIkit 使用心得


       UIkit 在WordPress 主题 中很成功。它提供了强大灵活的自定义机制,可以手动修改或者使用它的提供的 GUI 自定义工具来实现。


       如何选择框架?


  • 最后,我来给一些选择框架的建议。下面是一些选择框架需要注重的点:
  • 这个框架足够流行吗?流行意味着有更多的人参与到项目中来,因此,社区中有更多的文章和教程,现实中更多的示例和网站,会有更多的第三方扩展,当然能够更好地与现实的web开发项目结合。极其流行意味着这个框架经得住未来的考验;
  • 拥有庞大社区的框架最不可能被抛弃;
  • 框架是否还在活跃地开发中?一个优秀的框架需要不断地提升自己,紧跟最新 Web 技术的发展,尤其对于移动来说;
  • 这个框架是否已经成熟?如果某个框架还没有在真实项目中充分地使用和测试,只可能试着玩玩,如果用到专业的项目中的话并不是一个明智的选择;
  • 框架是否有完善的文档?最后好能有完善的文档,这样可以加快学习的进程;
  • 框架的详细程度如何?这里核心的点在于一个更通用的框架更容易使用,比较于那些详细程度很高的框架而言。在很多情况下,最好的就是选择一个有 最少样式的框架,因为这样的话比较容易自定义。添加新的 CSS 规则要比比对复写现有的样式规则方便多了。而且,如果你在已有的样式上添加新的样式,你最终获得的就是无用的样式规则,这将会增加 CSS 文件的大小。

       最后,如果你还是不确定,你可以采用一种混合搭配的方式。如果某个框架无法满足你的需求,你可以混用一些来自其他框架来的组件。例如,你可以使用某个框架的精简的 CSS 基础样式,使用来自另外一个框架的栅格系统,以及从第三个框架更为复杂的模块。模块化万岁!:)


       你怎么看的?这些框架还有哪些策略或者弱点在这里没有提到的?还有哪些框架你觉得应该列举在这里?你可以在下面回复给我们。


原文地址: sitepoint

译文地址: zhuanlan.zhihu

译者:@寸志

【细数2014年5个最流行的前端框架】相关文章

1. 细数2014年5个最流行的前端框架

2. 2014年5个最流行前端框架对比

3. 10个最流行的 Node.js MVC 框架

4. 2012年以来GitHub最流行的语言 JavaScript高居榜首

5. 9个目前流行的Material Design前端框架

6. 2014年流行的交互式原型设计工具

7. 2014年5月TIOBE编程语言排行榜单

8. 2014年5月国外部分在线编程/计算机公开课

9. Material Design风格的前端框架免费下载

10. 分享10个最新的Web前端框架

本文来源:https://www.51html5.com/a77.html

点击展开全部

﹝细数2014年5个最流行的前端框架﹞相关内容

「细数2014年5个最流行的前端框架」相关专题

其它栏目

也许您还喜欢