前端组件库
搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow)
- 前端构建工具
- 前端模块管理器
- 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 框架
- 轻量级JavaScript框架
- JavaScript 工具库
3. 前端游戏框架
- cocos2d-html5
- Egret Engine
- LimeJS
- EaselJS
- three.js
- AlloyStick
- The-Best-JS-Game-Framework
- CanvasEngine
- Quintus
4. ui组件库
5. 基础模版
6. 排版
7. 网格系统
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 识别
10. 表单处理
10.1 表单验证(Form Validator)
- Validator
- Parsley
- jquery.form.js – jQuery Form Plugin
- Validform
- validator.js
- formvalidator.js
- Fort.js – 表单填写进度提示
10.2 < select > 相关
10.3 单选框/复选框相关
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 日期选择
10.6 取色
10.7 标签插件(Tag)
10.8 自动完成插件
10.9 样式修正
11. 图表绘制
- Highcharts
- Chart.js – Simple HTML5 Charts using Canvas
- 百度 ECharts
- Chartist.js
- D3.js – A JavaScript visualization library for HTML and SVG.
12. 日期格式化
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 瀑布流
13.3 图片懒加载/加载监听
13.4 图片轮播/展示
13.5 图片剪裁/处理
13.6 进度条
13.7 侧滑插件(offcancas)
13.8 菜单(Menu)
13.9 滚动侦测(ScrollSpy)
13.10 滚动加载更多
13.11 平滑滚动插件(Smooth Scroll)
13.12 全屏滚动
13.13 分屏滚动
13.14 转场效果
13.15 固定元素(Sticky)
13.16 触控事件
13.17 拖拽组件
13.18 隐藏或展示页面元素
13.19 滚动条
13.20 视差滚动(Parallax Scrolling)
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. 本地存储
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. 文档/表格
23. 目录树插件
24. Ajax模块
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解析器
28. 内容提取(Readability)
29. 颜色(CSS Colors)/SVG
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
- frontend-dev-bookmarks
阅读详情 -> JingwenTian/awesome-frontend.