前端组件库

0. 前端自动化(Workflow)

• 前端构建工具

• 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预处理器

• 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

• Materialize - 一个基于 Material Design 的 CSS 框架

• Framework7

• mui

• ionic framework

• Fries

• jQuery Mobile

• App.js

2. JavaScript 框架汇总

• JavaScript 框架

• react

• Angular

• jQuery

• Backbone.js

• ember.js

• Ractive.js

• KISSY

• Zepto.js

• Vanilla JS

• Avalon

• T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架

• jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用

• 轻量级JavaScript框架

• Min.js - Super minimal selector and event library

• skel.js - A lightweight responsive framework

• Sprint.js - 一个高性能、小体积的 DOM 操作库

• knockout

• PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API

• JavaScript 工具库

• underscore.js

• Underscore.string.js字符串操作库

• functional.js

• Lo-Dash - A JavaScript utility library

• Lazy.js - a functional utility library for JavaScript

• Fn.js

• Way.js - 双向数据绑定库

• Keys.js - 应用快捷键

• simple-hotkeys

• Mousetrap - 键盘快捷键操作

• Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)

• Can.js

• boiler - a utility library that makes tasks in JavaScript easier

3. 前端游戏框架

• cocos2d-html5

• Egret Engine

• LimeJS

• EaselJS

• three.js

• AlloyStick

• The-Best-JS-Game-Framework

• CanvasEngine

• Quintus

• cutjs

4. ui组件库

• GMU - 基于zepto的ui组件库，适用于移动端

• FrozenUI - 腾讯移动端组件库

• NEC

• NEJ

• Pure CSS Components

• magic-of-css

• Primer - The CSS toolkit and guidelines that power GitHub

5. 基础模版

• 浏览器统一(Cross Browser)

• HTML5 BOILERPLATE

• Modernizr

• Normalize.css

• cssFx - 为CSS3自动生成浏览器前缀

• -prefix-free - Break free from CSS prefix hell

• 响应式

• Responsive - 响应式布局

• Enquire.js - Awesome Media Queries in JavaScript

• Free Wall - 创建桌面，移动和平板的动态网格布局

6. 排版

• yue.css

• typo.css

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

7. 网格系统

• grid

• Flexbox Grid

• MasonJS - creating a perfect grid

8. 路由和链接(Routing And URLs)

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

• jquery-pjax - pushState+ajax

• jquery-address - Deep Linking

• page.js - Micro client-side router

• crossroads.js

• hash.js

• path.js

• director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)

• URI.js

• Roadcrew.js

• SpeakingURL

9. UA 识别

• detector

10. 表单处理

10.1 表单验证(Form Validator)/表单提示

• Validator

• Parsley

• jquery.form.js - jQuery Form Plugin

• Validform

• validator.js

• jquery-validation - jQuery Validation Plugin

• formvalidator.js

• Fort.js – 表单填写进度提示

• mailcheck - 用于检测email地址的域名

• Floatlable.js - 输入时显示placeholder文本

• jQuery Label Better

• validator.js

10.2 < select > 相关

• Chosen

• Select2

• bootstrap-select

10.3 单选框/复选框相关

• iCheck - 增强复选框和单选按钮

• Switchery - iOS 7 style switches for your checkboxes

10.4 上传组件

• jQuery File Upload Plugin

• 百度 Web Uploader

• uploadify

• Plupload

• Fine Uploader

• arale-upload - 轻量级 iframe and html5 file uploader

• Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)

• flow.js

• localResizeIMG3 - 前端本地客户端压缩图片，兼容IOS，Android，PC

• simple-uploader

10.5 日期选择

• Both Date and Time picker widget based on twitter bootstrap

• GMU 日历组件

• Mobiscroll

• Pikaday - 日期选择器

10.6 取色

• Colorpicker plugin for Twitter Bootstrap

10.7 标签插件(Tag)

• TaggingJS – 可以灵活定制的 jQuery 标签系统插件

• selectize.js

• Bootstrap Tags Input

10.8 自动完成插件

• At.js - 一个Twitter/微博样式的@自动完成插件

• jquery-textcomplete - 智能搜索提示框/自动补全

• typeahead.js - a fast and fully-featured autocomplete library

10.9 样式修正

• autosize - 使文本框自动适应所输入的内容

11. 图表绘制/图形库(Graphics)

• 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

• Bonsai - 一个功能强大的JavaScript图形库

• epoch - 数据图表可视化

• Vis.js

• Coutour.js

• zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！

12. 日期格式化 & 时间轴

• Moment.js - 日期处理

• Smart Time Ago - 显示相对时间

• timeline.js

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

• iSlider - 移动端滑动组件

• OwlCarousel - create beautiful responsive carousel slider

• jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件

• Glide.js - 轻量级滑块组件

• PhotoSwipe

• TouchSlide - 触屏滑动特效(焦点图,Tab切换)

13.2 瀑布流

• Masonry

• Isotope - Filter & sort magical layouts

13.3 懒加载/加载监听/预加载

• imagesLoaded

• Echo.js

• lazySizes

• jquery_lazyload

• BttrLazyLoading

• lazyload.js

• layzr.js - 一个小巧快速的图片懒加载库

• waitForImages - 图片加载监听库

• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能

• bindWithDelay - jQuery Plugin For Delayed Event Execution

• TypeWatch - 停止输入时调用

13.4 图片轮播(幻灯片)/图片展示

• FlexSlider

• unslider - 小而美的轮播库

• prettyPhoto

• FlickerPlate - A cool jQuery plugin that lets you flick through content.

• Holder.js - Client-side image placeholders.

• RowGrid.js - 在径直的行里放置图片

• ImageLightbox.js - 灯箱效果

• JQuery Panorama Viewer - 全景视图

• Intense Images - 全屏查看图片

• Picturefill - 一个响应式图片 JS 插件

• zoom.js - 一个 jQuery 图片放大插件

• watermarkjs - 一个在浏览器中添加图片水印的 JS 库

13.5 图片剪裁/图片处理

• Jcrop - Image Cropping Plugin for jQuery

• croppic - an image cropping jquery plugin

• jQuery.eraser - 图像擦除插件

• DD_belatedPNG.js - 让IE6支持透明PNG图片

• FocusPoint.js 实现图片的响应式裁剪

• imgareaselect

13.6 进度条/加载动画(Loading)

• NProgress.js

• progress.js

• Pace - Automatic page load progress bar

• jquery-ajax-progress

• nanobar - Very lightweight progress bars.

• waitMe - 很漂亮的loading效果

• spin.js

• sonic.js

• fakeLoader.js

13.7 侧滑插件(offcancas)

• pushy - a responsive off-canvas navigation menu

• Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

13.8 菜单(Menu)

• SuperFish - 基于jQuery的级联下拉菜单

• Responsive Nav - 响应式导航

13.9 滚动侦测(ScrollSpy)

• jquery-scrollspy(1)

• jquery-scrollspy(2)

• Waypoints

• ScrollMagic - 像进度条一样使用滚动条

13.10 滚动加载更多/下拉刷新(Pull to Refresh)

• jScroll

• web-pull-to-refresh

• pulltorefresh

• RubberBand.js - add pull-to-refresh functionality to any page.

13.11 平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll

• jquery.scrollTo - 平滑滚动到页面指定位置

• smooth-scroll

• scrollUp

• elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件

13.12 全屏滚动/全屏切换

• pagePiling.js - 全屏滚动效果

• fullPage.js

• onepage-scroll

• zepto.fullpage - 专注于移动端的fullPage.js

• screenfull.js - 切换全屏模式

13.13 分屏滚动

• multiscroll.js - 分屏滚动效果

13.14 转场效果

• Animsition - 页面切换时的过渡效果

13.15 固定元素(Sticky)

• sticky - jQuery Plugin for Sticky Objects

• jquery.pin - 固定页面元素

• stickUp

• Slinky.js - 堆叠头部创建滑动导航列表

13.16 触控事件

• Hammer.js

• jquery.event.move.js

13.17 拖拽组件

• Draggabilly - 专注于拖拽功能的 JS 库

• dragula - 一个让拖放操作变简单的 JS 库

• GridList - 可拖拉的响应式列表库

13.18 隐藏或展示页面元素

• Headroom.js - 在不需要页头时将其隐藏

• Readmore.js - 内容显示与隐藏插件

• oriDomi - 像指一样折叠Dom元素

13.19 滚动条(Scrollbar)

• jScrollPane

• jquery.scrollbar

• perfect-scrollbar

• nanoScrollerJS

• tinyscrollbar

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)

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

• Transit - CSS transitions and transformations for jQuery

• WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)

• AniJS - A Library to Raise your Web Design without Coding

• 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

• Velocity.js - 加速JavaScript动画

• lenticular.js - 响应倾斜或鼠标事件创建图片动画

• jQuery Interactive 3D - Create a 3D interactive object using images

• AnimateScroll - A Simple jQuery Plugin for Animating Scroll

• Blast.js - 把动画和样式注入到文本中

• Bounce.js - CSS3 关键帧动画

• Sticker.js - create a Sticker Effect

• scrollReveal.js - 元素进入可视区域自动触发设置好的动画

• stroll.js - CSS3 list scroll effects

• jQuery Easing - 动画效果扩展

• animations - CSS3 ANIMATION CHEAT SHEET

• iconate.js：将 icons 增加动画效果的 JS 库

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. 通知组件/弹框组件/模态窗口

• Notify.js(Web Notifications API)

• alertify.js

• AlertifyJS

• SweetAlert

• Messenger - 非常酷的弹框组件

• PNotify

• Notify.js - A simple, versatile notification library

• Remodal - 模态窗口插件

20. 提示控件(Tooltips)

• qTip2 - Pretty powerful tooltips

• tooltip - CSS Tooltips

• tooltipster - A jQuery tooltip plugin

• grumble.js - 气泡形状的提示（Tooltip）控件

• Ouibounce - 离站提示控件

• intro.js - 一个创建引导式网站介绍功能的 JS 库

21. 对话框/遮罩层/弹出层(lightbox)

• fancyBox - Fancy jQuery lightbox

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

• Colorbox - a jQuery lightbox

• artDialog - 经典的网页对话框组件

• DialogEffects

• jQuery blockUI - Page or element overlay

22. 文档/表格/PDF

• Backgrid.js - 强大的表格组件

• handsontable - 在线可编辑excel表格

• jQuery Bootgrid - 用于ajax生成动态表格

• DataTables - Table plug-in for jQuery

• PDF.js - 一个 JavaScript 编写的 PDF 阅读器

• jsPDF - Generate PDF files in JavaScript

• Recline.js - 灵活操作和展示数据

• Dynatable - 交互式表格插件

• fattable - 创建无限滚动无限行列数的表格

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

• Buzz - A Javascript HTML5 Audio library

• MediaElement.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 - 简单快速的富文本编辑器

• BachEditor - 一个有情怀的编辑器

• TinyMCE

• bootstrap-markdown

• marked - markdown解析器

• Markdown Plus

• Editor.md - 开源在线Markdown编辑器

• stackedit

• Redactor Text Editor

• micromarkdown.js - 轻量级的md解析器

28. 内容提取(Readability)

• Readability

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

29. 颜色(CSS Colors)/SVG/Canvas

• CSS Colours

• SVGeneration

• SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器

• Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素

• Seen.js - 渲染3D场景为SVG或者HTML Canvas

30. 选项卡(Tabs)

• Easy Responsive Tabs to Accordion

• Responsive-Tabs

• ion.tabs - jQuery tabs plugin

• jQuery-EasyTabs

• tabulous.js

31. 文本处理

• ZeroClipboard - 文本复制插件

• Bigfoot - 点击文章中的脚注弹窗显示

• Annotator - 文本注解插件，可以包括注释、标签、用户等

• Succinct - 用作截断多行文本,后面添加省略号

• Flowtype.js - 自动调整字体大小和行号

• flat-shadow

• FitText - A jQuery plugin for inflating web type

• shine.js - 实现漂亮阴影

• Type Rendering Mix - 文本渲染引擎

• jquery-expander - 阅读更多

32. 布局(Layout)

• 分隔面板(Split Panel)

• split-pane

• jQuery UI Layout

33. 演示/幻灯片

• reveal.js - The HTML Presentation Framework

• bespoke.js - DIY Presentation Micro-Framework

• impress.js

34. 国际化(i18n)

• jquery-i18n

• i18next.js

• jsperanto.js

• jed.js

• messageformat.js

• Polyglot.js

35. 实用工具/其他插件

• jquery-cookie

• FastClick - 处理移动端 click 事件 300 毫秒延迟

• InstantClick - 预加载用户可能会点击的一些链接

• Async.js - 异步操作

• html2canvas - 实现纯JS网页截图

• jquery.qrcode.js - 生成二维码的 jQuery 插件

• nakedpassword - 用脱衣女帮助检测密码强度

• KityMinder - 脑图编辑工具

• MixitUp - 动画过滤和排序

• JQuery Tip Cards - 创建卡片交互的cards布局

• Fallback.js - JavaScript library for dynamically loading CSS and JS files.

• swfobject

• prettyprint.js - An in-browser JavaScript variable dumper

• Shepherd - 为应用创建用户指南

• RulersGuide.js - 类似PhotoShop标尺的js库

• Gremlins.js - Monkey 测试库

• RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具

前端开发工具

1. 开发工具

• Sublime Text

2. 调试工具

• Fiddler

• Weinre

• Rythem

3. 浏览器扩展(Chrome Extensions)

• Postman - REST Client

• Fiddler - Fiddler for Chrome Extension

• WEB前端助手(FeHelper)

• Web Developer

• Chrome Logger

• ColorZilla

• Code Cola

• 1px

• AlloyDesigner - 前端重构开发辅助工具

• Fontface Ninja

• PageSpeed Insights (by Google)

• HTTP Status

• Redirect Path

前端参考集

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

• frontend-dev-bookmarks

• Codrops - Useful resources

• Front-end Code Standards & Best Practices

• frontend-dev-bookmarks

• Airbnb 的 JavaScript 编码规范

• awesome-javascript