H5十大框架

做为一名作为在前端死缠烂打6年而且懒到不行的攻城士，这几年我仍是阅过不少同门从知名到很知名的各类前端框架，原本想拿15-20个框架来分享一下，但在跟几个前辈讨教写文章的技巧时果断被无情的打击了，因此这里我仍是低调的只拿出10个框架来个大锅乱炖来简单介绍，凑够字数也就全剧终了。

本来写这篇文章想围绕着 CSS 框架来的，但由于目前界内比较流行并遍地开花的主要仍是 JS+CSS 模式的框架，而且本身靠着一点 JS 功底，就想专门针对 CSS，因此最后来个大锅乱炖都大体聊聊。下面的框架也没有什么前后顺序之分，我想到啥就写啥啦( 做为前端，我一贯都这么的任性 ^_^ )。

Bootstrap

首先说 Bootstrap，估计你也猜到会先说或者必定会有这个( 呵呵了 )，这是说明它的强大之处，拥有框架一壁江山的势气。本身刚入道的时候本着代码任何一个字母都得本身敲出来挡我者废的决心，来让本身成长。结果受到周围各类基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才，可是老天只让我会用 PS 和各类设计工具却不给我跟设计妹子同样的审美，因此这也是我最初选择 Bootstrap 的缘由之一，它让我作出来的东西好歹能在妹子面前装个逼，不过期间长了不免以为 Bootstrap 美的让人烦躁， 但好在它的每一个版本都会有很大的改变，不会让人以为本身作的网站会跟不少网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 做者阅攻城士无数，了解他们痛的结果 )，以致因而个小前端均可以快速上手，几乎没什么学习成本。

官网：http://getbootstrap.com/

Github：https://github.com/twbs/bootstrap/

做者：Mark Otto 和Jacob Thornton Star：93,112

总结：Bootstrap 最大的优点就是它很是流行，流行就表明你有问题就有不少人帮你解决问题，就表明装逼它就是利器，还有就是界面比较和谐，容易上手，关注它的童鞋应该发现最新 V4 版也开始支持 FlexBox 布局，这是很是好的升级体验。 劣势是 class 命名不够语义化，而且各类缩写，以致于我离了文档就是个菜，最近开始整混合 APP，选框架的时候首选就是它，但以前搞 PC 一直没注意，后来搞混合右键属性看它的时候，瞬间一阵凉风袭来，Bootstrap 好小，小到我只好选择别的框架。

AUI

第三个是最近刚起来的AUI，虽然做者声称是专为APICloud开发者设计的一套UI框架，但实际它仍是解决了不少移动前端开发的广泛问题，是主要面向混合开发的 CSS 框架。看起来做者比较猖狂，各类高级 CSS3 遍地使用，这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果真选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，而且框架还提供了聊天界面、计数列表等组件，解决了不少复杂的让我骂娘的布局，如今能够直接拿走就用。

Github：https://github.com/liulangnan/aui

官网：http://www.auicss.com/

做者：流浪男 Star：92

总结：这个框架对我来讲有个优势就是纯 CSS 框架，本身之前也就用过 Pure，本身有点 JS 能力，若是不是复杂的效果，找个纯 CSS 框架本身随便改改就能够，而如今 CSS3 也已经可以作到动画，效率、质量、高效全兼顾，因此仍是选择了这种 CSS 框架。有一点以为不满的是这框架的文档真的好那什么，说好的高大上呢。

Amaze UI

第二个介绍的是妹子UI，最初使用它是由于本尊遇到了一个爱纠结细节设计士，有一次她跟个人字体较上真了，结果一句顶万句的 BOOS 夸了她，我只好根据她的想法去解决，结果最后找到了Amaze UI 框架( 我不介意你叫我懒淫 )，按照官方的话说就是 "基于社区开源项目构建的一个跨屏前端框架，以移动优先，从小屏到大屏，最终实现全部屏幕适配，适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。

官网：http://amazeui.org/

Github：https://github.com/amazeui/amazeui

所属公司：云适配 Star：6710

总结：Amaze UI 总的来讲就是加入更多符合中国市场特性的元素，框架对跨屏、适配都作了的比较好的处理而且准备一了一系列的经常使用的网页组件，为减小搞兼容、适配各类敲键盘的加班狗们的工做时间作了不小的贡献。，框架还对中文排版优化，兼容中国本土主流浏览器、轻量化，不只适用于桌面端，还更更适合移动端、包含一些封装好的Widgets。不过自也就我感受 Amaze UI 文档是否有点太那什么了，好比 “人们不会在意jQuery的那点流量。”，说实的在这真没啥，不过我历来不会说出来( 哈哈 )，代码和设计上感受没太多突出的点。

Frozen UI

有段时间看到 QQ 瞬间高大上了，后来四处打听，原来 QQ 客服端也用了 混合开发，其中QQ会员前端用的是 Frozen UI，而且这套框架开源，欣喜若狂耐不住内心的寂寞直接上手试了一遍，初体验感受基础样式效果简单色调清爽，有个比较活跃的社区因此组件什么的也比较丰富。

Github：https://github.com/frozenui/frozenui

官网：http://frozenui.github.io/

做者： QQVIP FD Team Star：1,067

总结：若是拿 Frozen UI 配合一些如 APICloud 用来作混合 APP 感受就太酷了，或者原生的火鸡们拿去嵌套在应用中作前端开发，这个框架对 android 2.3 +、ios 4.0 + 作了兼容，或者拿来作 Web App 也是极好的选择，劣势的话从 UI 层面就能够看到了，谁让它是出生在QQ会员前端的呢。

Frozen UI

第三个是Frozen UI，有段时间看到 QQ 瞬间高大上了，后来四处打听，原来 QQ 客服端也用了 HTML 混合开发，其中QQ会员前端就是用的 Frozen UI，而且这套框架开源，欣喜若狂耐不住内心的寂寞直接上手三下五除二试了一遍就开始试用，初体验的就是基础样式效果简单色调清爽，有个比较活跃的社区因此组件什么的也比较丰富。

Github：https://github.com/frozenui/frozenui

官网：http://frozenui.github.io/

做者： QQVIP FD Team Star：1,067

总结：若是拿 Frozen UI 配合一些如 APICloud 用来作混合 APP 感受就太酷了，或者原生的火鸡们拿去嵌套在应用中作前端开发，而且这个框架对 android 2.3 +、ios 4.0 + 作了兼容，或者拿来作 Web app 也是极好的选择，不过要是放在微信里比这更合适的 WeUI 框架更是首选了，劣势的话从 UI 层面就能够看到了，谁让它是出生在QQ会员前端的呢。

WeUIi

第四个是WeUI和同 FrozenUI都属于 差很少的 WeUi了，也是一个比较专注的框架，WeUI应该说比FrozenUI前者更专注，话说连个官网都不搞，全部答疑都在 gitHub Issues 解决了，这个框架极其简单，体积固然就不用说了，模块也就 7 个左右，不过体量虽然小作的却不错，口碑看 star 就够了，框架从 16/1/23 发版至今 github star 超过 7K,不过也不排除用户没地方发泄因此都跑到 git 上来，哈哈。

Github：https://github.com/weui/weui

DEMO：http://weui.github.io/weui/

Star：7,129

总结：看完微信设计团队设计的这套 DEMO，二话不说若是要作微信公众，这个二话不说必然是首选了。框架很差的地方简而言之就是框架自己应该就没考虑过让用户用到非微信的场景之下。

SUI

“SUI 是一套基于bootstrap开发的前端组件库，同时它她也是一套设计规范。经过SUI，能够很是方便的设计和实现精美的页面”。 果真仍是直接引用官方给的枯燥无味广告要节省本身的脑细胞( 囧… )，固然了就像广告说的，若是你以前用过 Bootstrap， 那么能够轻松转向 SUI，这可能就是淘宝给前端屌丝们的福利了。。 

Github：https://github.com/sdc-alibaba/sui

官网：http://sui.taobao.org/sui/docs/index.html

Star：120

AUI

第六个是最近刚起来的最近刚起来的 AUI，虽然做者声称是专为APICloud开发者设计的一套UI框架，但实际它仍是解决了不少移动前端开发的广泛问题，是它主要面向混合开发的 CSS 框架。，因此看起来做者比较猖狂，各类高级 CSS3 遍地使用，这也使得我不得不去查查这些个 CSS3 的兼容性。不负众望果真选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，而且框架还提供了聊天界面、计数列表等组件，解决了不少复杂的让我骂娘的布局，如今能够直接拿走就用。

Github：https://github.com/liulangnan/aui

官网：http://www.auicss.com/

做者：流浪男 Star：92

总结：这个框架对我来讲有个优势就是纯 CSS 框架，本身之前也就用过 Pure，本身有点 js 能力，若是不是复杂的效果本身找个纯 CSS 框架本身随便改改就能达到效果，而如今 CSS3 也已经可以作到各类动画，效率、质量、高效各类一顿考虑因此仍是选择了这种 CSS 框架。而一直以为不满的是这框架的文档真的好那什么，说好的高大上呢。

MUI

曾经一直使用 Android 系统的我，后来见到 IOS，果断移情别恋了，不知道为何苹果每次调整系统我都特别喜欢，后来一段时间由于缺设计我专门模仿 IOS 系统作 UI，但始终不可以作到很好，无心间就发现了 MUI 这个框架，这个框架给个人吸引之处就是它的 UI 是以 IOS 为主体设计的，固然它也补充了android特有UI样式。而且MUI官方声称用来开发深刻之后发现拿它作 APP 还可以提升用户使用流畅度，而后便试着更深刻的了解和使用一段时间。

官网：http://dev.dcloud.net.cn/mui/

Github：https://github.com/dcloudio/mui

Star：2,450

总结：就像以前说的这个框架是以两大系统为参照来封装UI组件，框架自身还有一个较为活跃的社区，不太好的地方这也是我特别关注的一点，关于开发应用的流畅度，我固然知道这是 H5 目前的劣势，可是看到官网给的描述，仍是抱着期待的心理试试看可否提高，然而它其实仍是须要是借助 Webview来提高，而不是框架自己。

Semantic UI

倒数第三个是 Semantic UI，接触这个框架仍是由于 Bootstrap，Semantic UI 刚上线 github 就受到大量开发者的关注，以致于不少人拿它俩对比各类挑刺各类夸，是好是坏不能单凭别人三句四句就抬起手指开始赞，用了之后感受 UI 上跟 Bootstrap 没太多的区别，不过代码命名规范上却相差甚大，本人认为 Semantic UI 是否是就想作的不同，它的命名全是采用复合的方式，类名特别的离散，用的时候你得很当心本身扩展或者新增的 class 命名与它的类名冲突。

官网：http://www.semantic-ui.cn/

Github：https://github.com/semantic-org/semantic-ui/

 Foundation

Foundation 算是框架界的元老啦，都说框架去的早，而这个框架一直到如今依然这么的热门，若是你比较介意 Bootstrap 开发撞脸的尴尬事情，那么你能够考虑使用 Foundation 。即便你使用预约义的 UI 元素, 也不会与其余网站太像，就像官方说的给开发者更灵活的框架体验。

官网：http://foundation.zurb.com/

Github：https://github.com/zurb/foundation-sites

Star：22,736

UiKit

UIkit是YOOtheme团队开发的，在许多WordPress主题中都有应用(也就是若是你是个 WordPress 爱好者，那么这个框架应该比较适合深究)，而且框架可以经过GUI编辑器和手动编辑，因此它提供了一个灵活、强大的自定义机制。框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特色，整合成了这么一款轻量级、模块化的前端框架。

官网：http://www.getuikit.com/
Github：https://github.com/uikit/uikit
做者：YOOtheme Star：6,372

Pure

终于最后一个了，我和你同样好开森 (～￣▽￣)～)，这个框架是我在作管理系统时接触的，选择使用也是由于框架小巧，而且是纯 CSS，没有太多的牵扯，好用来与其余框架快速结合使用。

官网：http://purecss.io/

Github：https://github.com/yahoo/pure/

Star：13,592

介绍完毕，估计你应该看出来了，我使用框架真的也就是遇到了需求，才选择了某个框架，因此框架之间并无什么好与特好之分，只能说你的需求是什么，这个框架合适不合适你去用，各类框架用起来也都大体差很少，会用一个其余的上手也就都变得简单容易上手，我以为能写框架的人都是室外高仁。