作为一名在前端死缠烂打6年而且懒到不行的攻城狮,这几年阅过非常多从知名到非常知名的前端框架。本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的仅仅拿出10个框架来个大锅乱炖,凑够字数也就全剧终了。以下的框架也没有什么先后顺序之分,我想到啥就写啥啦(
作为前端,我一向都这么的任性 ^_^ )。
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 最大的优势就是它很流行,流行就代表你有问题就有许多人帮你解决这个问题。就代表装逼它就是利器。还有就是界面比較和谐,easy上手。关注它的童鞋应该发现最新 V4 版也開始支持 FlexBox 布局,这是很好的升级体验。
劣势是 class 命名不够语义化,而且各种缩写,以至于我离了文档就是个菜。近期開始整混合 APP,选框架的时候首选就是它,但之前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来。Bootstrap 好小。小到我仅仅好选择别的框架。
Amaze UI
第二个介绍的是妹子UI。最初使用它是由于本尊遇到了一个爱纠结细节设计士,有一次她跟我的字体较上真了。结果一句顶万句的BOOS 夸了她,我仅仅好依据她的想法去解决,结果最后找到了Amaze UI 框架( 我不介意你叫我懒淫),依照官方的话说就是“基于社区开源项目构建的一个跨屏前端框架,以移动优先。从小屏到大屏。终于实现全部屏幕适配,适应移动互联潮流”。
但事实上我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。
官网:http://amazeui.org/
Github:https://github.com/amazeui/amazeui
所属公司:云适配 Star:6710
总结:Amaze
UI 总的来说增加很多其它符合中国市场特性的元素,框架对跨屏、适配都做了比較好的处理而且准备了一系列的经常使用网页组件,为降低搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。框架还对中文排版优化,兼容中国本土主流浏览器、轻量化,不仅适用于桌面端,更适合移动端。
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
介绍完成。预计你应该看出来了,我使用框架真的也就是遇到了需求。才选择了某个框架,所以框架之间并没有什么好与特好之分,仅仅能说你的需求是什么,这个框架合适不合适你去用,各种框架用起来也都大致差点儿相同,会用一个其它的上手也就都变得简单easy上手,我认为能写框架的人都是室外高人。