前端组件库大合集-必备收藏
-
前端组件库
搭建web app常用的样式/组件等收集列表(移动优先)
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
- Framework7
- mui
- ionic framework
- Fries
- jQuery Mobile
2. JavaScript 框架汇总
- JavaScript 框架
- react
- 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
- Responsive – 响应式布局
6. 排版
- yue.css
- typo.css
- chinese-copywriting-guidelines – 中文文案排版指南
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 标签系统插件
10.8 自动完成插件
- At.js – 一个Twitter/微博样式的@自动完成插件
- jquery-textcomplete – 智能搜索提示框/自动补全
10.9 样式修正
- autosize – 使文本框自动适应所输入的内容
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
- OwlCarousel – create beautiful responsive carousel slider
- jquery-mousewheel – jQuery鼠标滚轮滚动侦测插件
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
- jQuery.eraser – 图像擦除插件
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
- jquery.event.move.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
- 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. 对话框/弹出层(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
- jquery.onoff – Interactive, accessible toggle switches for the web.
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 – 用脱衣女帮助检测密码强度
- PDF.js – 一个 JavaScript 编写的 PDF 阅读器
前端参考集
- frontend-guidelines – Some HTML, CSS and JS best practices.
- Codrops – Useful resources
- Front-end Code Standards & Best Practices
- frontend-dev-bookmarks
- 前端构建工具