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