Preface:

Recently, my brother sorted out and summarized the current popular front-end UI framework based on GitHub, front-end community, nuggets and other platforms (PS: the application of front-end UI framework is a rough summary based on GitHub star number, community popularity and application scope (in no particular order)). Hope to look for UI framework partners to provide some help.

The following lists the applications of mobile terminal, PC terminal and hybrid APP of the front-end UI framework.

 

Mobile UI framework

Mint UI (Ele Me team)

Mint-ui.github. IO /#! /zh-cn

Vue based mobile TERMINAL UI framework Based on VUE component library:

　　

GitHub address: github.com/ElemeFE/min… Star: 8705, fork: 1810 Latest commit 2017.12.6pm 32 Ficolin-3 PREVIEW: Elemfe.github. IO/mint-UI /#/ base introduction: CDN:

<! <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <! <script SRC ="https://unpkg.com/mint-ui/lib/index.js"></script>Copy the code

NPM: NPM I mint-UI-S Viewpoint: load components on demand

 

SUI Mobile (UED team of Alibaba Sharing Business Division)

Website:m.sui.taobao.org/

Framework7 UI library – Framework7 UI library Based on IOS style. It’s very lightweight and elegant, and you just need to import our CDN file to use it,

And compatible with iOS 6.0+ and Android 4.0+, very suitable for the development of cross-platform Web App.

Based on the zepto

IOS style

Preview:

　　　　m.sui.taobao.org/demos/

Component library:

　　　　

Making address:Github.com/sdc-alibaba…

Star: 5242, fork: 1466

The lastest commit 2016.11.10 11 am

14 contributors

Basic introduction:

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 >Copy the code

 

 

Weui (wechat official design team)

Description: WeUI is tailored for wechat Web services. It is a basic style library consistent with wechat’s native visual experience. It is tailored for wechat Web development by wechat’s official design team, which can make users’ use perception more unified.

Contains button, cell, dialog, Progress, toast, article, Actionsheet, icon and other elements.

Making address:github.com/weui/weui

star:16804,fork:4683

Latest commit 2017.11.2 8 PM

20 contributors

Preview:

UI components

　　　　　　weui.io

　　　　　　

JS component

　　　　　　github.com/weui/weui

　　　　　　

Basic introduction:

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://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js" > < / script >Copy the code

NPM: NPM install –save weui

 

YDUI Touch

Website:www.ydui.org/

Description: an aesthetically oriented and high-performance mobile terminal & wechat UI.

Based on the jQuery

Compatibility:

Compatible with most mobile devices (compatible with Android4.0+, IOS6.0+);

With flexbox layout, YDUI will adopt other solutions because earlier versions of Android and some special browsers are not compatible with flex-basis, flex-wrap, and inline-Flex attributes.

Basic introduction:

Download:

Introduce the YDUI style: ydui.css

Introduce YDUI adaptive solution class library: ydui.flexibility.js

The introduction of jQuery2.0 +

Introduce the YDUI script: ydui.js

Component library:

　　　　

Preview:

　　　　 m.ydui.org

　　　　 

Making address:github.com/ydcss/ydui

Star: 420, fork: 117

Latest commit 2017.10.23 2 PM

1 contributors

Personal opinion: Custom keyBoard plug-in is the highlight

 

GMU (Baidu GMU team development)

Description: Zepto-based lightweight mobile UI component library, in line with jquery UI specifications, provides easy-to-use UI components for WebApp and Pad. Compatible with iOS3+ / Android2.1 +, support domestic mainstream mobile browsers, such as Safari, Chrome, UC, QQ and so on. GitHub address: github.com/fex-team/GM… Star :1106,fork:461 Latest Commit 2017.4.18 2pm 8 Ficolin-3 base introduction: download introduction of reset.css: https://github.com/fex-team/GMU/blob/master/dist/reset.css introduced gmu. CSS: https://github.com/fex-team/GMU/blob/master/dist/gmu.css introduced zepto. Js: https://github.com/fex-team/GMU/blob/master/dist/zepto.js introduced gmu. Js: https://github.com/fex-team/GMU/blob/master/dist/gmu.js

 

FrozenUI (QQVIPFD team • Alloyteam Team)

Frozenui.github. IO/Description: Simple to use, lightweight and fast, for mobile front-end services framework. Based on hand Q style specification. Application in Tencent hand Q value-added business. Compatible with Android 2.3 +, ios 4.0 +. GitHub address: github.com/frozenui/fr… Star: 2330, Fork: 645 Latest Commit 2017.11.30 7 FICOLin-3 View: A RELATIVELY clean JAVASCRIPT component library with mobile preference

Foundation

Description: Foundation is the most popular HTML, CSS and JS framework for developing responsive layout, mobile first WEB projects. GitHub address: github.com/zurb/founda… Star: 26751, Fork: 5751 Latest commit 2017.10.5 7AM 955 FIColin-based introduction: 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://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>Copy the code

Opinion: There are not many official Documents in Chinese, which is not convenient for Chinese developers

 

Amaze UI

Official Address:amazeui.org/

Description: China’s first open source HTML5 cross-screen front-end framework. Amaze UI focuses on Chinese typography, adjusting fonts according to user agents,

Achieve better Chinese typesetting effect.

Based on the jQuery

Making:Github.com/amazeui/ama…

star:10949,fork:2397

Latest commit 2017.3.4 8 PM

24 contributors

Component library:

　　　　

Basic introduction:

CDN:

http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.jsCopy the code

Viewpoint: Suitable for PC side more (such as paging implementation)

Pure

www.purecss.cn/ Description: Pure CSS A set of lightweight, responsive pure CSS modules produced by Yahoo USA, suitable for any Web project. GitHub: github.com/yahoo/pure/ Star: 17880, fork: 1969 Latest commit 2017.11.26 10pm 51 FIColin-based introduction: CDN:

< link rel = "stylesheet" href = "https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">Copy the code


PC UI framework

iView

Official website address:www.iviewui.com/

Description: A set of high quality UI component library based on vue.js. IView is a set of open source UI component library based on vue. js, mainly serving PC interface in the background products.

Making address:github.com/iview/iview

Star: 11421, fork: 1745

The latest commit 2017.12.4 11 am

Component library:

　　　　

Basic introduction:

CDN:

<! -- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script> <! -- import stylesheet --> <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> <! -- import iView --> <script src="//unpkg.com/iview/dist/iview.min.js"></script>Copy the code

NPM: NPM install iview –save

 

Element UI (Ele. me Team)

Official Address:element-cn.eleme.io/#/zh-CN

Description: Vue 2.0 – based desktop component library

Making:Github.com/ElemeFE/ele…

Star: 20657, Fork: 3777

The latest commit 2017.12.5 11 am

254 contributors

Component library:

　　　　

Basic introduction:

CDN:

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>Copy the code

NPM: NPM I element-ui-s

 

SUI (Alibaba International UED Team – Merchant Business Division)

Official website address:sui.taobao.org/

Description: a set of front-end component library based on Bootstrap development, and it is also a set of design specifications.

Based on the jquery

Component library:

　　　　

Making:Github.com/sdc-alibaba…

Star: 322, fork: 135

The latest commit 2015.7.23 3 PM

4 contributors

Basic introduction:

CDN:

< link href = "http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel = "stylesheet" > < script type = "text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script> <script type="text/javascript" SRC = "http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js" > < / script >Copy the code

Viewpoint: Biased towards design specifications, component libraries are relatively simple.

 

H-ui

Official Address:www.h-ui.net/

Description: Lightweight front-end framework, simple and free, good compatibility, service Chinese website.

Based on the jQuery

Making address:Github.com/jackying/h-…

Star: 432, Fork: 196

The latest commit 2017.11.16 3 PM

1 contributors

Component library:

　　　　

View: No bright spot, use the third party plug-in to complete


layui

Official Address:www.layui.com/

Description: More tailored for server programmers, you don’t have to deal with the complex configuration of various front-end tools, just the browser itself,

Let all the elements and interactions you need come from here.

Layui is compatible with all browsers humans are using (except IE6/7) and can be used as a quick development solution for PC backend systems and foreground interfaces.

Classic modular front-end frameworks

Component library:

　　　　

Making:Github.com/sentsin/lay…

star:10278,fork:2909

Latest commit 2017.12.7 9 PM

11 contributors

Basic introduction:

layui.css

layui.js

 

UiKit (YOOtheme team)

Official website address:www.getuikit.net/

Description: A lightweight, modular front-end framework to quickly build a powerful Web front-end interface.

UIkit is compatible with modern browsers above IE9. In IE8 and below, all JavaScript is disabled.

Relying on the jQuery

Component library:

　　　　

Making address:github.com/uikit/uikit

Star: 11146, fork: 1811

Latest commit 2017.12.8 4 PM

21 contributors

Basic introduction:

CDN:

< link rel = "stylesheet" href = "/ / cdn.bootcss.com/uikit/2.25.0/css/uikit.css" / > < script SRC = "/ / cdn.bootcss.com/uikit/2.25.0/js/uikit.js" > < / script >Copy the code

 

Bootstrap

Chinese official website:www.bootcss.com/

Description: simple, intuitive, powerful front-end development framework, make web development faster and simpler.

Component library

　　　　

Making address:Github.com/twbs/bootst…

Star: 118971, fork: 56198

Latest commit 2017.12.8 2 PM

958contributors

Basic introduction:

CDN:

<! <link rel="stylesheet" Href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <! -- optional Bootstrap theme file --> <link rel="stylesheet" Href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <! - the latest Bootstrap core JavaScript file -- > < script SRC = "https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>Copy the code

NPM: NPM install bootstrap@3 Other modules derived from bootstrap: Ace Admin Background management system template: based on bootstrap3; Ace. Jeka. By/Metronic Backend Management template: www.metronic.com/ H+:www.zi-han.net/theme/hplus… JQuery UI+Bootstrap:github.com/jquery-ui-b…


jQuery UI

Official website:jqueryui.com/

Component library:

　　　　

Other templates derived from jQuery:

BUI: Based on jQuery+KISSY UI:www.builive.com/

EasyUI: :www.jeasyui.net/

With Easyui you don’t need to write a lot of code, you just need to write some simple HTML tags, you can define the user interface.

DWZ JUI:jui.org/


Hybrid development UI frameworks

ionic

Chinese official website: www.ionic-china.com/

Ionic is a powerful HTML5 application development Framework. Ionic focuses on the look and feel and UI interaction with your app, making it particularly suited for HTML5 mobile app development based on the Hybird model. Ionic is a lightweight UI library for mobile phones with a fast, modern and aesthetically pleasing interface.


Framework7

Framework7 is an open source, free framework for developing hybrid mobile applications (native and HTML hybrid) or iOS & Android style WEB apps. It can also be used as a prototyping tool to quickly create a prototype of an application. She only focuses on providing the best experience for iOS and Google Material design. GitHub:github.com/framework7i… Star: 11304, fork: 2439 Latest COMMIT2017.11.7 5pm 77 FICol3


OnsenUI

Description: HTML5 UI framework for building hybrid mobile apps GitHub address: github.com/OnsenUI/Ons… Star: 5706, Fork: 716 Latest COMMIT 2017.11.30 6pm 83 FICol3

 

APP Framework (Extension)

react-native

React Native allows you to build world-class Native apps with the same Javascript and React development experience. React Native focuses on improving the efficiency of multi-platform development — learn it once and write it for any platform. (Learn once, write Anywhere) GitHub address: github.com/facebook/re… Star: 56938, Fork: 13206 15443S

weex

Website address: weex.apache.org/cn/ Description: Weex provides powerful cross-platform capabilities and can use the same API to develop Web, Android and iOS applications. At the same time, we have a rich ability to extend the interface.

 

More and more

More UI framework based on vue: www.awesomes.cn/subject/vue… More UI framework based on the bootstrap: www.awesomes.cn/subject/boo… Based on the React more UI framework: www.awesomes.cn/subject/rea… More UI framework based on presents: www.awesomes.cn/subject/ang…


conclusion

In terms of mixed APP and APP development, my younger brother does not have much experience and only has a rough understanding. The above is a summary of some information about mobile terminal UI framework, PC terminal and mixed APP development UI framework. Of course, today’s front-end rapid development, about the UI framework of many are not summed up and summarized, I hope that partners can understand the message oh.






Author: PC. Aaron

Reference: www.cnblogs.com/aaron-pan/

The copyright of this article belongs to the author, welcome to reprint, but without the consent of the author must retain this statement, and give the original text link in the obvious position of the article page, otherwise reserve the right to pursue legal responsibility.