前端组件大合集

转自轩枫http://www.xuanfengge.com/he-sets-the-front-end-component-library-the-essential-collection.html

1. 前端自动化(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. 表单处理

11. 表单验证(Form Validator)
    Validator
    Parsley
    jquery.form.js – jQuery Form Plugin
    Validform
    validator.js
    formvalidator.js
    Fort.js – 表单填写进度提示

12. < select > 相关
    Chosen
    Select2
    bootstrap-select

13. 单选框/复选框相关
    iCheck – 增强复选框和单选按钮

14. 上传组件
    jQuery File Upload Plugin
    百度 Web Uploader
    Uploadify
    Plupload
    arale-upload – 轻量级 iframe and html5 file uploader
    Dropzone.js – drag’n’drop library拖拽上传
    flow.js

15. 日期选择
    Both Date and Time picker widget based on twitter bootstrap
    GMU 日历组件
    Mobiscroll

16. 取色
    Colorpicker plugin for Twitter Bootstrap

17. 标签插件(Tag)
    TaggingJS – 可以灵活定制的 jQuery 标签系统插件

18. 自动完成插件
    At.js – 一个Twitter/微博样式的@自动完成插件
    jquery-textcomplete – 智能搜索提示框/自动补全

19. 样式修正
    autosize – 使文本框自动适应所输入的内容

20. 图表绘制

• 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. 页面交互

14. 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鼠标滚轮滚动侦测插件

15. 瀑布流
    Masonry
    Isotope – Filter & sort magical layouts

16. 图片懒加载/加载监听
    imagesLoaded
    Echo.js
    lazySizes
    jquery_lazyload
    lazyload.js
    waitForImages – 图片加载监听库

17. 图片轮播/展示
    FlexSlider
    unslider – 小而美的轮播库
    prettyPhoto

18. 图片剪裁/处理
    croppic – an image cropping jquery plugin
    jQuery.eraser – 图像擦除插件

19. 进度条
    NProgress.js
    progress.js
    Pace – Automatic page load progress bar
    jquery-ajax-progress

20. 侧滑插件(offcancas)
    pushy – a responsive off-canvas navigation menu

21. 菜单(Menu)
    SuperFish – 基于jQuery的级联下拉菜单
    Responsive Nav – 响应式导航

22. 滚动侦测(ScrollSpy)
    jquery-scrollspy(1)
    jquery-scrollspy(2)
    Waypoints

23. 滚动加载更多
    jScroll

24. 平滑滚动插件(Smooth Scroll)
    jquery-smooth-scroll
    jquery.scrollTo – 平滑滚动到页面指定位置

25. 全屏滚动
    pagePiling.js – 全屏滚动效果

26. 分屏滚动
    multiscroll.js – 分屏滚动效果

27. 转场效果
    Animsition – 页面切换时的过渡效果

28. 固定元素(Sticky)
    sticky – jQuery Plugin for Sticky Objects
    jquery.pin – 固定页面元素

29. 触控事件
    Hammer.js
    jquery.event.move.js

30. 拖拽组件
    Draggabilly – 专注于拖拽功能的 JS 库

31. 隐藏或展示页面元素
    Headroom.js – 在不需要页头时将其隐藏
    Readmore.js – 内容显示与隐藏插件

32. 滚动条
    jScrollPane

33. 视差滚动(Parallax Scrolling)
    parallax.js
    jparallax

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

• 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