30組經常使用前端開發組件庫

這裏是收集的web前端開發經常使用前端開發組件庫，搭建web app經常使用的樣式/組件等收集列表(移動優先)。主要包含前端框架，構建工具，自動化模塊、jQuery插件、前端樣式等，囊括最實用的前端開發組件庫！

0. 前端自動化

前端構建工具

gulp – The streaming build system

grunt – the JavaScript Task Runner

前端模塊管理器

Bower – A package manager for the web

Browserify

Component

Duo

RequireJS

Sea.js

css預處理器

Less – Less is More , Than CSS

Sass – Syntactically Awesome Style Sheets

Stylus – Expressive, dynamic, robust CSS

1. 前端框架

Bootstrap

Foundation

Amaze UI

Semantic UI

Pure CSS

topcoat

UIkit

Material UI

Framework7

mui

ionic framework

Fries

jQuery Mobile

2. JavaScript 框架彙總

JavaScript 框架

Angular

jQuery

Backbone.js

Ractive.js

KISSY

Zepto.js

Vanilla JS

Avalon

輕量級JavaScript框架

Min.js – Super minimal selector and event library

skel.js – A lightweight responsive framework

JavaScript 工具庫

underscore.js

Way.js – 雙向數據綁定庫

Keys.js – 應用快捷鍵

3. 前端遊戲框架

cocos2d-html5

Egret Engine

LimeJS

EaselJS

three.js

AlloyStick

The-Best-JS-Game-Framework

CanvasEngine

Quintus

4. ui組件庫

GMU

NEC

NEJ

Pure CSS Components

magic-of-css

5. 基礎模版

HTML5 BOILERPLATE

Modernizr

Normalize.css

6. 排版

yue.css

typo.css

7. 網格系統

grid

Flexbox Grid

8. HTML5 API 應用

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

jquery-pjax – pushState+ajax

jquery-address – Deep Linking

Notify.js(Web Notifications API)

9. UA 識別

detector

10. 表單處理

10.1 表單驗證(Form Validator)

Validator

Parsley

jquery.form.js – jQuery Form Plugin

Validform

validator.js

formvalidator.js

Fort.js – 表單填寫進度提示

10.2 < select > 相關

Chosen

Select2

bootstrap-select

10.3 單選框/複選框相關

iCheck – 加強複選框和單選按鈕

10.4 上傳組件

jQuery File Upload Plugin

百度 Web Uploader

Uploadify

Plupload

arale-upload – 輕量級 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 標籤插件(Tag)

TaggingJS – 能夠靈活定製的 jQuery 標籤系統插件

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 – 顯示相對時間

13. 頁面交互

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

13.2 瀑布流

Masonry

Isotope – Filter & sort magical layouts

13.3 圖片懶加載/加載監聽

imagesLoaded

Echo.js

lazySizes

jquery_lazyload

lazyload.js

waitForImages – 圖片加載監聽庫

13.4 圖片輪播/展現

FlexSlider

unslider – 小而美的輪播庫

prettyPhoto

13.5 圖片剪裁

croppic – an image cropping jquery plugin

13.6 進度條

NProgress.js

progress.js

Pace – Automatic page load progress bar

jquery-ajax-progress

13.7 側滑插件(offcancas)

pushy – a responsive off-canvas navigation menu

13.8 菜單(Menu)

SuperFish – 基於jQuery的級聯下拉菜單

Responsive Nav – 響應式導航

13.9 滾動偵測(ScrollSpy)

jquery-scrollspy(1)

jquery-scrollspy(2)

Waypoints

13.10 滾動加載更多

jScroll

13.11 平滑滾動插件(Smooth Scroll)

jquery-smooth-scroll

jquery.scrollTo – 平滑滾動到頁面指定位置

13.12 全屏滾動

pagePiling.js – 全屏滾動效果

13.13 分屏滾動

multiscroll.js – 分屏滾動效果

13.14 轉場效果

Animsition – 頁面切換時的過渡效果

13.15 固定元素(Sticky)

sticky – jQuery Plugin for Sticky Objects

jquery.pin – 固定頁面元素

13.16 觸控事件

Hammer.JS

13.17 拖拽組件

Draggabilly – 專一於拖拽功能的 JS 庫

13.18 隱藏或展現頁面元素

Headroom.js – 在不須要頁頭時將其隱藏

Readmore.js – 內容顯示與隱藏插件

13.19 滾動條

jScrollPane

13.20 視差滾動(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實現的響應式Icon

Simple Icons

16. 動畫

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

Transit – CSS transitions and transformations for jQuery

Move.js – 簡化CSS3動畫的JS庫

ScrollMe – 在網頁中加入各類滾動動畫效果

Effeckt.css – A Performant Transitions and Animations Library

NEC動畫庫

csshake – CSS classes to move your DOM

magic – CSS3 Animations with special effects

Hover.css

css-loaders

SpinKit

17. 本地存儲

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 – 很是酷的彈框組件

PNotify

20. 提示控件(Tooltips)

qTip2 – Pretty powerful tooltips

tooltip – CSS Tooltips

tooltipster – A jQuery tooltip plugin

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

Ouibounce – 離站提示控件

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

fancyBox – Fancy jQuery lightbox

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

Colorbox – a jQuery lightbox

artDialog – 經典的網頁對話框組件

DialogEffects

22. 文檔/表格

handsontable – 在線可編輯excel表格

jQuery Bootgrid – 用於ajax生成動態表格

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 開源的 HTML5 視頻播放器

Clappr – 開源的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

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

Simditor – 簡單快速的富文本編輯器

BachEditor – 一個有情懷的編輯器

bootstrap-markdown

marked – markdown解析器

28. 內容提取(Readability)

Readability

json.human.js – Json Formatting for Human Beings

29. 顏色(CSS Colors)/SVG

CSS Colours

SVGeneration

30. 實用工具/其餘插件

jquery-cookie

FastClick – 處理移動端 click 事件 300 毫秒延遲

screenfull.js – 全屏切換

Async.js – 異步操做

html2canvas – 實現純JS網頁截圖

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

FocusPoint.js 實現圖片的響應式裁剪

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

nakedpassword – 用脫衣女幫助檢測密碼強度

前端參考集

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

Codrops – Useful resources

Front-end Code Standards & Best Practices