10大H5前端框架,让你开发不愁




做为一名在前端死缠烂打6年并且懒到不行的攻城狮,这几年阅过很是多从知名到很是知名的前端框架。原本想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,因此这里我仍是低调的仅仅拿出10个框架来个大锅乱炖,凑够字数也就全剧终了。如下的框架也没有什么前后顺序之分,我想到啥就写啥啦( 做为前端,我一贯都这么的任性 ^_^ )。
css



Bootstrap
html



首先说 Bootstrap,预计你也猜到会先说或者必定会有这个( 呵呵了 ),这是说明它的强大之处。拥有框架一壁江山的势气。前端

本身刚入道的时候本着代码不论什么一个字母都得本身敲出来挡我者废的决心,来让本身成长。android

结果受到周围各类基友的引诱開始了 Bootstrap 旅程。本人尽管是个设计+前端的万里有一的人才,但是老天仅仅让我会用 PS 和各类设计工具却不给我跟设计妹子同样的审美,因此这也是我最初选择 Bootstrap 的缘由之中的一个,它让我作出来的东西好歹能在妹子面前装个逼,只是时间长了不免认为 Bootstrap 美的让人烦躁,但好在它的每个版本号都会有很是大的改变,不会让人认为本身作的站点会跟很是多站点撞脸。ios

Bootstrap 的使用方法及其简单( 这也可能就是 Bootstrap 做者阅攻城士无数,了解他们痛的结果),以致因而个小前端都可以高速上手,差点儿没什么学习成本。
git


官网:http://getbootstrap.com/
Github:https://github.com/twbs/bootstrap/
做者:Mark Otto 和Jacob Thornton    Star:93,112
github


总结:Bootstrap 最大的优点就是它很流行,流行就表明你有问题就有许多人帮你解决这个问题。就表明装逼它就是利器。还有就是界面比較和谐,easy上手。关注它的童鞋应该发现最新 V4 版也開始支持 FlexBox 布局,这是很好的升级体验。bootstrap

劣势是 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上手,我认为能写框架的人都是室外高人。

相关文章
相关标签/搜索