摘要：對於開發者而言，瞭解當下比較流行的開源專案很是必要。利用這些專案，有時能夠讓你達到事半功倍的效果。為此，本文整理GitHub上最火的前端開源專案列表，這裡按分類的方式列出前九個。

對於開發者而言，瞭解當下比較流行的開源專案很是必要。利用這些專案，有時能夠讓你達到事半功倍的效果。為此，本文整理GitHub上最火的前端開源專案列表，內容涵蓋了Hack Design、 Designer School、TheExpressiveWeb、如何成為優秀的前端開發工程師、Web開發教學材等，這裡按分類的方式列出前九個。

詳細內容如下：

一、Architecture

網站架構，一般認為是根據客戶需求分析的結果，準確定位網站目標群體，設定網站整體架構，規劃、設計網站欄目及其內容，制定網站開發流程及順序，以最大限度地進行高效資源分配與管理的設計。

（1） BEM：該方法可以讓開發人員快速開發出網站，延長網站的壽命；保持程式碼的重用性
（2） Atomic Design：以原子的觀點設計系統架構，從具體到抽象構建系統架構

二、Workflow 

工作流就是一系列相互銜接、自動進行的業務活動或任務。一個工作流包括一組活動及它們的相互順序關係，還包括流程及活動的啟動和終止條件，以及對每個活動的描述。

（1） Vid：JavaScript開發流程+ 幻燈片
（2） Yeoman：為開發者提供一系列健壯的工具、程式庫和工作流，幫助他們快速構建出漂亮、引人注目的Web應用。 
（3） Grunt：是一個基於任務的關於JavaScript專案命令列構建工具

（4）前端處理——扁平化構建與自動化

（5）CSSCSS：是一個CSS的冗餘分析儀，用於分析冗餘
（6）Helium：通過JavaScript工具掃描網站，顯示未使用的CSS
（7）Roots
（8）Sparky.js：是一個客戶端應用程式框架，可以幫助那些不想訂閱特定客戶端的MVC框架，卻想使用該框架的使用者。
（9）Brunch：是一個針對HTML5應用的彙編程式。
（10）Automaton ：它是內建在JavaScript中的任務自動化的工具。
（11）Cartero

三、Frameworks

FrameWork即架構，提供了軟體開發的框架，使開發更具工程性、簡便性和穩定性。

1.JavaScript篇

JavaScript是一種基於物件和事件驅動並具有相對安全性的客戶端指令碼語言。同時也是一種廣泛用於客戶端Web開發的指令碼語言，常用來給HTML網頁新增動態功能。

（1）Angular： 是一組用來開發Web頁面的框架、模板以及資料繫結和豐富UI元件。

學習資源列表：

整合例項

（2）jQuery：是一個相容多瀏覽器的javascript庫，核心理念是write less,do more(寫的更少，做的更多)。

（3）Backbone：是一種幫助開發重量級的javascript  MVC 應用框架 （4）Meteor：是一個新鮮出爐的現代網站開發平臺，基礎構架是 Node.JS + MongoDB，它把這個基礎構架同時延伸到了瀏覽器端，可以同時在伺服器端和客戶端無差異地呼叫，本地和遠端資料通過 DDP（Distributed Data Protocol）協議傳輸。

（5） Reactby Facebook
（6） Flight：是一個事件驅動的Web框架，源於Twitter
（7） Singool.js：是開發單頁Web應用程式
（8） Knockout：通過應用模型-檢視-檢視-模型（MVVM）模式，簡化動態JavaScript的使用者介面
（9） Sammy.js：是一個很小的JavaScript框架，為開發JavaScript應用程式提供一個基本的架構。
（10） Ember.js：是一個框架，使用該框架建立Web應用程式。
（11） Maria：針對於JavaScript應用程式的MVC框架。The real MVC、The Smalltalk MVC、The Gang of Four MVC。
（12） Terrific Composer：是一個前端開發框架構，專為構建高階前端而設計的
（13） Rivets.js：輕量級且強大的資料繫結+模板解決方案為了建立Web應用程式。
（14） Synapse
（15） 較為全面的JavaScript應用程式框架
（16） JavaScript Data Binding Frameworks

2.CSS篇

CSS稱為“風格樣式表（Style Sheet）”，它是用來對網頁風格進行設計的。

（2）Twitter Bootstrap：是一個基於HTML，CSS，JAVASCRIPT的簡潔靈活的 網站前端框架及元件包。 （3）Themes （4）Misc ：一些混合項內容
四、Cross Browser

五、Cross Device

（1）Reponsive

（2）E-Mail
（3）Mobile （4）Printers 六、Patterns & Snippets （1）Responsive Patterns
（2）CSS3 Code Snippets
（3）Blueprints：是一組基本的網站概念、元件、外掛和佈局，以最小的風格易於適應和使用
七、DOM Manipulation

DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的衝突，給予Web開發者一個標準的方法，讓他們來訪問站點中的資料、指令碼和表現層對像。

（1）xui：為編寫HTML5移動Web應用程式提供的超級微小的DOM庫
（2）Tire：提供一個更輕量級的庫替代如jQuery、Prototype和Zepto庫
八、Typography （1）Quick guide to webfonts via @font-face
（2）How To Achieve Cross-Browser @font-face Support
（3）Google Fonts
（4）Adobe Edge Web Fonts：獲得免費使用Web字型 （5）Typekit：在你的網站上輕鬆使用商業性的Web字型
（6）Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite
（7）Typeset.css
（8）typecast
（9）CSSTypography
（10）SO: @font-face fonts only work on their own domain
（11）FitText
（12）TypeButter
（13）slabText
（14）Baseline.js
（15）jKerny
（16）Lettering.js
（17）Trunk8：是一個智慧截斷文字jQuery外掛
（18）bacon
（19）CSS Typography cheat sheet：提升網站的排版功能

九、Services (免費的、商業化的)