直接拿來用！最火的前端開源項目（一）

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

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

詳細內容如下：

一、Architecture

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

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

• 託管地址：https://github.com/bradfrost/patternlab
• Video+ Slides
• Atomic Design: Some Thoughts and One Example
• Atomic Design Makes Me Feel Like a Chemist

（3） Aura：是一個事件驅動的架構，利用可重用的部件，開發可擴展的應用程序 
（4） Terrific.js：提供一個可擴展的JavaScript架構，幫助你對JQuery/Zepto代碼進行模塊化。 
（5） 大型JavaScript應用程序架構的模式e
（6） 視頻：Nicholas Zakas:可擴展的JavaScript應用程序架構
（7） 圖書：學習JavaScript設計模式
（8） 圖書：雄辯的JavaScript
（9） 圖書：深入單頁面的應用程序
（10） jQuery的應用程序架構圖
（11） 如何管理大型jQuery的應用程序
（12） 對於CSS的可擴展和模塊化架構
（13） 比較不同觀察者模式之間的實現過程

二、Workflow 

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

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

• Web development is getting complex. Let's go shopping.
• GruntStart

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

• 簡介
• 環境設置與Yeoman
• Grunt  Tasks
• CSS Famework

（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組件。

託管地址： https://github.com/angular/angular.js

學習資源列表：

• AngularJS學習
• AngularJS截屏
• 通過AngularJS建立Huuuuuge應用程序
• AngularJS中的範圍原型/原型繼承的細微差別是什麼？
• AngularJS from Basics to Dependency Injection
• AngularJS做列表應用程序
• AngularJS vs. Ember： It's not even close 
• The Hitchhiker’s Guide to the Directive
• 使用Grunt和Angular JS的前端工作流

集成實例

• angular-requirejs-seed
• 使用Bower編寫可重用的Angular JS組件
• Native AngularJS directives for Twitter's Bootstrap
• Automating AngularJS With Yeoman, Grunt & Bower
• 在Heroku上使用Grunt優化Angular模板
• 使用AngularJS和PouchDB構建離線應用程序

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

• jQuery Wiki頁面“插件/創作”
• jQuery插件開發樣板
• 關於編寫jQuery插件的終極指南
• 圖書：jQuery的基礎

（3）Backbone：是一種幫助開發重量級的javascript  MVC 應用框架

• 圖書：開發Backbone.js的應用程序
• Unsuck your backbone
• 關於Marionette.js視圖的可視化指南

（4）Meteor：是一個新鮮出爐的現代網站開發平臺，基礎構架是 Node.JS + MongoDB，它把這個基礎構架同時延伸到了瀏覽器端，可以同時在服務器端和客戶端無差異地調用，本地和遠程數據通過 DDP（Distributed Data Protocol）協議傳輸。

• Meteor.js的最佳學習資源

（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）”，它是用來對網頁風格進行設計的。

（1）一組最佳的框架

（2）Twitter Bootstrap：是一個基於HTML，CSS，JAVASCRIPT的簡潔靈活的 網站前端框架及組件包。

• Home Page
• Github
• Download
• Bootstrap Hero List： Bootstrap資源列表
• Widgets
  • Color and Date Picker
  • WYSIHTML5 RTE for Bootstrap
  • Bootstrap Image Gallery
  • jQuery UI Bootstrap
  • Pines Notify：針對Bootstrap或 jQuery UI的JavaScript消息提醒機制
  • fuelUX
  • A date range picker for Twitter Bootstrap
  • Bootbox.js：是基於Twitter Bootstrap開發的一個小型的JavaScript庫，用來創建簡單的可編程對話框
  • Time Picker
  • Date/Time Picker
  • ReCaptcha
  • Bootstrap Modal：擴展自原生的Bootstrap對話框並提供一些額外的功能
  • SelectBoxIt
  • File Upload
  • BootPag：動態分頁的jQuery插件
  • Bootstrap Arrows：基於Bootstrap實現各種方向的箭頭圖標
  • X-editable：能夠讓你在頁面上創建可編輯的元素
  • Pagination
  • Slider
  • Application Wizard

（3）Themes

• Bootswatch：免費的Twitter Bootstrap主題
• Jumpstart UI：付費的Twitter Bootstrap主題
• Darkstrap：深色主題
• jQuery Mobile Boostrap：一個基於Twitter Bootstrap的jQuery Mobile主題
• Wrapbootstrap
• Wordpress：是一種使用PHP語言開發的博客平臺，用戶可以在支持PHP和MySQL 數據庫的服務器上架設自己的網誌
  • BootstrapWP
  • Roots Theme
  • Bootstrap
  • Bootstrap for Wordpress
  • Bootstrap for WP
  • StrapPress
  • WPBS
• CSS3 Microsoft Modern Buttons
• BootMetro： Metro風格的Web框架
• Cosmo： Windows 8的主題風格 
• Bootstrap Generator：只需點擊 "Generate" 就可以編譯 Bootstrap CSS文件
• Inspiritas
• Facebook
• Google+
• Flatstrap
• Pinstrap

（4）Misc ：一些混合項內容

• Boilerstrap
• Bootstrap GUI PSD：一個工具包主要是啓動Web應用程序和網站
• Font Awesome：爲Twitter Bootstrap設計標誌性字體
• Typo3 Extension
• Bootstrap CDN 
• Bootstrap Tour
• Bootsnipp：爲Bootstrap HTML/CSS/JS框架設計元素及代碼片段
• Form Builder
• PaintStrap： 使用Adobe kuler / COLOURlovers顏色方案生成一個漂亮的Twitter Bootstrap主題
• TODC：一個針對Twitter Bootstrap的Google風格主題
• Layoutit!

• Responsive Grid System
• Responsive Grid System (2)
• Golden Grid System
• Compass
• Pondasee
• Centurion
• Foundation 3
• ProfoundGrid
• Groundwork
• skelJS
• Ink
• neat
• Kube
• rwdgrid
• Simple Grid
• One% CSS Grid
• Workless
• intuit.css：一個強大的、可擴展的、基於Sass、BEM、OOCSS框架

四、Cross Browser

（1）Normalize.css
（2）HTML5 Cross Browser Polyfills
（3）Viewport Component

五、Cross Device

（1）Reponsive

• Vid: Responsive Design Workflow by Stephen Hay + Slides
• Responsive Patterns
  • Responsive Navigation Patterns
  • Complex Navigation Patterns for Responsive Design
• Responsinator
• How to make a Responsive Newspaper-like layout
• The State Of Responsive Web Design
• Facing The Challenge: Building A Responsive Web Application
  • This repo contains techniques and concepts to build responsive & hybrid web applications.
• Tables
  • Responsive Data Tables
  • stacktable.js
  • FooTable
• Events
  • Breakpoints.js
  • Harvey.js
  • Enquire.js
• Images
  • Fluid Images
  • How to Use Responsive Images to Make Your Site Shine on Any Platform
  • Adaptive Images
  • Why We Need Responsive Images
  • Riloadr
  • jQuery Picture
  • Picturefill
• Text
  • FitText：該插件能夠對文本大小自動調整
  • Out Of Words!
  • Responsive Font Sizing：字體能夠隨着屏幕的大小進行自動調整
  • Responsive Measure

（2）E-Mail
（3）Mobile

• Frameworks
  • jQuery Mobile：爲移動設備的優化觸摸屏Web Framework 
  • jQTouch：支持包括 iPhone、Android 等手機，提供一系列功能爲手機瀏覽器WebKit服務的jquery插件。
  • Junior
• Emulators
  • thumbs.js
  • Phantom Limb
  • Touché
• Scrolling
  • jSwipeKinetic
  • jQuery.pep.js
  • Overscroll：是一個 jQuery 插件，用來最小化 iPhone 和 iPad 上的頁面滾動效果處理。
  • Zynga Scroller
  • pull-to-refresh.js
  • Overthrow
  • Antiscroll
• Gestures
  • jGestures： jQuery 插件允許你添加手勢事件，比如： ‘pinch’、‘rotate’、‘swipe’、‘tap’ 和 ‘orientationchange’ 
  • hammer.js：是一個多點觸摸手勢庫。
  • Touchy：是一個高度可配置的jQuery插件。
  • TouchSwipe
  • TipTap
  • jQuery.event.swipe
  • toe.js ：是一個基於 jQuery小型庫，允許在觸摸設備上使用的複雜手勢
  • Jester
  • JS Touch Layer
  • Touch Events and Abstractions
• DOM Objects Manipulation
  • jQuery.event.move
  • WKTouch：一個JavaScript插件觸摸設備，允許多點觸控
• Tap Acceleration
  • Energize
  • Tappable：是一個簡單、獨立的庫爲觸屏Web瀏覽器調用tap事件
  • Fastclick：是一個簡單、易於使用的庫，在移動瀏覽器上的實際反應與單擊事件之間消除300ms的滯後性
  • Lightning Touch
  • Creating Fast Buttons for Mobile Web Applications
• Layout
  • Flickable.js ：允許爲任何元素做觸摸控制
  • PageSlide：是一個jQuery插件，可以控制一隱藏頁面的顯示與關閉
  • Swipe ：是一個輕量級的移動滑動組件，支持1：1的觸摸移動、阻力以及防滑
  • Swiper：加速移動觸摸滑塊與硬件之間的轉換
  • jQuery Mobile Pagination Plugin
  • SwipeSlide
  • stackable.js：是一個非常重要的jQuery插件，爲小屏幕提供的棧表，這在移動設備上具有重要的作用
• Reacting to Device Sensors
  • lenticular.js：是一個jQuery插件爲創建圖片動畫，可響應傾斜或鼠標事件
  • This End Up: Using Device Orientation
• iOS
  • Safari Image Delivery Best Practices
  • Safari Graphics, Media, and Visual Effects Coding How-To's
  • Safari CSS Visual Effects Guide
  • Safari Web Content Guide
  • Getting Started with iOS Web Apps
  • The iPad Web Design & Development Toolbox
  • Targeting the iPhone 4 Retina Display with CSS3 Media Queries
  • How do I lock the orientation to portrait mode in a iPhone Web Application?
  • jQuery Retina Display Plugin
  • retina.js
  • Retina Images

（4）Printers

• Tips And Tricks For Print Style Sheets

六、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字體

• Edge Web Fonts Website

（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 (免費的、商業化的)

（1）colourco
（2）HTML Entity Character Lookup
（3）SpritePad
（4）Responsinator
（5）TheToolbox
（6）HTML Shell
（7）Form Builder
（8）Zen BG
（9）Prepros
（10）site44
（11）Website Builders

• Squarespace
• BaseKit
• Doomby
• Edicy
• IM Creator
• Jimdo
• Moonfruit
• uCoz
• Webnode
• Webs
• Weebly
• Wix
• Wordpress.com
• Yola
• 1&1 Homepage

文章來源： github.com