awesome-frontend

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

Last synced: 12 days ago
JSON representation

0. 前端自动化(Workflow)
- Duo
- Sea.js
- Duo
- Duo
- Duo
- Webpack - module bundler
- Yeoman - a set of tools for automating development workflow
- use-gulp
- F.I.S - 前端集成解决方案
- Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集
- node-prune - Remove unnecessary files from node_modules
- Component
- Duo
- Sea.js
- LABjs - 文件加载器
- css-modulesify - CSS模块加载器
- Stylus - Expressive, dynamic, robust CSS
- analyze-css - CSS 选择器的复杂度和性能分析器
10. 表单处理
- 10.10 样式修正
  - autosize - 使文本框自动适应所输入的内容
- 10.1 表单验证(Form Validator)/表单提示
- 10.2 < input > 相关
  - cleave.js - 格式化你的输入内容
- 10.3 < select > 相关
- 10.4 单选框/复选框相关
  - Switchery - iOS 7 style switches for your checkboxes
- 10.5 上传组件
- 10.6 日期选择
  - GMU 日历组件
  - API文档
  - DEMO
  - Both Date and Time picker widget based on twitter bootstrap
  - Mobiscroll
  - PriceCalendar - 酒店价格日历
  - price-calendar - 价格日历
  - price_calendar - 含有商品价格的日历控件
  - airbnb/react-dates - Airbnb 的日期选择器
  - Pikaday - 日期选择器
  - tui.calendar - A JavaScript calendar that everything you need.
- 10.7 取色
  - average-color - Get Average Color of Image
- 10.8 标签插件(Tag)
- 10.9 自动完成插件
  - At.js - 一个Twitter/微博样式的@自动完成插件
  - typeahead.js - a fast and fully-featured autocomplete library
  - algolia/autocomplete.js - 自动补全插件
11. 图表绘制/图形库(Graphics)
- 10.10 样式修正
  - alibaba/BizCharts - 阿里巴巴桌面端商业统计图表解决方案
  - antvis/f2 - 蚂蚁金服移动端可视化解决方案
  - Chartist.js
  - D3.js - A JavaScript visualization library for HTML and SVG.
  - intro-to-d3 - a D3.js tutorial
  - Bonsai - 一个功能强大的JavaScript图形库
  - 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
  - apache/incubator-echarts - 百度开源可视化库
  - Highcharts
  - Chart.js - Simple HTML5 Charts using Canvas
12. 日期格式化 & 时间轴
- 10.10 样式修正
  - Moment.js - 日期处理
  - date-utils - Date Pollyfills for Node.js and Browser
  - Smart Time Ago - 显示相对时间
  - timeline.js
  - timeago.js
13.21 缩放 (Zooming)
- 13.20 视差滚动(Parallax Scrolling)
  - zoom.js - 一款效果很独特的页面内容缩放插件
  - jQuery Zoom - mouseover时图片缩放效果
13. 页面交互
- 13.10 滚动加载更多/下拉刷新(Pull to Refresh)
- 13.11 平滑滚动插件(Smooth Scroll)
- 13.12 全屏滚动/全屏切换
- 13.13 分屏滚动
  - multiscroll.js - 分屏滚动效果
- 13.14 转场效果
  - Animsition - 页面切换时的过渡效果
- 13.15 固定元素(Sticky)
- 13.16 触控事件
  - Hammer.js
  - jquery.event.move.js
- 13.17 拖拽组件
  - Draggabilly - 专注于拖拽功能的 JS 库
  - dragula - 一个让拖放操作变简单的 JS 库
  - react-dnd - React 拖拽组件
  - GridList - 可拖拉的响应式列表库
- 13.18 隐藏或展示页面元素
- 13.19 滚动条(Scrollbar)
- 13.1 Slider
  - TouchSlide - 触屏滑动特效(焦点图,Tab切换)
  - 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
  - PhotoSwipe
  - TouchSlide - 触屏滑动特效(焦点图,Tab切换)
  - better-scroll - inspired by iscroll, and it supports more features and has a better scroll perfermance
  - jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
  - Glide.js - 轻量级滑块组件
  - slick - the last carousel you'll ever need
- 13.20 视差滚动(Parallax Scrolling)
- 13.2 瀑布流
  - Bricklayer
- 13.3 懒加载/加载监听/预加载
- 13.4 图片轮播(幻灯片)/图片展示
- 13.5 图片剪裁/图片处理/图片转换
  - DD_belatedPNG.js - 让IE6支持透明PNG图片
  - cropperjs - 图片裁切
  - Jcrop - Image Cropping Plugin for jQuery
  - croppic - an image cropping jquery plugin
  - smartcrop.js - 智能图片裁剪库
  - jQuery.eraser - 图像擦除插件
  - FocusPoint.js 实现图片的响应式裁剪
  - imgareaselect
  - CSSgram - CSS 实现的 Instagram 滤镜库
  - instagram.css - 另一个 CSS 实现的 Instagram 滤镜库
  - antimoderate - 图片模糊库
  - react-image-crop - React 的图片剪裁插件
  - rasterizeHTML.js - HTML转图片(网页截图)
  - html2canvas - HTML转图片(实现纯JS网页截图)
  - dom-to-image - HTML转图片
  - domvas - HTML转图片
  - merge-images - 多张图片合成一张图片的浏览器 JS 库，使用了 Canvas
  - vue-cropper - Vue.js 的图片剪裁插件
  - react-cropper - React 的图片剪裁插件
- 13.6 进度条/加载动画(Loading)
  - loading.io - 一个 Loading 图标的网站
  - progress.js
  - HubSpot/pace - Pace 是一个页面加载进度条工具
  - jquery-ajax-progress
  - nanobar - Very lightweight progress bars.
  - waitMe - 很漂亮的loading效果
  - spin.js
  - sonic.js
  - fakeLoader.js
  - loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
  - css-loaders
  - Sausage - 跟踪滚动条并记录当前阅读所处节点
- 13.7 侧滑插件(offcancas)
  - pushy - a responsive off-canvas navigation menu
  - Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单
- 13.8 菜单(Menu)
  - SuperFish - 基于jQuery的级联下拉菜单
  - metisMenu - A jQuery menu plugin

Programming Languages

JavaScript 314 HTML 46 TypeScript 34 CSS 25 Vue 6 CoffeeScript 5 SCSS 4 PHP 4 Shell 1 Ruby 1

Categories

13. 页面交互 116 2. JavaScript 框架汇总 61 10. 表单处理 47 5. 浏览器扩展(Chrome Extensions) 47 6. 在线工具 39 16. 动画(Animate) 35 41. 实用工具/其他插件 23 1. 前端UI框架(Frameworks) 21 5. 基础模版 20 27. 富文本编辑器/Markdown编辑器/Markdown解析器 19 0. 前端自动化(Workflow) 18 25. 音频/视频 17 11. 图表绘制/图形库(Graphics) 16 31. 文本处理 15 8. 路由和链接(Routing And URLs) 15 18. 模板引擎 13 24. 前后端交互 13 22. 文档/表格/PDF 12 3. 前端游戏框架 11 19. 通知组件/弹框组件/模态窗口 11 4. ui组件库(CSS Framework) 11 ES6入门 10 29. 颜色(CSS Colors)/SVG/Canvas 9 2. 调试工具 9 14. 代码高亮插件/代码编辑器 8 26. 按钮 8 20. 提示控件(Tooltips) 8 17. 本地存储 7 21. 对话框/遮罩层/弹出层(lightbox) 6 39. 加密/转码 6 12. 日期格式化 & 时间轴 5 30. 选项卡(Tabs) 5 34. 国际化(i18n) 5 33. 演示/幻灯片 5 3. 模拟数据( Mock ) 4 28. 内容提取(Readability) 3 7. 网格系统 3 23. 目录树插件 3 9. UA 识别 3 15. 字体图标 ( Font Icon ) 3 37. HTTP请求相关 3 ES6转码器(ES6 to ES5) 3 36. 移动端优化(Optimizing Mobile Performance) 3 1. 开发工具 2 13.21 缩放 (Zooming) 2 32. 布局(Layout) 2 6. 排版 2 38. 下载组件 2 4. 接口管理 1 Uncategorized 1 40. 调试 1 35. 邮件模板(Email Templates) 1

Sub Categories

24.3 Web Sockets 242 13.20 视差滚动(Parallax Scrolling) 111 10.10 样式修正 22 13.5 图片剪裁/图片处理/图片转换 19 13.4 图片轮播(幻灯片)/图片展示 17 13.6 进度条/加载动画(Loading) 12 10.5 上传组件 12 13.1 Slider 12 24.1 Ajax模块 12 10.6 日期选择 11 13.3 懒加载/加载监听/预加载 10 10.1 表单验证(Form Validator)/表单提示 10 13.11 平滑滚动插件(Smooth Scroll) 5 13.19 滚动条(Scrollbar) 5 13.12 全屏滚动/全屏切换 5 13.9 滚动侦测(ScrollSpy) 4 13.10 滚动加载更多/下拉刷新(Pull to Refresh) 4 10.8 标签插件(Tag) 4 13.17 拖拽组件 4 13.15 固定元素(Sticky) 4 13.18 隐藏或展示页面元素 3 10.9 自动完成插件 3 10.3 < select > 相关 3 13.16 触控事件 2 13.8 菜单(Menu) 2 13.7 侧滑插件(offcancas) 2 13.14 转场效果 1 10.4 单选框/复选框相关 1 Uncategorized 1 13.13 分屏滚动 1 10.2 < input > 相关 1 13.2 瀑布流 1 24.2 SSE (Server-Sent Events) 1 10.7 取色 1

Keywords

javascript 86 css 27 jquery 21 react 17 vue 15 html 13 html5 12 ui 10 mobile 10 svg 10 frontend 9 nodejs 9 jquery-plugin 8 canvas 8 animation 7 editor 6 sass 6 typescript 6 framework 5 ui-kit 5 dom 5 es6 5 ios 5 hls 5 html5-video 5 video 5 css-framework 5 web 5 ui-components 5 image 4 angular 4 vue-components 4 vue3 4 javascript-library 4 responsive 4 performance 4 antd 4 ant-design 4 data-visualization 4 android 4 reference 4 web-development 4 modal 4 swipe 3 component 3 gallery 3 drag-and-drop 3 ui-design 3 components 3 rich-text-editor 3