直接拿来用！最火的前端开源项目（一）

摘要：对于开发者而言，了解当下比较流行的开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。为此，本文整理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

转载地址：http://www.csdn.net/article/2013-06-25/2815979-front-end-development