awesome-frontend

A curated list of amazingly awesome frontend libraries, resources and shiny things.
https://github.com/JingwenTian/awesome-frontend

Last synced: 4 days ago
JSON representation

0. 前端自动化(Workflow)
- Duo
- gulp - The streaming build system
- grunt - the JavaScript Task Runner
- Bower - A package manager for the web
- Browserify
- Duo
- RequireJS
- Sea.js
- Less - Less is More , Than CSS
- Sass - Syntactically Awesome Style Sheets
- Webpack - module bundler
- Yeoman - a set of tools for automating development workflow
- use-gulp
- Duo
- Duo
1. 前端UI框架(Frameworks)
- Foundation
- Amaze UI
- Pure CSS
- Material UI
- Framework7
- ionic framework
- jQuery Mobile
- App.js
- Polymer - Google发布的Web组件构建框架
- Layui - 经典模块化前端UI框架
- wired-elements - 一个有手绘效果的网页组件库
- Pure CSS
2. JavaScript 框架汇总
- Element - 基于 Vue 2.0 构建了一套完整的桌面 UI 组件库
- preact - React 的 3kb 轻量化方案，拥有同样的 ES6 API
- Vanilla JS
- Can.js
- Flapjax - 一个支持FRP的JavaScript框架
- Electron - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
- React Native - 使用JavaScript和React构建原生手机APP
- meili/minui - 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化
- Underscore.string.js字符串操作库
- functional.js
3. 前端游戏框架
- Egret Engine
4. ui组件库(CSS Framework)
- WeUI - 微信官方UI库
- NEC - 更好的CSS方案
- NEJ - 更好的JS解决方案
- Pure CSS Components
- Primer - The CSS toolkit and guidelines that power GitHub
- light7 - A Light and easy to use UI Lib
- mobi.css - 一个轻量、灵活的移动端 CSS 框架
5. 基础模版
- MetaHandler.js：移动端适配各种屏幕无痛工具脚本
- 参考: 使用Flexible实现手淘H5页面的终端适配
- flexible demo 1
- flexible demo 2
10. 表单处理
- 10.1 表单验证(Form Validator)/表单提示
- 10.5 上传组件
  - Fine Uploader
  - Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)
- 10.6 日期选择
  - tui.calendar - A JavaScript calendar that everything you need.
  - GMU 日历组件
  - Pikaday - 日期选择器
  - API文档
  - DEMO
  - airbnb/react-dates - Airbnb 的日期选择器
- 10.8 标签插件(Tag)
  - selectize.js
- 10.9 自动完成插件
  - algolia/autocomplete.js - 自动补全插件
  - jquery-textcomplete - 智能搜索提示框/自动补全
11. 图表绘制/图形库(Graphics)
- 10.10 样式修正
  - apache/incubator-echarts - 百度开源可视化库
  - Highcharts
  - Chart.js - Simple HTML5 Charts using Canvas
  - D3.js - A JavaScript visualization library for HTML and SVG.
  - epoch - 数据图表可视化
12. 日期格式化 & 时间轴
- 10.10 样式修正
  - Moment.js - 日期处理
  - Day.js - 日期处理
  - date-utils - Date Pollyfills for Node.js and Browser
13. 页面交互
- 13.1 Slider
  - Glide.js - 轻量级滑块组件
  - TouchSlide - 触屏滑动特效(焦点图,Tab切换)
- 13.2 瀑布流
  - Masonry
  - Isotope - Filter & sort magical layouts
- 13.4 图片轮播(幻灯片)/图片展示
- 13.5 图片剪裁/图片处理/图片转换
  - DD_belatedPNG.js - 让IE6支持透明PNG图片
  - react-cropper - React 的图片剪裁插件
- 13.6 进度条/加载动画(Loading)
  - NProgress.js
  - HubSpot/pace - Pace 是一个页面加载进度条工具
  - loading.io - 一个 Loading 图标的网站
- 13.12 全屏滚动/全屏切换
  - screenfull.js - 切换全屏模式
- 13.17 拖拽组件
  - GridList - 可拖拉的响应式列表库
- 13.18 隐藏或展示页面元素
  - Headroom.js - 在不需要页头时将其隐藏
14. 代码高亮插件/代码编辑器
- 13.20 视差滚动(Parallax Scrolling)
15. 字体图标 ( Font Icon )
- 13.20 视差滚动(Parallax Scrolling)
  - lipis/flag-icon-css - 所有国家国旗的 icon 库
16. 动画(Animate)
- 13.20 视差滚动(Parallax Scrolling)
  - animate.css - A cross-browser library of CSS animations.
  - NEC动画库
  - animations - CSS3 ANIMATION CHEAT SHEET
  - Bootstrap Hover Image Gallery
  - animate.css - A cross-browser library of CSS animations.
  - SVGA - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
  - SVGA - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
17. 本地存储
- 13.20 视差滚动(Parallax Scrolling)
  - localForage
18. 模板引擎
- 13.20 视差滚动(Parallax Scrolling)
  - Handlebars.js
20. 提示控件(Tooltips)
- 13.20 视差滚动(Parallax Scrolling)
  - tooltipster - A jQuery tooltip plugin
22. 文档/表格/PDF
- 13.20 视差滚动(Parallax Scrolling)
  - Backgrid.js - 强大的表格组件
  - jsPDF - Generate PDF files in JavaScript
  - Recline.js - 灵活操作和展示数据
  - SheetJS/js-xlsx - 生成Excel文件并下载
24. 前后端交互
- 24.1 Ajax模块
25. 音频/视频
- 24.3 Web Sockets
  - paypal/accessible-html5-video-player - PayPal 开源的 HTML5 视频播放器
  - surmon-china/vue-video-player - 适用于 Vue 的 video.js 播放器组件
  - MediaElement.js
26. 按钮
- 24.3 Web Sockets
  - Flipside - 一个能过渡到对话框的按钮
27. 富文本编辑器/Markdown编辑器/Markdown解析器
- 24.3 Web Sockets
28. 内容提取(Readability)
- 24.3 Web Sockets
  - Readability
29. 颜色(CSS Colors)/SVG/Canvas
- 24.3 Web Sockets
30. 选项卡(Tabs)
- 24.3 Web Sockets
  - tabulous.js
32. 布局(Layout)
- 24.3 Web Sockets
  - jQuery UI Layout
33. 演示/幻灯片
- 24.3 Web Sockets
  - bespoke.js - DIY Presentation Micro-Framework
  - impress.js
34. 国际化(i18n)
- 24.3 Web Sockets
  - messageformat.js
37. HTTP请求相关
- 24.3 Web Sockets
  - 参考阅读: 如何压缩 HTTP 请求正文
  - HTTP 请求正文压缩 DEMO
39. 加密/转码
- 24.3 Web Sockets
  - RSA in JavaScript - 用RSA加密实现Web数据加密传输
  - harmankang/Lab62 - 一个简单的人类可读的随机 ID 生成库
40. 调试
- 24.3 Web Sockets
  - debug - A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
  - vConsole - 一个针对手机网页的前端 console 调试面板
41. 实用工具/其他插件
- 24.3 Web Sockets
  - Shepherd - 为应用创建用户指南
  - pageguide - 网页向导
5. 浏览器扩展(Chrome Extensions)
- 24.3 Web Sockets
ES6入门
- 24.3 Web Sockets
  - ECMAScript 6入门 - 阮一峰老师的开源的JavaScript语言教程
  - Learn ES2015
  - ES6 - New features Overview & Comparison
  - ES6 Overview in 350 Bullet Points
  - javascript-patterns
  - Learning JavaScript Design Patterns
  - jsbin - Collaborative JavaScript Debugging App
  - jsfiddle
  - jsbeautifier - Online JavaScript beautifier
  - resume.github.com
1. 开发工具
- 24.3 Web Sockets
  - VSCode
  - Atom
  - Sublime Text
2. 调试工具
- 24.3 Web Sockets
  - Fiddler
  - Weinre
  - Rythem
  - FECS - 基于 Node.js 的前端代码检查工具
3. 模拟数据( Mock )
- 24.3 Web Sockets
  - JSONPlaceholder
6. 在线工具
- 24.3 Web Sockets
  - Kraken.io - Online Image Optimizer
  - TinyJPG - Compress JPEG images intelligently
  - IcoMoon App
  - Glyphter - The SVG Font Machine
  - Free Perfect Icons - 矢量图 svg 图标下载
  - Node.js 最佳实践
  - frontend-dev-bookmarks
  - Codrops - Useful resources
  - JavaScript Standard Style
  - 30-seconds-of-code
  - project-guidelines - JavaScript工程项目的一系列最佳实践策略
  - react-in-patterns - React 模式
  - javascript-algorithms - JavaScript 算法与数据结构
  - css-protips - CSS 专业技巧
  - Airbnb Engineering & Data Science - Airbnb 前端开源项目
  - storybooks/storybook - 各大公司的 UI 组件库的 Storybook 展示 https://storybook.js.org/examples/
  - LEARN REGEX THE EASY WAY - 正则表达式学习
  - 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 教程
  - Front-End Developer Handbook 2017
  - Front-End Developer Handbook 2018
  - awesome-vue
Uncategorized
- Uncategorized
  - awesome-php

Programming Languages

Categories

6. 在线工具 27 5. 浏览器扩展(Chrome Extensions) 23 13. 页面交互 15 0. 前端自动化(Workflow) 15 10. 表单处理 14 1. 前端UI框架(Frameworks) 12 ES6入门 10 2. JavaScript 框架汇总 10 4. ui组件库(CSS Framework) 7 16. 动画(Animate) 7 11. 图表绘制/图形库(Graphics) 5 22. 文档/表格/PDF 4 2. 调试工具 4 5. 基础模版 4 14. 代码高亮插件/代码编辑器 4 29. 颜色(CSS Colors)/SVG/Canvas 3 27. 富文本编辑器/Markdown编辑器/Markdown解析器 3 24. 前后端交互 3 25. 音频/视频 3 12. 日期格式化 & 时间轴 3 1. 开发工具 3 40. 调试 2 33. 演示/幻灯片 2 41. 实用工具/其他插件 2 39. 加密/转码 2 37. HTTP请求相关 2 3. 模拟数据( Mock ) 1 32. 布局(Layout) 1 26. 按钮 1 15. 字体图标 ( Font Icon ) 1 30. 选项卡(Tabs) 1 17. 本地存储 1 Uncategorized 1 34. 国际化(i18n) 1 20. 提示控件(Tooltips) 1 18. 模板引擎 1 3. 前端游戏框架 1 28. 内容提取(Readability) 1

Sub Categories

24.3 Web Sockets 92 13.20 视差滚动(Parallax Scrolling) 19 10.10 样式修正 8 10.6 日期选择 6 24.1 Ajax模块 3 13.6 进度条/加载动画(Loading) 3 10.1 表单验证(Form Validator)/表单提示 3 13.4 图片轮播(幻灯片)/图片展示 3 10.5 上传组件 2 13.1 Slider 2 13.2 瀑布流 2 10.9 自动完成插件 2 13.5 图片剪裁/图片处理/图片转换 2 13.18 隐藏或展示页面元素 1 13.12 全屏滚动/全屏切换 1 10.8 标签插件(Tag) 1 Uncategorized 1 13.17 拖拽组件 1

Keywords

awesome-list 2 javascript 2 snippets-collection 1 snippets 1 programming 1 nodejs 1 learning-resources 1 learn-to-code 1 html 1 git 1 es6-javascript 1 education 1 css 1 astro 1 list 1 frontend 1 awesome 1 learning-gulp 1 gulp 1 webpack 1 web-performance 1 web 1 plugins 1 module-bundler 1 loaders 1 javascript-modules 1 javascript-compiler 1 esm 1 es6 1 es2015 1 compiler 1 commonjs 1 build-tool 1 amd 1