前端组件库

Posted 2020-09-27 leayrainy

• • 前端组件库

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

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

    10.1 表单验证(Form Validator)

    • Validator
    • Parsley
    • jquery.form.js – jQuery Form Plugin
    • Validform
    • validator.js
    • formvalidator.js
    • Fort.js – 表单填写进度提示

    10.2 < select > 相关

    • Chosen
    • Select2
    • bootstrap-select

    10.3 单选框/复选框相关

    • iCheck – 增强复选框和单选按钮

    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 日期选择

    • Both Date and Time picker widget based on twitter bootstrap
    • GMU 日历组件
    • Mobiscroll

    10.6 取色

    • Colorpicker plugin for Twitter Bootstrap

    10.7 标签插件(Tag)

    • TaggingJS – 可以灵活定制的 jQuery 标签系统插件

    10.8 自动完成插件

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

    10.9 样式修正

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

    11. 图表绘制

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

    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 瀑布流

    • Masonry
    • Isotope – Filter & sort magical layouts

    13.3 图片懒加载/加载监听

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

    13.4 图片轮播/展示

    • FlexSlider
    • unslider – 小而美的轮播库
    • prettyPhoto

    13.5 图片剪裁/处理

    • croppic – an image cropping jquery plugin
    • jQuery.eraser – 图像擦除插件

    13.6 进度条

    • NProgress.js
    • progress.js
    • Pace – Automatic page load progress bar
    • jquery-ajax-progress

    13.7 侧滑插件(offcancas)

    • pushy – a responsive off-canvas navigation menu

    13.8 菜单(Menu)

    • SuperFish – 基于jQuery的级联下拉菜单
    • Responsive Nav – 响应式导航

    13.9 滚动侦测(ScrollSpy)

    • jquery-scrollspy(1)
    • jquery-scrollspy(2)
    • Waypoints

    13.10 滚动加载更多

    • jScroll

    13.11 平滑滚动插件(Smooth Scroll)

    • jquery-smooth-scroll
    • jquery.scrollTo – 平滑滚动到页面指定位置

    13.12 全屏滚动

    • pagePiling.js – 全屏滚动效果

    13.13 分屏滚动

    • multiscroll.js – 分屏滚动效果

    13.14 转场效果

    • Animsition – 页面切换时的过渡效果

    13.15 固定元素(Sticky)

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

    13.16 触控事件

    • Hammer.js
    • jquery.event.move.js

    13.17 拖拽组件

    • Draggabilly – 专注于拖拽功能的 JS 库

    13.18 隐藏或展示页面元素

    • Headroom.js – 在不需要页头时将其隐藏
    • Readmore.js – 内容显示与隐藏插件

    13.19 滚动条

    • jScrollPane

    13.20 视差滚动(Parallax Scrolling)

    • parallax.js
    • jparallax

    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. 本地存储

    • 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