0. 前端自動(dòng)化(Workflow)

• 前端構(gòu)建工具

• Yeoman – a set of tools for automating development workflow

• gulp – The streaming build system

• grunt – the JavaScript Task Runner

• F.I.S – 前端集成解決方案

• 前端模塊管理器

• Bower – A package manager for the web

• Browserify

• Component

• Duo

• RequireJS

• Sea.js

• css預(yù)處理器

• Less – Less is More , Than CSS

• Sass – Syntactically Awesome Style Sheets

• Stylus – Expressive, dynamic, robust CSS

1. 前端框架(Frameworks)

• Bootstrap

• Foundation

• Amaze UI

• Semantic UI

• Pure CSS

• topcoat

• UIkit

• Material UI

• Framework7

• mui

• ionic framework

• Fries

• jQuery Mobile

2. JavaScript 框架匯總

• JavaScript 框架

• react

• Angular

• jQuery

• Backbone.js

• Ractive.js

• KISSY

• Zepto.js

• Vanilla JS

• Avalon

• 輕量級(jí)JavaScript框架

• Min.js – Super minimal selector and event library

• skel.js – A lightweight responsive framework

• JavaScript 工具庫(kù)

• underscore.js

• Way.js – 雙向數(shù)據(jù)綁定庫(kù)

• Keys.js – 應(yīng)用快捷鍵

3. 前端游戲框架

• cocos2d-html5

• Egret Engine

• LimeJS

• EaselJS

• three.js

• AlloyStick

• The-Best-JS-Game-Framework

• CanvasEngine

• Quintus

4. ui組件庫(kù)

• GMU

• NEC

• NEJ

• Pure CSS Components

• magic-of-css

5. 基礎(chǔ)模版

• HTML5 BOILERPLATE

• Modernizr

• Normalize.css

• Responsive – 響應(yīng)式布局

6. 排版

• yue.css

• typo.css

• chinese-copywriting-guidelines – 中文文案排版指南

7. 網(wǎng)格系統(tǒng)

• grid

• Flexbox Grid

8. HTML5 API 應(yīng)用

• History.js – gracefully supports the HTML5 History/State APIs

• jquery-pjax – pushState+ajax

• jquery-address – Deep Linking

• Notify.js(Web Notifications API)

9. UA 識(shí)別

• detector

10. 表單處理

10.1 表單驗(yàn)證(Form Validator)

• Validator

• Parsley

• jquery.form.js – jQuery Form Plugin

• Validform

• validator.js

• formvalidator.js

• Fort.js – 表單填寫進(jìn)度提示

10.2 < select > 相關(guān)

• Chosen

• Select2

• bootstrap-select

10.3 單選框/復(fù)選框相關(guān)

• iCheck – 增強(qiáng)復(fù)選框和單選按鈕

10.4 上傳組件

• jQuery File Upload Plugin

• 百度 Web Uploader

• Uploadify

• Plupload

• arale-upload – 輕量級(jí) iframe and html5 file uploader

• Dropzone.js – drag’n’drop library拖拽上傳

• flow.js

10.5 日期選擇

• Both Date and Time picker widget based on twitter bootstrap

• GMU 日歷組件

• Mobiscroll

10.6 取色

• Colorpicker plugin for Twitter Bootstrap

10.7 標(biāo)簽插件(Tag)

• TaggingJS – 可以靈活定制的 jQuery 標(biāo)簽系統(tǒng)插件

10.8 自動(dòng)完成插件

• At.js – 一個(gè)Twitter/微博樣式的@自動(dòng)完成插件

• jquery-textcomplete – 智能搜索提示框/自動(dòng)補(bǔ)全

10.9 樣式修正

• autosize – 使文本框自動(dòng)適應(yīng)所輸入的內(nèi)容

11. 圖表繪制

• Highcharts

• Chart.js – Simple HTML5 Charts using Canvas

• 百度 ECharts

• Chartist.js

• D3.js – A JavaScript visualization library for HTML and SVG.

• intro-to-d3 – a D3.js tutorial

12. 日期格式化

• Moment.js

• Smart Time Ago – 顯示相對(duì)時(shí)間

13. 頁(yè)面交互

13.1 Slider

• slick – the last carousel you’ll ever need

• Swipe – the most accurate touch slider

• Swiper – Most modern mobile touch slider

• iscroll – Smooth scrolling for the web

• OwlCarousel – create beautiful responsive carousel slider

• jquery-mousewheel – jQuery鼠標(biāo)滾輪滾動(dòng)偵測(cè)插件

13.2 瀑布流

• Masonry

• Isotope – Filter & sort magical layouts

13.3 圖片懶加載/加載監(jiān)聽(tīng)

• imagesLoaded

• Echo.js

• lazySizes

• jquery_lazyload

• lazyload.js

• waitForImages – 圖片加載監(jiān)聽(tīng)?zhēng)?/a>

13.4 圖片輪播/展示

• FlexSlider

• unslider – 小而美的輪播庫(kù)

• prettyPhoto

13.5 圖片剪裁/處理

• croppic – an image cropping jquery plugin

• jQuery.eraser – 圖像擦除插件

13.6 進(jìn)度條

• NProgress.js

• progress.js

• Pace – Automatic page load progress bar

• jquery-ajax-progress

13.7 側(cè)滑插件(offcancas)

• pushy – a responsive off-canvas navigation menu

13.8 菜單(Menu)

• SuperFish – 基于jQuery的級(jí)聯(lián)下拉菜單

• Responsive Nav – 響應(yīng)式導(dǎo)航

13.9 滾動(dòng)偵測(cè)(ScrollSpy)

• jquery-scrollspy(1)

• jquery-scrollspy(2)

• Waypoints

13.10 滾動(dòng)加載更多

• jScroll

13.11 平滑滾動(dòng)插件(Smooth Scroll)

• jquery-smooth-scroll

• jquery.scrollTo – 平滑滾動(dòng)到頁(yè)面指定位置

13.12 全屏滾動(dòng)

• pagePiling.js – 全屏滾動(dòng)效果

13.13 分屏滾動(dòng)

• multiscroll.js – 分屏滾動(dòng)效果

13.14 轉(zhuǎn)場(chǎng)效果

• Animsition – 頁(yè)面切換時(shí)的過(guò)渡效果

13.15 固定元素(Sticky)

• sticky – jQuery Plugin for Sticky Objects

• jquery.pin – 固定頁(yè)面元素

13.16 觸控事件

• Hammer.js

• jquery.event.move.js

13.17 拖拽組件

• Draggabilly – 專注于拖拽功能的 JS 庫(kù)

13.18 隱藏或展示頁(yè)面元素

• Headroom.js – 在不需要頁(yè)頭時(shí)將其隱藏

• Readmore.js – 內(nèi)容顯示與隱藏插件

13.19 滾動(dòng)條

• jScrollPane

13.20 視差滾動(dòng)(Parallax Scrolling)

• parallax.js

• jparallax

14. 代碼高亮插件/代碼編輯器

• google-code-prettify

• highlight.js

• Rainbow

• ACE

• CodeMirror

• Crayon Syntax Highlighter

• prism – Lightweight, robust, elegant syntax highlighting.

15. UI Icon 組件

• Font Awesome

• Glyphter: The SVG Font Machine

• Perfect Icons

• iconizr

• Cikonss – 純CSS實(shí)現(xiàn)的響應(yīng)式Icon

• Simple Icons

16. 動(dòng)畫

• animate.css – A cross-browser library of CSS animations.

• Transit – CSS transitions and transformations for jQuery

• Move.js – 簡(jiǎn)化CSS3動(dòng)畫的JS庫(kù)

• ScrollMe – 在網(wǎng)頁(yè)中加入各種滾動(dòng)動(dòng)畫效果

• Effeckt.css – A Performant Transitions and Animations Library

• NEC動(dòng)畫庫(kù)

• csshake – CSS classes to move your DOM

• magic – CSS3 Animations with special effects

• Hover.css

• css-loaders

• SpinKit

17. 本地存儲(chǔ)

• cross-storage – Cross domain local storage

• localForage

• pouchdb

• basil.js

18. 模板引擎

• mustache.js

• Handlebars.js

• artTemplate

• baiduTemplate

• JSRender

• EJS – JavaScript Templates

• Juicer – A Light Javascript Templete Engine.

• Tempo

• json2html

19. 通知組件/彈框組件

• alertify.js

• AlertifyJS

• SweetAlert

• Messenger – 非?？岬膹椏蚪M件

• PNotify

• Notify.js – A simple, versatile notification library

20. 提示控件(Tooltips)

• qTip2 – Pretty powerful tooltips

• tooltip – CSS Tooltips

• tooltipster – A jQuery tooltip plugin

• grumble.js – 氣泡形狀的提示（Tooltip）控件

• Ouibounce – 離站提示控件

21. 對(duì)話框/彈出層(lightbox)

• fancyBox – Fancy jQuery lightbox

• jquery-lightbox – The popular lightbox script, ported to jQuery

• Colorbox – a jQuery lightbox

• artDialog – 經(jīng)典的網(wǎng)頁(yè)對(duì)話框組件

• DialogEffects

22. 文檔/表格

• handsontable – 在線可編輯excel表格

• jQuery Bootgrid – 用于ajax生成動(dòng)態(tài)表格

• DataTables – Table plug-in for jQuery

23. 目錄樹插件

• zTree_v3 – jQuery Tree Plugin

• jstree – jQuery Tree Plugin

• fancytree – Tree plugin for jQuery

24. Ajax模塊

• fetch – A window.fetch JavaScript polyfill

• reqwest – browser asynchronous http requests

• minAjax.js

25. 音頻/視頻

• jPlayer – HTML5 Audio & Video for jQuery

• video.js – HTML5 & Flash video player

• Accessible HTML5 Video Player – PayPal 開(kāi)源的 HTML5 視頻播放器

• Clappr – 開(kāi)源的Web視頻播放器

• Plyr – A simple HTML5 media player

• FitVids.js – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

• BigVideo.js – The jQuery Plugin for Big Background Video

• BigScreen – A simple library for using the JavaScript Full Screen API

• Vide – 視頻背景

• winamp2-js

26. 按鈕

• Buttons – A CSS button library

• ButtonComponentMorph

• ProgressButtonStyles

• CreativeButtons

• CSS3 buttons

• jquery.onoff – Interactive, accessible toggle switches for the web.

27. 富文本編輯器/Markdown編輯器/Markdown解析器

• Simditor – 簡(jiǎn)單快速的富文本編輯器

• BachEditor – 一個(gè)有情懷的編輯器

• bootstrap-markdown

• marked – markdown解析器

28. 內(nèi)容提取(Readability)

• Readability

• json.human.js – Json Formatting for Human Beings

29. 顏色(CSS Colors)/SVG

• CSS Colours

• SVGeneration

30. 實(shí)用工具/其他插件

• jquery-cookie

• FastClick – 處理移動(dòng)端 click 事件 300 毫秒延遲

• screenfull.js – 全屏切換

• Async.js – 異步操作

• html2canvas – 實(shí)現(xiàn)純JS網(wǎng)頁(yè)截圖

• jquery.qrcode.js – 生成二維碼的 jQuery 插件

• FocusPoint.js 實(shí)現(xiàn)圖片的響應(yīng)式裁剪

• DD_belatedPNG.js – 讓IE6支持透明PNG圖片

• nakedpassword – 用脫衣女幫助檢測(cè)密碼強(qiáng)度

前端參考集

• frontend-guidelines – Some HTML, CSS and JS best practices.

• Codrops – Useful resources

• Front-end Code Standards & Best Practices

• frontend-dev-bookmarks

• www.ccxcn.com