移动端前端ui框架(前端UI框架小汇总)
移动端前端ui框架(前端UI框架小汇总)组件库: 基于vueMint UI(饿了么团队)中文官网:http://mint-ui.github.io/#!/zh-cn描述:基于vue的移动端UI框架
前言:
近期,小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总【不分先后】)。希望对寻找UI框架的小伙伴们提供点帮助。
以下对前端UI框架的移动端、PC端和混合APP的应用进行了列举。
移动端UI框架
Mint UI(饿了么团队)
中文官网:http://mint-ui.github.io/#!/zh-cn
描述:基于vue的移动端UI框架
基于vue
组件库:
GitHub地址:https://github.com/ElemeFE/mint-ui/
star:8705,fork:1810
latest commit 2017.12.6 6pm
32 contributors
预览:
http://elemefe.github.io/mint-ui/#/
基础引入:
CDN:
<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入组件库 --><script src="https://img.aigexing.comhttps://unpkg.com/mint-ui/lib/index.js"></script>
npm:
npm i mint-ui -S
观点:可按需加载组件
SUI Mobile(阿里巴巴共享业务事业部UED团队)
官网:http://m.sui.taobao.org/
描述:一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,
并且能兼容到 iOS 6.0 和 Android 4.0 ,非常适合开发跨平台Web App。
基于zepto
IOS风格
预览:
http://m.sui.taobao.org/demos/
组件库:
GitHub地址:https://github.com/sdc-alibaba/SUI-Mobile
star:5242,fork:1466
lastest commit 2016.11.10 11am
14 contributors
基础引入:
CDN:
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"><script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script><script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
Weui(微信官方设计团队)
描述:WeUI 为微信 Web 服务量身设计 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。
包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
GitHub地址:https://github.com/weui/weui
star:16804 fork:4683
latest commit 2017.11.2 8pm
20 contributors
预览:
UI组件
https://weui.io
JS组件
https://github.com/weui/weui
基础引入:
CDN:
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"><script type="text/javascript" src="https://img.aigexing.comhttps://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
npm:
npm install --save weui
YDUI Touch
官网:http://www.ydui.org/
描述:一只注重审美,且性能高效的移动端&微信UI。
基于jQuery
兼容性:
兼容绝大多数移动端设备(兼容Android4.0 、IOS6.0 );
采用 flexbox 布局,因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性,YDUI 将采取其他解决方案;
基础引入:
download:
引入YDUI样式:ydui.css
引入YDUI自适应解决方案类库:ydui.flexible.js
引入jQuery2.0
引入YDUI脚本:ydui.js
组件库:
预览:
http://m.ydui.org
GitHub地址:https://github.com/ydcss/ydui
star:420,fork:117
latest commit 2017.10.23 2pm
1 contributors
个人观点:自定义keyBoard插件为亮点
GMU(百度GMU小组开发)
描述:基于zepto的轻量级mobile UI组件库,符合jquery ui使用规范,提供webapp、pad端简单易用的UI组件。
兼容iOS3 / android2.1 ,支持国内主流移动端浏览器,如safari chrome UC qq等。
GitHub地址:https://github.com/fex-team/GMU
star:1106 fork:461
latest commit 2017.4.18 2pm
8 contributors
基础引入:
download
引入reset.css:https://github.com/fex-team/GMU/blob/master/dist/reset.css
引入gmu.css:https://github.com/fex-team/GMU/blob/master/dist/gmu.css
引入zepto.js:https://github.com/fex-team/GMU/blob/master/dist/zepto.js
引入gmu.js:https://github.com/fex-team/GMU/blob/master/dist/gmu.js
FrozenUI(QQVIP FD团队• Alloyteam团队)
官方地址:http://frozenui.github.io/
描述:简单易用,轻量快捷,为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。
兼容android 2.3 ,ios 4.0 。
GitHub地址:https://github.com/frozenui/frozenui
star:2330,fork:645
latest commit 2017.11.30
7 contributors
观点:JS组件库相对简洁
移动优先
Foundation
中文官网:http://www.foundcss.com/
描述:Foundation是国外最流行的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
GitHub地址:https://github.com/zurb/foundation-sites
star:26751,fork:5751
latest commit 2017.10.5 7am
955 contributors
基础引入:
CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" /><script src="https://img.aigexing.comhttps://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>
观点:无很多中文官方文档,不便于中国开发者
Amaze UI
官方地址:http://amazeui.org/
描述:中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版,根据用户代理调整字体,
实现更好的中文排版效果。
基于jQuery
GitHub:https://github.com/amazeui/amazeui
star:10949 fork:2397
latest commit 2017.3.4 8pm
24 contributors
组件库:
基础引入:
CDN: