几年阅过不少从知名到很知名的前端框架,因此这里我仍是低调的只拿出10个框架来个大锅乱炖,凑够字数也就全剧终了。javascript
下面的框架也没有什么前后顺序之分,我想到啥就写啥啦( 做为前端,我一贯都这么的任性 ^_^ )。
css
Bootstrap
html
首先说 Bootstrap,估计你也猜到会先说或者必定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气。本身刚入道的时候本着代码任何一个字母都得本身敲出来挡我者废的决心,来让本身成长。结果受到周围各类基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才,可是老天只让我会用 PS 和各类设计工具却不给我跟设计妹子同样的审美,因此这也是我最初选择 Bootstrap 的缘由之一,它让我作出来的东西好歹能在妹子面前装个逼,不过期间长了不免以为 Bootstrap 美的让人烦躁,但好在它的每一个版本都会有很大的改变,不会让人以为本身作的网站会跟不少网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 做者阅攻城士无数,了解他们痛的结果),以致因而个小前端均可以快速上手,几乎没什么学习成本。
前端
官网:http://getbootstrap.com/
Github:https://github.com/twbs/bootstrap/
做者:Mark Otto 和Jacob Thornton Star:93,112java
总结:Bootstrap 最大的优点就是它很是流行,流行就表明你有问题就有不少人帮你解决问题,就表明装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的童鞋应该发现最新 V4 版也开始支持 FlexBox 布局,这是很是好的升级体验。劣势是 class 命名不够语义化,而且各类缩写,以致于我离了文档就是个菜,最近开始整混合 APP,选框架的时候首选就是它,但以前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap 好小,小到我只好选择别的框架。jquery
Amaze UI
android
第二个介绍的是妹子UI,最初使用它是由于本尊遇到了一个爱纠结细节设计士,有一次她跟个人字体较上真了,结果一句顶万句的BOOS 夸了她,我只好根据她的想法去解决,结果最后找到了Amaze UI 框架( 我不介意你叫我懒淫),按照官方的话说就是“基于社区开源项目构建的一个跨屏前端框架,以移动优先,从小屏到大屏,最终实现全部屏幕适配,适应移动互联潮流”。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。ios
官网:http://amazeui.org/
Github:https://github.com/amazeui/amazeui
所属公司:云适配 Star:6710
css3
总结:Amaze UI 总的来讲加入更多符合中国市场特性的元素,框架对跨屏、适配都作了比较好的处理而且准备了一系列的经常使用网页组件,为减小搞兼容、适配各类敲键盘的加班狗们的工做时间作了不小的贡献。框架还对中文排版优化,兼容中国本土主流浏览器、轻量化,不只适用于桌面端,更适合移动端。git
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 框架。有一点以为不满的是这框架的文档真的好那什么,说好的高大上呢。
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会员前端的呢。
WeUI
WeUI和 FrozenUI都属于比较专注的框架,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
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
介绍完毕,估计你应该看出来了,我使用框架真的也就是遇到了需求,才选择了某个框架,因此框架之间并无什么好与特好之分,只能说你的需求是什么,这个框架合适不合适你去用,各类框架用起来也都大体差很少,会用一个其余的上手也就都变得简单容易上手,我以为能写框架的人都是室外高人。