H5 frame

Bootstrap

Let’s talk about Bootstrap first, I guess you guessed that it will be said first or there will be this (hehe), which shows its power and the momentum of the framework. When I first entered the Dao, I was determined that I had to type out any letter of the code to stop me and let myself grow. As a result, I was seduced by various friends around me and started the Bootstrap journey. Although I am a talent in design + front-end, but God only allows me to use PS and various design tools but does not give me the same aesthetic as the design girl, so this is one of the reasons why I chose Bootstrap in the first place. The things I made can pretend to be a force in front of girls, but after a long time, it is inevitable that Bootstrap is beautiful and annoying, but fortunately, each version of it will have great changes, and it will not make people feel that they did it by themselves. The website will collide with many websites. The usage of Bootstrap is so simple (this may be the result of Bootstrap authors reading countless siege fighters and understanding their pain), so that a small front-end can be used quickly, with almost no learning cost.

Official website: http://getbootstrap.com/

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

By Mark Otto and Jacob Thornton Star: 93,112

Summary: Bootstrap's biggest advantage is that it is very popular. Popularity means that you have a problem and there are many people helping you solve it. It means that it is a weapon to pretend to be a force. Also, the interface is harmonious and easy to use. Children's shoes who pay attention to it should find it. The latest V4 version also supports FlexBox layout, which is a very good upgrade experience. The disadvantage is that the class name is not semantic enough, and there are various abbreviations, so that I am a dish away from the document. Recently, I started to integrate the mixed APP. When choosing a framework, it is the first choice. When looking at it, a cool breeze hits in an instant. Bootstrap is so small that I had to choose another framework.

UAI

The third is AUI, which has just emerged recently. Although the author claims to be a UI framework designed for APICloud developers, it actually solves many common problems in mobile front-end development, and is a CSS framework mainly for hybrid development. It seems that the author is more rampant, and all kinds of advanced CSS3 are used everywhere, which makes me have to check the compatibility of these CSS3. As expected, I chose all the attributes that are compatible with the good ones. Haha, I was excited. I got to know a few good things from the seniors, and the framework also provides components such as a chat interface and a count list, which solved a lot of complicated things that made me curse. Layouts are now ready to use.

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

Official website: http://www.auicss.com/

Author: Homeless Man Star: 92

Summary: One of the advantages of this framework for me is that it is a pure CSS framework. I have used Pure before, and I have some JS capabilities. If it is not complicated, I can find a pure CSS framework and change it myself. Now CSS3 It has also been able to achieve animation, efficiency, quality, and efficiency, so I chose this CSS framework. One thing I feel dissatisfied with is that the documentation of this framework is really good.

Amaze UI

The second one is the sister UI, which was originally used because the deity met a designer who loves details She decided to solve it, and finally found the Amaze UI framework (I don't mind if you call me lazy), according to the official word, it is "a cross-screen front-end framework based on community open source projects, with mobile first, from small screen to large. screen, and finally realize all screen adaptation, adapt to the trend of mobile Internet." But in fact, I just fancy that it can solve the cross-screen adaptation and compatibility problems existing in domestic browsers.

Official website: 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

介绍完毕,估计你应该看出来了,我使用框架真的也就是遇到了需求,才选择了某个框架,所以框架之间并没有什么好与特好之分,只能说你的需求是什么,这个框架合适不合适你去用,各种框架用起来也都大致差不多,会用一个其他的上手也就都变得简单容易上手,我觉得能写框架的人都是室外高仁。


来源:https://www.cnblogs.com/kingboy2008/p/5261771.html

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325585202&siteId=291194637