優秀開源前端框架

做爲一個前端開發者,我以爲有必要把過去一年幫助過我或朋友們的優秀開源前端框架作個盤點,但願這些項目可以愈來愈好,幫助到更多的前端開發者們。
此榜單根據github上star數做爲排名依據,一我的力量有限,若是收集有遺漏歡迎補充。
(榜單中大部分爲組件式框架, react、Angular等基礎框架不在此篇討論)css

一、名稱:Bootstrap
類別/語言:HTML、CSS、JavaScript
建立者: Twitter
人氣:在Github上有91007 stars
描述:主流框架中毋庸置疑的老大,Bootstrap 是基於 HTML、CSS、JavaScript 的,它簡潔靈活,使得 Web 開發更加快捷。
核心概念/原則: RWD 和移動優先制。
瀏覽器支持: Firefox, Chrome, Safari, IE8+ (你須要 Respond.js for IE8)
響應式: Yes
模塊化: Yes
官網地址:http://getbootstrap.com/
Github地址:https://github.com/twbs/bootstraphtml

二、名稱:html5-boilerplate
類別/語言:HTML、CSS、JavaScript
建立者:Paul Irish
人氣:在Github上有32,349 stars
描述:HTML5 Boilerplate 幫你構建 快速, 健壯, 而且 適應力強 的web app或網站。
核心概念/原則:響應式
瀏覽器支持:Firefox, Chrome, Safari, IE8+,Edge,Opera
預處理器:None
響應式:Yes
模塊化:Yes
官網地址:https://html5boilerplate.com/
Github地址:https://github.com/h5bp/html5-boilerplate前端

三、名稱:Meteor
類別/語言:HTML、CSS、JavaScript
建立者:immir
人氣:在Github上有31,092 stars
描述:Meteor是新一代的開發即時web應用的開源框架,它能幫助你在最少的時間內完成開發。
核心概念/原則:響應式
預處理器: Less
響應式: Yes
模塊化: Yes
官網地址:https://www.meteor.com
Github地址:https://github.com/meteor/meteor/vue

四、名稱:Semantic UI 
類別/語言:HTML、CSS、JavaScript
建立者: Jack Lukic
人氣: 在Github上有22,325 stars
描述: 「基於天然語言有效原則的UI組件框架」
核心概念/原則: 語義,標籤的矛盾性、響應式
瀏覽器支持:Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10。
預處理器: Less
響應式: Yes
模塊化: Yes
官網地址:http://semantic-ui.com/
Github地址:https://github.com/Semantic-Org/Semantic-UIhtml5

五、名稱:Foundation
類別/語言:HTML、CSS、JavaScript
建立者: ZURB
人氣: 在Github上有22,206+ stars
描述: 「世界上最優秀的響應式前端框架」
核心概念/原則: RWD 、手機優先、語義的
瀏覽器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
預處理器: Sass
響應式: Yes
模塊化: Yes
官網地址:http://foundation.zurb.com/
Github地址:https://github.com/zurb/foundation-sitesreact

六、名稱:Materialize
類別/語言:CSS
建立者:Google
人氣:在Github上有15,288stars
描述:Materialize是一個個基於材料設計的一個現代化的響應式前端框架。他們作了最繁重的工做,爲您提供默認的樣式,結合了您的自定義組件。此外,他們還改進動畫和過渡,爲開發人員提供流暢的體驗。
核心概念/原則:響應式
預處理器:Sass
響應式:Yes
模塊化:Yes
官網地址:http://materializecss.com
Github地址:https://github.com/Dogfalo/materialize
瀏覽器支持:Chrome 35+, Firefox 31+, Safari 7+, IE 10+git

七、名稱:Pure
類別/語言:CSS
建立者: Yahoo
人氣: 在Github上有13,161 stars
描述: 「您能夠在每個web項目中使用的一組小的和響應式的CSS模塊」
核心概念/原則:SMACSS,極簡的.
瀏覽器支持:Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
預處理器: None
響應式: Yes
模塊化: Yes
官網地址:http://purecss.io/
Github地址:https://github.com/yahoo/puregithub

八、名稱:Vue
類別/語言:CSS、JavaScript
建立者:尤雨溪
人氣:在Github上有12,214 stars
描述:Vue.js 是用於構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統,具備簡單、靈活的 API。
核心概念/原則:響應式
瀏覽器支持:Firefox, Chrome, Safari, IE10+,Android 4.2+,iOS 7+
預處理器:None
響應式:Yes
模塊化:Yes
官網地址:http://vuejs.org/
Github地址:https://github.com/vuejs/vueweb

九、名稱:Skeleton
類別/語言:CSS、JavaScript
建立者:Dave Gamache
人氣:在Github上有10,622stars
描述:Skeleton 是一個小的 JS 和 CSS 文件的集合,可幫你快速開發漂亮的網站,適合各類屏幕設備包括手機。Skeleton 基於 960 grid 開發。它是一個 UI 框架。
核心概念/原則:響應式
瀏覽器支持:Firefox, Chrome, Safari, IE10+,Opera
預處理器:None
響應式:Yes
模塊化:Yes
官網地址:http://www.getskeleton.com
Github地址:https://github.com/dhg/Skeletonbootstrap

10.名稱: Amaze UI 
類別/語言:HTML、CSS、JavaScript
建立者:雲適配
最後更新時間:2015年12月
人氣:在Github上有6425 stars
描述:國內首個開源HTML5跨屏前端框架,中文排版支持更優、本土化組件豐富。
並在2015年11月推出基於 React.js 的專屬移動端 Web 組件庫Amaze UI touch。
核心概念/原則:組件化、移動優先、輕量級、高性能。
瀏覽器支持: Firefox, Chrome, Safari, IE8+
響應式: Yes
模塊化: Yes
官網地址:http://amazeui.org/
Github地址:https://github.com/amazeui/amazeui

十一、名稱:UIkit 
類別/語言:HTML、CSS、JavaScript
建立者: YOOtheme
人氣: 在Github上有6,050+ stars
描述: 「一個輕量級的和模塊化的前端框架,用於快速開發和功能強大的web接口。」
核心概念/原則:RWD, 手機優先.
預處理器: Less, Sass
響應式: Yes
模塊化: Yes
官網地址:http://getuikit.com/
Github地址:https://github.com/uikit/uikit
瀏覽器支持: Chrome, Firefox, Safari, IE9+

十二、名稱:Yui
類別/語言:CSS、JavaScript
建立者:Yahoo
人氣:在Github上有3,200+ stars
描述:Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫,爲了能創建一個高互動的網頁,它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用受權爲 BSD許可證
核心概念/原則:響應式
預處理器: None
響應式:Yes
模塊化:Yes
官網地址:http://yuilibrary.com/
Github地址:https://github.com/yui/yui3
瀏覽器支持:Firefox, Chrome, Safari, IE10+,Opera

13.名稱:kissy
類別/語言: JavaScript
建立者:淘寶前端
最後更新時間:2015年7月
人氣:在Github上有2035 stars
描述:KISSY 是一款跨終端、模塊化、高性能、使用簡單的 JavaScript 框架。
框架大小: 37 KB
核心概念/原則: 模塊化,跨終端,高擴展性
模塊化: Yes
官網地址:http://docs.kissyui.com/ 
Github地址:https://github.com/kissyteam/kissy/

14.名稱:MUI
類別/語言: HTML、CSS、JavaScript
建立者:Dclould
最後更新時間:2016年1月
人氣:在Github上有2012 stars
描述:MUI-最接近原生App體驗的前端框架框架。
核心概念/原則: 多端發佈、高性能
響應式: NO
模塊化: Yes
官網地址:http://dev.dcloud.net.cn/mui/
Github地址:https://github.com/dcloudio/mui

15.名稱:Arale
類別/語言: JavaScript
建立者:支付寶前端
最後更新時間:2015年7月
人氣:在Github上有1252 stars
描述:Arale 是一個開放、簡單、易用的前端基礎類庫。
框架大小:未知
核心概念/原則: 開放、簡單、易用
瀏覽器支持:Firefox, Chrome, Safari, IE6+
響應式: Yes
模塊化: Yes
官網地址:http://aralejs.org/
Github地址:https://github.com/aralejs/aralejs.org/

16.名稱:JX
類別/語言:Javascript
建立者:騰訊前端
最後更新時間:2015年12月
人氣:在Github上有952 stars
描述:JX 是模塊化的非侵入式Web前端框架,特別適合構建和組織大規模、工業級的Web App。
框架大小: 未知
核心概念/原則: 保持最優執行效率
瀏覽器支持: 兼容主流瀏覽器
模塊化: Yes
官網地址:http://alloyteam.github.io/JX/
Github地址:https://github.com/AlloyTeam/JX

17.名稱:GMU
類別/語言:HTML、CSS、JavaScript
建立者:百度前端
最後更新時間:2015年12月
人氣:在Github上有940stars
描述:GMU是基於zepto的mobile UI組件庫,提供webapp、pad端簡單易用的UI組件! Web App。
核心概念/原則: 簡單易用、輕量級
模塊化: Yes
官網地址:http://gmu.baidu.com/
Github地址:https://github.com/fex-team/GMU

18.名稱:ZUI
類別/語言: HTML、CSS、JavaScript
建立者:蟬道
最後更新時間:2015年7月
人氣:在Github上有616 stars
描述:開源HTML5前端框架
核心概念/原則:簡單易用、輕量級、易於定製
瀏覽器支持:未知
官網地址:http://zui.sexy/
Github地址:https://github.com/easysoft/zui

19.名稱:Clouda Touch.js
類別/語言:JavaScript
建立者:百度雲
人氣:在Github上有387 stars
描述:Touch.js是移動設備上的手勢識別與事件庫,也是在百度內部普遍使用的開發。
核心概念/原則: 無入侵設計、媲美原生的交互、極簡的API
模塊化: Yes
官網地址:http://touch.code.baidu.com/
Github地址:https://github.com/Clouda-team/touch.code.baidu.com

20.名稱:Arkui
類別/語言:HTML、CSS、JavaScript
建立者:豆瓣
人氣:在Github上有129 stars
模塊化: Yes
官網地址:http://mockee.com/arkui/
Github地址:https://github.com/mockee/arkui

相關文章
相關標籤/搜索