快速建站必备!细数2014年5个最流行的前端框架

2015/02/11 20936

2014-5-popular-frontend-frameworks-1

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

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

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

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

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

Bootstrap

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

qd201502095

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

Bootstrap 使用心得

Bootstrap 最大的优势就是它非常流行。从技术上讲,它并不是比其他在列框架要优秀。只是它有很多资源(文章、教程、第三方插件和扩展以及主题构造器等等),比起其他四个框架合到一起还要多。简单地讲,Bootstrap 就是无处不在。这也是大家继续使用它的原因。

提示:当我说“特色”的组件,这种特色就是针对目前列出的这些框架而言的。

Foundation(ZURB)

Foundation 是这个领域的第二大玩家。拥有像 ZURB 这样的公司在背后支持,不得不说它确实有一个非常坚实的基础。总之,Foundation 被很多大的网站采用。包括 Facebook、Mozilla、Ebay、Yahoo 以及 National Geographic 等等。

qd201502091

  • 作者: 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 一直在努力让网站建设更加语义化。它利用了自然语言的原则,使得代码更容易读更容易理解。

qd201502093

  • 作者: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 的模块。

qd201502096

  • 作者: 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 包含了一些列简洁的易用的便于自定义的组件。尽管它没有其他在列的框架流行,但是它提供了相当的功能和质量。

qd201502094

  • 作者: 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 基础样式,使用来自另外一个框架的栅格系统,以及从第三个框架更为复杂的模块。模块化万岁!:)

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

【设计师快速建站的必备好文】

手把手教你搭建最流行的WordPress网站!
《新手也能做网站!教你搭建一个超酷的WORDPRESS博客》

风趣幽默的前端基础全科普!
《给设计师们的代码指南!HTML与CSS简介(一)》

响应式网站设计的神器推荐!
《最热门工具推荐!为响应式网站而生的40款栅格神器》

原文地址:sitepoint
译文地址:zhuanlan.zhihu
译者:@寸志

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量90万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/2014-5-popular-frontend-frameworks

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里