前端组件库
搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow)
前端构建工具
Yeoman – a set of tools for automating development workflowgulp – The streaming build systemgrunt – the JavaScript Task RunnerF.I.S – 前端集成解决方案前端模块管理器
Bower – A package manager for the webBrowserifyComponentDuoRequireJSSea.jscss预处理器
Less – Less is More , Than CSSSass – Syntactically Awesome Style SheetsStylus – Expressive, dynamic, robust CSS1. 前端框架(Frameworks)
BootstrapFoundationAmaze UISemantic UIPure CSStopcoatUIkitMaterial UIFramework7muiionic frameworkFriesjQuery Mobile2. JavaScript 框架汇总
JavaScript 框架
reactAngularjQueryBackbone.jsRactive.jsKISSYZepto.jsVanilla JSAvalon轻量级JavaScript框架
Min.js – Super minimal selector and event libraryskel.js – A lightweight responsive frameworkJavaScript 工具库
underscore.jsWay.js – 双向数据绑定库Keys.js – 应用快捷键3. 前端游戏框架
cocos2d-html5Egret EngineLimeJSEaselJSthree.jsAlloyStickThe-Best-JS-Game-FrameworkCanvasEngineQuintus4. ui组件库
GMUNECNEJPure CSS Componentsmagic-of-css5. 基础模版
HTML5 BOILERPLATEModernizrNormalize.cssResponsive – 响应式布局6. 排版
yue.csstypo.csschinese-copywriting-guidelines – 中文文案排版指南7. 网格系统
gridFlexbox Grid8. HTML5 API 应用
History.js – gracefully supports the HTML5 History/State APIsjquery-pjax – pushState+ajaxjquery-address – Deep LinkingNotify.js(Web Notifications API)9. UA 识别
detector10. 表单处理 10.1 表单验证(Form Validator)
ValidatorParsleyjquery.form.js – jQuery Form PluginValidformvalidator.jsformvalidator.jsFort.js – 表单填写进度提示10.2 < select > 相关
ChosenSelect2bootstrap-select10.3 单选框/复选框相关
iCheck – 增强复选框和单选按钮10.4 上传组件
jQuery File Upload Plugin百度 Web UploaderUploadifyPluploadarale-upload – 轻量级 iframe and html5 file uploaderDropzone.js – drag’n’drop library拖拽上传flow.js10.5 日期选择
Both Date and Time picker widget based on twitter bootstrapGMU 日历组件Mobiscroll10.6 取色
Colorpicker plugin for Twitter Bootstrap10.7 标签插件(Tag)
TaggingJS – 可以灵活定制的 jQuery 标签系统插件10.8 自动完成插件
At.js – 一个Twitter/微博样式的@自动完成插件jquery-textcomplete – 智能搜索提示框/自动补全10.9 样式修正
autosize – 使文本框自动适应所输入的内容11. 图表绘制
HighchartsChart.js – Simple HTML5 Charts using Canvas百度 EChartsChartist.jsD3.js – A JavaScript visualization library for HTML and SVG.
intro-to-d3 – a D3.js tutorial12. 日期格式化
Moment.jsSmart Time Ago – 显示相对时间13. 页面交互 13.1 Slider
slick – the last carousel you’ll ever needSwipe – the most accurate touch sliderSwiper – Most modern mobile touch slideriscroll – Smooth scrolling for the webOwlCarousel – create beautiful responsive carousel sliderjquery-mousewheel – jQuery鼠标滚轮滚动侦测插件13.2 瀑布流
MasonryIsotope – Filter & sort magical layouts13.3 图片懒加载/加载监听
imagesLoadedEcho.jslazySizesjquery_lazyloadlazyload.jswaitForImages – 图片加载监听库13.4 图片轮播/展示
FlexSliderunslider – 小而美的轮播库prettyPhoto13.5 图片剪裁/处理
croppic – an image cropping jquery pluginjQuery.eraser – 图像擦除插件13.6 进度条
NProgress.jsprogress.jsPace – Automatic page load progress barjquery-ajax-progress13.7 侧滑插件(offcancas)
pushy – a responsive off-canvas navigation menu13.8 菜单(Menu)
SuperFish – 基于jQuery的级联下拉菜单Responsive Nav – 响应式导航13.9 滚动侦测(ScrollSpy)
jquery-scrollspy(1)jquery-scrollspy(2)Waypoints13.10 滚动加载更多
jScroll13.11 平滑滚动插件(Smooth Scroll)
jquery-smooth-scrolljquery.scrollTo – 平滑滚动到页面指定位置13.12 全屏滚动
pagePiling.js – 全屏滚动效果13.13 分屏滚动
multiscroll.js – 分屏滚动效果13.14 转场效果
Animsition – 页面切换时的过渡效果13.15 固定元素(Sticky)
sticky – jQuery Plugin for Sticky Objectsjquery.pin – 固定页面元素13.16 触控事件
Hammer.jsjquery.event.move.js13.17 拖拽组件
Draggabilly – 专注于拖拽功能的 JS 库13.18 隐藏或展示页面元素
Headroom.js – 在不需要页头时将其隐藏Readmore.js – 内容显示与隐藏插件13.19 滚动条
jScrollPane13.20 视差滚动(Parallax Scrolling)
parallax.jsjparallax14. 代码高亮插件/代码编辑器
google-code-prettifyhighlight.jsRainbowACECodeMirrorCrayon Syntax Highlighterprism – Lightweight, robust, elegant syntax highlighting.15. UI Icon 组件
Font AwesomeGlyphter: The SVG Font MachinePerfect IconsiconizrCikonss – 纯CSS实现的响应式IconSimple Icons16. 动画
animate.css – A cross-browser library of CSS animations.Transit – CSS transitions and transformations for jQueryMove.js – 简化CSS3动画的JS库ScrollMe – 在网页中加入各种滚动动画效果Effeckt.css – A Performant Transitions and Animations LibraryNEC动画库csshake – CSS classes to move your DOMmagic – CSS3 Animations with special effectsHover.csscss-loadersSpinKit17. 本地存储
cross-storage – Cross domain local storagelocalForagepouchdbbasil.js18. 模板引擎
mustache.jsHandlebars.jsartTemplatebaiduTemplateJSRenderEJS – JavaScript TemplatesJuicer – A Light Javascript Templete Engine.Tempojson2html19. 通知组件/弹框组件
alertify.jsAlertifyJSSweetAlertMessenger – 非常酷的弹框组件PNotifyNotify.js – A simple, versatile notification library20. 提示控件(Tooltips)
qTip2 – Pretty powerful tooltipstooltip – CSS Tooltipstooltipster – A jQuery tooltip plugingrumble.js – 气泡形状的提示（Tooltip）控件Ouibounce – 离站提示控件21. 对话框/弹出层(lightbox)
fancyBox – Fancy jQuery lightboxjquery-lightbox – The popular lightbox script, ported to jQueryColorbox – a jQuery lightboxartDialog – 经典的网页对话框组件DialogEffects22. 文档/表格
handsontable – 在线可编辑excel表格jQuery Bootgrid – 用于ajax生成动态表格DataTables – Table plug-in for jQuery23. 目录树插件
zTree_v3 – jQuery Tree Pluginjstree – jQuery Tree Pluginfancytree – Tree plugin for jQuery24. Ajax模块
fetch – A window.fetch JavaScript polyfillreqwest – browser asynchronous http requestsminAjax.js25. 音频/视频
jPlayer – HTML5 Audio & Video for jQueryvideo.js – HTML5 & Flash video playerAccessible HTML5 Video Player – PayPal 开源的 HTML5 视频播放器Clappr – 开源的Web视频播放器Plyr – A simple HTML5 media playerFitVids.js – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.BigVideo.js – The jQuery Plugin for Big Background VideoBigScreen – A simple library for using the JavaScript Full Screen APIVide – 视频背景winamp2-js26. 按钮
Buttons – A CSS button libraryButtonComponentMorphProgressButtonStylesCreativeButtonsCSS3 buttonsjquery.onoff – Interactive, accessible toggle switches for the web.27. 富文本编辑器/Markdown编辑器/Markdown解析器
Simditor – 简单快速的富文本编辑器BachEditor – 一个有情怀的编辑器bootstrap-markdownmarked – markdown解析器28. 内容提取(Readability)
Readabilityjson.human.js – Json Formatting for Human Beings29. 颜色(CSS Colors)/SVG
CSS ColoursSVGeneration30. 实用工具/其他插件
jquery-cookieFastClick – 处理移动端 click 事件 300 毫秒延迟screenfull.js – 全屏切换Async.js – 异步操作html2canvas – 实现纯JS网页截图jquery.qrcode.js – 生成二维码的 jQuery 插件FocusPoint.js 实现图片的响应式裁剪DD_belatedPNG.js – 让IE6支持透明PNG图片nakedpassword – 用脱衣女帮助检测密码强度PDF.js – 一个 JavaScript 编写的 PDF 阅读器
前端参考集
frontend-guidelines – Some HTML, CSS and JS best practices.Codrops – Useful resourcesFront-end Code Standards & Best Practicesfrontend-dev-bookmarks