2015年已經(jīng)過(guò)去了，作為一個(gè)親歷前端開(kāi)發(fā)多年的開(kāi)發(fā)者，目睹和見(jiàn)證了前端開(kāi)發(fā)從最初的Javascript 語(yǔ)言類庫(kù)到HTML5標(biāo)準(zhǔn)定稿后帶來(lái)的Web Components 跨終端組件的快速發(fā)展。

隨著Web 越來(lái)越規(guī)范和標(biāo)準(zhǔn)的統(tǒng)一，Web組件化技術(shù)不斷革新以及移動(dòng)端開(kāi)發(fā)不斷升華的今天，我覺(jué)得有必要把過(guò)去一年幫助過(guò)我或朋友們的優(yōu)秀開(kāi)源前端框架做個(gè)盤點(diǎn)，希望這些與時(shí)俱進(jìn)，具有行業(yè)代表性的項(xiàng)目能夠越來(lái)越好，幫助到更多的前端開(kāi)發(fā)者們。

此榜單根據(jù)github上star數(shù)作為排名依據(jù)，一個(gè)人力量有限，如果收集有遺漏歡迎補(bǔ)充。(榜單中大部分為組件式框架，react、Angular等基礎(chǔ)框架不在此篇討論)

1、 名稱：Bootstrap

 

 

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者：Twitter

人氣：在Github上有91007 stars

描述：主流框架中毋庸置疑的老大，Bootstrap 是基于 HTML、CSS、JavaScript的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。

核心概念/原則: RWD 和移動(dòng)優(yōu)先制。

瀏覽器支持： Firefox, Chrome, Safari, IE8+ (你需要 Respond.js forIE8)

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：http://getbootstrap.com/

Github地址：https://github.com/twbs/bootstrap

2、名稱：html5-boilerplate

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者：Paul Irish

人氣：在Github上有32,349stars

描述：HTML5 Boilerplate 幫你構(gòu)建快速, 健壯, 并且適應(yīng)力強(qiáng)的web app或網(wǎng)站。

核心概念/原則：響應(yīng)式

瀏覽器支持：Firefox, Chrome, Safari, IE8+,Edge,Opera

預(yù)處理器：None

響應(yīng)式：Yes

模塊化：Yes

官網(wǎng)地址：https://html5boilerplate.com/

Github地址：https://github.com/h5bp/html5-boilerplate

3、名稱：Meteor

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者：immir

人氣：在Github上有31,092 stars

描述：Meteor是新一代的開(kāi)發(fā)即時(shí)web應(yīng)用的開(kāi)源框架，它能幫助你在最少的時(shí)間內(nèi)完成開(kāi)發(fā)。

核心概念/原則：響應(yīng)式

預(yù)處理器: Less

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：https://www.meteor.com

Github地址：https://github.com/meteor/meteor/

4、名稱：Semantic UI

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者: Jack Lukic

人氣: 在Github上有22,325 stars

描述: “基于自然語(yǔ)言有效原則的UI組件框架”

核心概念/原則: 語(yǔ)義，標(biāo)簽的矛盾性、響應(yīng)式

瀏覽器支持：Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only),Android 4, Blackberry 10。

預(yù)處理器: Less

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：http://semantic-ui.com/

Github地址：https://github.com/Semantic-Org/Semantic-UI

5、名稱：Foundation

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者: ZURB

人氣: 在Github上有22,206+ stars

描述: “世界上最優(yōu)秀的響應(yīng)式前端框架”

核心概念/原則: RWD 、手機(jī)優(yōu)先、語(yǔ)義的

瀏覽器支持： Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

預(yù)處理器: Sass

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：http://foundation.zurb.com/

Github地址：https://github.com/zurb/foundation-sites

6、名稱：Materialize

 

 

類別/語(yǔ)言：CSS

創(chuàng)建者：Google

人氣：在Github上有15,288stars

描述：Materialize是一個(gè)個(gè)基于材料設(shè)計(jì)的一個(gè)現(xiàn)代化的響應(yīng)式前端框架。他們做了最繁重的工作，為您提供默認(rèn)的樣式，結(jié)合了您的自定義組件。此外，他們還改進(jìn)動(dòng)畫和過(guò)渡，為開(kāi)發(fā)人員提供流暢的體驗(yàn)。

核心概念/原則：響應(yīng)式

預(yù)處理器：Sass

響應(yīng)式：Yes

模塊化：Yes

官網(wǎng)地址：http://materializecss.com

Github地址：https://github.com/Dogfalo/materialize

瀏覽器支持：Chrome 35+, Firefox 31+, Safari 7+, IE 10+

7、名稱：Pure

類別/語(yǔ)言：CSS

創(chuàng)建者: Yahoo

人氣: 在Github上有13,161 stars

描述: “您可以在每一個(gè)web項(xiàng)目中使用的一組小的和響應(yīng)式的CSS模塊”

核心概念/原則:SMACSS,極簡(jiǎn)的.

瀏覽器支持：Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

預(yù)處理器: None

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：http://purecss.io/

Github地址：https://github.com/yahoo/pure

8、名稱：Vue

類別/語(yǔ)言：CSS、JavaScript

創(chuàng)建者：尤雨溪

人氣：在Github上有12,214stars

描述：Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。它提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。

核心概念/原則：響應(yīng)式

瀏覽器支持：Firefox, Chrome, Safari, IE9+，Android4.2+，iOS 7+

預(yù)處理器：None

響應(yīng)式：Yes

模塊化：Yes

官網(wǎng)地址：http://vuejs.org/

Github地址：https://github.com/vuejs/vue

9、名稱：Skeleton

類別/語(yǔ)言：CSS、JavaScript

創(chuàng)建者：Dave Gamache

人氣：在Github上有10,622stars

描述：Skeleton 是一個(gè)小的 JS 和 CSS 文件的集合,可幫你快速開(kāi)發(fā)漂亮的網(wǎng)站,適合各種屏幕設(shè)備包括手機(jī)。Skeleton 基于 960 grid 開(kāi)發(fā)。它是一個(gè) UI 框架。

核心概念/原則：響應(yīng)式

瀏覽器支持：Firefox, Chrome, Safari, IE10+,Opera

預(yù)處理器：None

響應(yīng)式：Yes

模塊化：Yes

官網(wǎng)地址：http://www.getskeleton.com

Github地址：https://github.com/dhg/Skeleton

10.名稱： Amaze UI

 

 

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者：云適配

最后更新時(shí)間：2015年12月

人氣：在Github上有6425 stars

描述：Amaze UI是國(guó)內(nèi)首個(gè)開(kāi)源HTML5跨屏前端框架產(chǎn)品系列，中文排版支持更優(yōu)、本土化組件豐富。該產(chǎn)品系列中有專門針對(duì)移動(dòng)端的HTML5混合應(yīng)用開(kāi)發(fā)框架Amaze UI Touch以及針對(duì)跨屏HTML5網(wǎng)頁(yè)開(kāi)發(fā)的Amaze UI Web。其中，Amaze UI Touch可以幫助開(kāi)發(fā)者通過(guò)豐富的組件，快速構(gòu)建出與原生APP相媲美的專屬移動(dòng)端的HTML5應(yīng)用。

核心概念/原則：組件化、移動(dòng)優(yōu)先、輕量級(jí)、高性能。

瀏覽器支持： Firefox, Chrome, Safari, IE8+

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：http://amazeui.org/

Github地址：https://github.com/amazeui/amazeui

11、名稱：UIkit

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者: YOOtheme

人氣: 在Github上有6,050+ stars

描述: “一個(gè)輕量級(jí)的和模塊化的前端框架,用于快速開(kāi)發(fā)和功能強(qiáng)大的web接口。”

核心概念/原則:RWD, 手機(jī)優(yōu)先.

預(yù)處理器: Less, Sass

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：http://getuikit.com/

Github地址：https://github.com/uikit/uikit

瀏覽器支持： Chrome, Firefox, Safari, IE9+

12、名稱：Yui

類別/語(yǔ)言：CSS、JavaScript

創(chuàng)建者：Yahoo

人氣：在Github上有3,200+stars

描述：Yahoo! UI Library (YUI) 是一個(gè)開(kāi)放源代碼的 JavaScript 函數(shù)庫(kù)，為了能建立一個(gè)高互動(dòng)的網(wǎng)頁(yè)，它采用了AJAX, DHTML 和 DOM 等程式碼技術(shù)。它也包含了許多 CSS 資源。使用授權(quán)為 BSD許可證

核心概念/原則：響應(yīng)式

預(yù)處理器: None

響應(yīng)式：Yes

模塊化：Yes

官網(wǎng)地址：http://yuilibrary.com/

Github地址：https://github.com/yui/yui3

瀏覽器支持：Firefox, Chrome, Safari, IE10+,Opera

13.名稱：kissy

類別/語(yǔ)言： JavaScript

創(chuàng)建者：淘寶前端

最后更新時(shí)間：2015年7月

人氣：在Github上有2035 stars

描述：KISSY 是一款跨終端、模塊化、高性能、使用簡(jiǎn)單的 JavaScript 框架。

核心概念/原則: 模塊化，跨終端，高擴(kuò)展性

模塊化: Yes

官網(wǎng)地址：http://docs.kissyui.com/

Github地址：https://github.com/kissyteam/kissy/

14.名稱：MUI

類別/語(yǔ)言： HTML、CSS、JavaScript

創(chuàng)建者：Dclould

最后更新時(shí)間：2016年1月

人氣：在Github上有2012 stars

描述：MUI-最接近原生App體驗(yàn)的前端框架框架。

核心概念/原則: 多端發(fā)布、高性能

響應(yīng)式: NO

模塊化: Yes

官網(wǎng)地址：http://dev.dcloud.net.cn/mui/

Github地址：https://github.com/dcloudio/mui

15.名稱：Arale

 

 

類別/語(yǔ)言： JavaScript

創(chuàng)建者：支付寶前端

最后更新時(shí)間：2015年7月

人氣：在Github上有1252 stars

描述：Arale 是一個(gè)開(kāi)放、簡(jiǎn)單、易用的前端基礎(chǔ)類庫(kù)。

框架大小:未知

核心概念/原則: 開(kāi)放、簡(jiǎn)單、易用

瀏覽器支持：Firefox, Chrome, Safari, IE6+

響應(yīng)式: Yes

模塊化: Yes

官網(wǎng)地址：http://aralejs.org/

Github地址：https://github.com/aralejs/aralejs.org/

16.名稱：JX

類別/語(yǔ)言：Javascript

創(chuàng)建者：騰訊前端

最后更新時(shí)間：2015年12月

人氣：在Github上有952stars

描述：JX 是模塊化的非侵入式Web前端框架，特別適合構(gòu)建和組織大規(guī)模、工業(yè)級(jí)的Web App。

核心概念/原則: 保持最優(yōu)執(zhí)行效率

瀏覽器支持：兼容主流瀏覽器

模塊化: Yes

官網(wǎng)地址：http://alloyteam.github.io/JX/

Github地址：https://github.com/AlloyTeam/JX

17.名稱：GMU

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者：百度前端

最后更新時(shí)間：2015年12月

人氣：在Github上有940stars

描述：GMU是基于zepto的mobile UI組件庫(kù)，提供webapp、pad端簡(jiǎn)單易用的UI組件! Web App。

核心概念/原則: 簡(jiǎn)單易用、輕量級(jí)

模塊化: Yes

官網(wǎng)地址：http://gmu.baidu.com/

Github地址：https://github.com/fex-team/GMU

18.名稱：ZUI

類別/語(yǔ)言： HTML、CSS、JavaScript

創(chuàng)建者：蟬道

最后更新時(shí)間：2015年7月

人氣：在Github上有616 stars

描述：開(kāi)源HTML5前端框架

核心概念/原則:簡(jiǎn)單易用、輕量級(jí)、易于定制

瀏覽器支持：未知

官網(wǎng)地址：http://zui.sexy/

Github地址：https://github.com/easysoft/zui

19.名稱：Clouda Touch.js

 

 

類別/語(yǔ)言：JavaScript

創(chuàng)建者：百度云

人氣：在Github上有387 stars

描述：Touch.js是移動(dòng)設(shè)備上的手勢(shì)識(shí)別與事件庫(kù),也是在百度內(nèi)部廣泛使用的開(kāi)發(fā)。

核心概念/原則: 無(wú)入侵設(shè)計(jì)、媲美原生的交互、極簡(jiǎn)的API

模塊化: Yes

官網(wǎng)地址：http://touch.code.baidu.com/

Github地址：https://github.com/Clouda-team/touch.code.baidu.com

20.名稱：Arkui

類別/語(yǔ)言：HTML、CSS、JavaScript

創(chuàng)建者：豆瓣

人氣：在Github上有129 stars

模塊化: Yes

官網(wǎng)地址：http://mockee.com/arkui/

Github地址：https://github.com/mockee/arkui