前端组件库

搭建web app常用的样式/组件等收集列表(移动优先)

一个常用的PHP类库, 资源以及技巧列表 awesome-php 推荐

0. 前端自动化(Workflow)

前端构建工具
- Webpack - module bundler
- Yeoman - a set of tools for automating development workflow
- gulp - The streaming build system
  - use-gulp
- grunt - the JavaScript Task Runner
- F.I.S - 前端集成解决方案
- Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集
- node-prune - Remove unnecessary files from node_modules
前端模块管理器
css预处理器
前端性能分析工具
- analyze-css - CSS 选择器的复杂度和性能分析器

1. 前端UI框架(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
Office UI Fabric - 微软 Office 前端团队的框架
Polymer - Google发布的Web组件构建框架
Layui - 经典模块化前端UI框架
wired-elements - 一个有手绘效果的网页组件库
mustard-ui - 一个简洁、好看的 CSS 框架，压缩后只有5.28KB
taro-ui - 一款基于 Taro 框架开发的多端 UI 组件库
alibaba/ice - 飞冰是一套基于 React 的中后台应用解决方案

2. JavaScript 框架汇总

3. 前端游戏框架

cocos2d-html5
Egret Engine
LimeJS
EaselJS
three.js
AlloyStick
The-Best-JS-Game-Framework
CanvasEngine
Quintus
Stage.js
phaser - 一个快速、免费、开源的 HTML5 游戏框架
p2.js - web 物理引擎

4. ui组件库(CSS Framework)

WeUI - 微信官方UI库
- jQuery WeUI - WeUI的jQuery版本
GMU - 基于zepto的ui组件库，适用于移动端
FrozenUI - 腾讯移动端组件库
NEC - 更好的CSS方案
NEJ - 更好的JS解决方案
Pure CSS Components
magic-of-css
Primer - The CSS toolkit and guidelines that power GitHub
light7 - A Light and easy to use UI Lib
Spectre.css - 轻量、响应式的现代 CSS 框架
mobi.css - 一个轻量、灵活的移动端 CSS 框架

5. 基础模版

浏览器统一(Cross Browser)
响应式
- Responsive - 响应式布局
- Enquire.js - Awesome Media Queries in JavaScript
- Free Wall - 创建桌面，移动和平板的动态网格布局
适配方案

6. 排版

7. 网格系统

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

9. UA 识别

10. 表单处理

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

10.2 < input > 相关

cleave.js - 格式化你的输入内容

10.3 < select > 相关

10.4 单选框/复选框相关

10.5 上传组件

10.6 日期选择

tui.calendar - A JavaScript calendar that everything you need.
Both Date and Time picker widget based on twitter bootstrap
GMU 日历组件
Mobiscroll
Pikaday - 日期选择器
价格日历
airbnb/react-dates - Airbnb 的日期选择器

10.7 取色

10.8 标签插件(Tag)

10.9 自动完成插件

10.10 样式修正

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

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

apache/incubator-echarts - 百度开源可视化库
alibaba/BizCharts - 阿里巴巴桌面端商业统计图表解决方案
antvis/f2 - 蚂蚁金服移动端可视化解决方案
Highcharts
Chart.js - Simple HTML5 Charts using Canvas
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
ecomfe/zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
apexcharts.js - Interactive and Modern SVG Charts
mapbox/mapbox-gl-js - MapboxGL 基于 WebGL 使用矢量切片和 Mapbox 样式渲染交互式地图
Kujiale-Mobile/Painter - 小程序生成图片库
canvg/canvg - Javascript SVG parser and renderer on Canvas

12. 日期格式化 & 时间轴

Moment.js - 日期处理
Day.js - 日期处理
Smart Time Ago - 显示相对时间
timeline.js
timeago.js
date-utils - Date Pollyfills for Node.js and Browser

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切换)
better-scroll - inspired by iscroll, and it supports more features and has a better scroll perfermance

13.2 瀑布流

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

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

13.5 图片剪裁/图片处理/图片转换

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

13.7 侧滑插件(offcancas)

13.8 菜单(Menu)

13.9 滚动侦测(ScrollSpy)

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)

13.12 全屏滚动/全屏切换

13.16 触控事件

13.17 拖拽组件

13.18 隐藏或展示页面元素

13.19 滚动条(Scrollbar)

13.20 视差滚动(Parallax Scrolling)

13.21 缩放 (Zooming)

14. 代码高亮插件/代码编辑器

15. 字体图标 ( Font Icon )

bytedance/IconPark
FortAwesome/Font-Awesome - 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式
simple-icons/simple-icons - PNG and SVG icons for popular brands
lipis/flag-icon-css - 所有国家国旗的 icon 库

16. 动画(Animate)

17. 本地存储

cross-storage - Cross domain local storage
localForage
pouchdb
basil.js
Neurosync - JavaScript 本地离线 ORM 库
LokiJS - 性能优先的 JavaScript 内存数据库
turbolinks - Javascript pushState

18. 模板引擎

doT.js
mustache.js
Handlebars.js
artTemplate
baiduTemplate
JSRender
EJS - JavaScript Templates
Juicer - A Light Javascript Templete Engine.
Tempo
json2html
Hogan.js - JavaScript templating from Twitter.
Dust.js - Linkedin维护的项目
nunjucks - A powerful templating engine

19. 通知组件/弹框组件/模态窗口

20. 提示控件(Tooltips)

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

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 - 创建无限滚动无限行列数的表格
Clusterize.js - 一个轻松显示大数据集的 JS 插件
Uniform -表单美化插件
tableExport - 导出HTML Table为 Excel、PDF 等
SheetJS/js-xlsx - 生成Excel文件并下载

23. 目录树插件

24. 前后端交互

24.1 Ajax模块

fetch - A window.fetch JavaScript polyfill
reqwest - browser asynchronous http requests
ajax - Standalone AJAX library
then-request
browser-request
superagent
minAjax.js
qwest - 第三方的Ajax库
axios - Promise based HTTP client for the browser and node.js
whatwg-fetch
jsonp - A simple JSONP implementation
isomorphic-fetch - Isomorphic WHATWG Fetch API, for Node & Browserify

24.2 SSE (Server-Sent Events)

SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据.

EventSource

24.3 Web Sockets

25. 音频/视频

videojs/video.js - HTML5 & Flash video player
videojs/http-streaming - HLS, DASH, and future HTTP streaming protocols library for video.js
video-dev/hls.js - JavaScript HLS client using Media Source Extension
Chimeejs/chimee - 奇舞团开源的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式 http://chimee.org/
paypal/accessible-html5-video-player - PayPal 开源的 HTML5 视频播放器
clappr/clappr - 开源的Web视频播放器
sampotts/plyr - A simple HTML5, YouTube and Vimeo player
captbaritone/webamp
mediaelement/mediaelement - HTML5 <video> and <audio> player
surmon-china/vue-video-player - 适用于 Vue 的 video.js 播放器组件
jplayer/jPlayer - HTML5 Audio & Video for jQuery
davatron5000/FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
dfcb/BigVideo.js - The jQuery Plugin for Big Background Video
bdougherty/BigScreen - A simple library for using the JavaScript Full Screen API
vodkabears/Vide - 视频背景组件
jaysalvat/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.
Flipside - 一个能过渡到对话框的按钮
react-particle-effect-button - 一个 React 组件，按钮点击后会像粒子状消解

27. 富文本编辑器/Markdown编辑器/Markdown解析器

bustle/mobiledoc-kit - 基于mobiledoc数据格式开发所见即所得的 (WYSIWYG) 编辑器
Simditor - 简单快速的富文本编辑器
BachEditor- 一个有情怀的编辑器
TinyMCE
bootstrap-markdown
marked - markdown解析器
Markdown Plus
Editor.md - 开源在线Markdown编辑器
stackedit
Redactor Text Editor
micromarkdown.js - 轻量级的md解析器
wangEditor - 支持移动端的轻量级web富文本框
CKEditor - 可视化 HTML 编辑器
quilljs/quill - 富文本编辑器
ianstormtaylor/slate - 一个完全可定制的富文本编辑器
notadd/neditor - 基于 ueditor的更现代化的富文本编辑器，支持HTTPS
ProseMirror/prosemirror-view - In-browser semantic rich text editing
facebook/lexical - Facebook开源的可扩展的文本编辑器框架

28. 内容提取(Readability)

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

30. 选项卡(Tabs)

31. 文本处理

ZeroClipboard - 文本复制插件
clipboard.js
Bigfoot - 点击文章中的脚注弹窗显示
Annotator - 文本注解插件，可以包括注释、标签、用户等
Succinct - 用作截断多行文本,后面添加省略号
Flowtype.js - 自动调整字体大小和行号
flat-shadow
FitText - A jQuery plugin for inflating web type
shine.js - 实现漂亮阴影
Type Rendering Mix - 文本渲染引擎
jquery-expander - 阅读更多
Typed.js - 输入模拟插件
jQuery.dotdotdot - 多行文本溢出显示省略号
baffle.js - 文本互动效果
eligrey/FileSaver.js - 文件保存的 JavaScript 库

支持多种常见的文件存储格式：xls、txt、png 等。它可以方便的把数据转成文件，然后供用户下载。示例代码：
```
// 存储文本
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
```

32. 布局(Layout)

分隔面板(Split Panel)
- split-pane
- jQuery UI Layout

33. 演示/幻灯片

34. 国际化(i18n)

35. 邮件模板(Email Templates)

responsive-html-email-template

36. 移动端优化(Optimizing Mobile Performance)

37. HTTP请求相关

pako - HTTP 请求正文压缩
- 参考阅读: 如何压缩 HTTP 请求正文
- HTTP 请求正文压缩 DEMO

38. 下载组件

39. 加密/转码

crypto-js - JavaScript library of crypto standards.
ulid - 生成UUID类库
RSA in JavaScript - 用RSA加密实现Web数据加密传输
nanoid - 一款非常小巧的唯一ID生成工具
harmankang/Lab62 - 一个简单的人类可读的随机 ID 生成库
dropbox/zxcvbn - 评估密码强度的 JS 库，强度越强，密码越不容易破解

40. 调试

debug - A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
vConsole - 一个针对手机网页的前端 console 调试面板

41. 实用工具/其他插件

jquery-cookie
JavaScript Cookie
InstantClick - 预加载用户可能会点击的一些链接
Async.js - 异步操作
jquery.qrcode.js - 生成二维码的 jQuery 插件
qrcodejs - JS生成QRCode的库
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 模型的原型工具
favico.js - 动态改变浏览器标签栏中的网站图标
pageguide - 网页向导
jsdiff - js diff 算法
github-contributions-chart - 类 Github 的贡献日历网格
leizongmin/js-xss - 根据白名单过滤 HTML(防止 XSS 攻击)
cure53/DOMPurify - HTML过滤防止 XSS 攻击
ajv-validator/ajv - 校验json-schema数据格式

ES6( ECMAScript 2015 )

ES6转码器(ES6 to ES5)

Babel - 一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
babelify - 将babel引入到Gulp, Grunt, npm run等构建过程
traceur-compiler - Traceur is a JavaScript.next-to-JavaScript-of-today compiler

ES6入门

ECMAScript 6入门 - 阮一峰老师的开源的JavaScript语言教程
Learn ES2015
ES6 - New features Overview & Comparison
ES6 Overview in 350 Bullet Points
es6features

设计模式( JavaScript Patterns )

在线工具( Online Tools )

前端开发工具

1. 开发工具

2. 调试工具

Fiddler
Weinre
Rythem
csscss - 用于检查css代码冗余
FECS - 基于 Node.js 的前端代码检查工具
JSON Server - 模拟 API
swagger-ui - 基于REST的API测试/文档
graphqurl - curl for GraphQL with autocomplete, subscriptions and GraphiQL.

3. 模拟数据( Mock )

JSONPlaceholder
json-server - Get a full fake REST API
lowdb - A small local JSON database powered by lodash
Mock.js - 一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
yapi - YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台

4. 接口管理

RAP - Web接口管理工具，开源免费，接口自动化，MOCK数据自动生成，自动化测试，企业级管理

5. 浏览器扩展(Chrome Extensions)

6. 在线工具

图片在线优化工具

Font Icon 在线生成工具

IcoMoon App
Glyphter - The SVG Font Machine
Free Perfect Icons - 矢量图 svg 图标下载

前端参考集

i0natan/nodebestpractices - Node.js 最佳实践
frontend-guidelines - Some HTML, CSS and JS best practices.
frontend-dev-bookmarks
Codrops - Useful resources
Front-end Code Standards & Best Practices
awesome-javascript
Front-end-tutorial - 前端涉及的所有知识体系
awesome-vue
前端编码规范( Standard Style )
- Airbnb 的 JavaScript 编码规范
- JavaScript Standard Style
- clean-code-javascript - javascript 编码风格指南
- spec - 百度前端团队代码规范
cheatsheet - 标签的内容清单
Front-End-Checklist - The perfect Front-End Checklist for modern websites and meticulous developers http://frontendchecklist.com
30-seconds-of-code
30-seconds-of-css
project-guidelines - JavaScript工程项目的一系列最佳实践策略
react-in-patterns - React 模式
PWA-Book-CN - Progressive Web Apps (PWA) 中文版
javascript-algorithms - JavaScript 算法与数据结构
vue-design - Vue技术内幕
css-protips - CSS 专业技巧
Front-End-Performance-Checklist - 前端性能优化清单
33-js-concepts - 每个 JavaScript 工程师都应懂的33个概念「翻译」
joshbuchea/HEAD - HTML 网页的 head 元素指南
Airbnb Engineering & Data Science - Airbnb 前端开源项目
storybooks/storybook - 各大公司的 UI 组件库的 Storybook 展示 https://storybook.js.org/examples/
LEARN REGEX THE EASY WAY - 正则表达式学习

书籍( Frontend-related Books )

Front-End Developer Handbook 2016
Front-End Developer Handbook 2017
Front-End Developer Handbook 2018
前端工程师手册
前端工程师手册 - 包括前端开发实践、学习前端开发、前端开发工具
D3 in Depth - 可视化引擎 D3 的教程
Canvas: Draw on the web - HTML5 Canvas 教程
Node.js 最佳实践

JingwenTian/awesome-frontend

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Error
Looks like something went wrong!

Packages