全面、详细的前端组件库

  • 前端组件库

    • 搭建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

本文来源地址： https://www.janecc.com/he-sets-the-front-end-component-library-the-essential-collection.html

全面、详细的前端组件库相关推荐

  1. 如何使用rollup打包前端组件/库

    如何使用rollup打包前端组件/库 目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发 ...

  2. 分享给你一个酷炫的前端组件库，还不用起来？

    fancy-components 一个酷炫的前端组件库 大伙前端都是用什么组件库的呢? 我最近刚发现前端一个很好看.很炫酷的组件库.那就是fancy-components ,简直是"酷炫&q ...

  3. Bootstrap前端组件库+构建管理

    目录 构建管理 Grunt Sass JavaScript Bootstrap作为前端组件库 一些语法 媒体查询 辅助类 栅栏系统 补充 代码示例 媒体查询 网格系统 建立可伸缩的甚至是响应式组件的方 ...

  4. 前端组件库自定义主题切换探索-03-webpack-theme-color-replacer webpack 同时替换多个颜色改造

    接上一篇<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02> 这篇我们来开始改造,让这个插件最终能达到我 ...

  5. 前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02

    接上一篇:<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-01> 上一篇说到,在Handler.js的th ...

  6. 前端组件库(Element UI)的实现原理：教你如何实现自定义组件库，并打包发布至npm

    前端组件库实现原理 前言 Demo地址 一. 组件库开发流程 1)新建vue项目: 2)编写自定义组件,封装成插件: 3)修改配置项 webpack.config.js: pakage.json: 4 ...

  7. 把游戏里面的 UI 做成前端组件库会怎么样？

    在研究生的时候用 Vue2.0 做过一个守望先锋UI库. 当时很沉迷<守望先锋>,有一天突发奇想:我要把游戏里面的 UI 做成前端组件库会怎么样? 然后就一步步开始做了,最后也算把它给实现 ...

  8. 设计一个前端组件库，需要具备哪些能力？

    大厂技术  高级前端  Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 在研究生的时候用 Vue2.0 做过一个守望先锋UI库. 当时很沉迷<守望先锋> ...

  9. 构建Vue前端组件库

    在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本 ...

最新文章

  1. usb调试模式已打开，adb devices显示List of devices attached 解决办法！纽维K333一键ROOT，获取ROOT权限！...
  2. 文档相似度的比较tf-idf lda lsi
  3. vs2019 MFC 中 cannot open include file 'afxres.h' 问题解决方法
  4. Win10一周更新系统开始面向企业分支推送
  5. JavaCard概述
  6. LeetCode 134 Gas Station
  7. ueditor上传大容量视频报http请求错误的解决方法
  8. paip.php 配置ZEND DEBUGGER 断点调试for cli..
  9. 【数学建模】基于matlab计划生育政策调整对人口数量、结构及其影响的研究【含Matlab源码 749期】
  10. 【新版】掩日免杀windows Defender
  11. inovance变频器说明书参数设置_汇川(INOVANCE)MD310变频器说明书.pdf
  12. 淘宝客防止偷单淘宝联盟检测偷单验证PID是否为自己推广位
  13. 一次由于SQL Server BUG引起的数据库AlwaysOn主从切换故障分析处理
  14. mysql 军规_在互联网大厂必须遵守的MySql开发军规
  15. Spark教程——（10）Spark SQL读取Phoenix数据本地执行计算
  16. 原 Android自定义控件三部曲文章索引
  17. R语言气泡图 bubble chart
  18. objective-c 语法快速过（5）
  19. 豆瓣电台WP7客户端 开发记录4
  20. 激活函数，优化技术和损失函数

热门文章

  1. 用ssh反向连接访问内网主机 ( 实例使用autossh隧道实现mysql的同步 )
  2. 国外PHP学习网站书籍资料汇总
  3. PHP正则表达式提取超链接及其标题
  4. HTML 5 canvas 基本语法
  5. svm中拉格朗日对偶问题的推导
  6. 人工智障学习笔记——机器学习(8)K均值聚类
  7. git 命令之 如何将本地新建分支推到服务器上
  8. DNS服务器 安装部署 以及子域授权和转发
  9. LeetCode 160. Intersection of Two Linked Lists
  10. 用srand时间数种子来生成随机数