前端组件库

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

  • Materialize - 一个基于 Material Design 的 CSS 框架

  • Framework7

  • mui

  • ionic framework

  • Fries

  • jQuery Mobile

  • App.js

2. JavaScript 框架汇总

  • JavaScript 框架

    • react

    • Angular

    • jQuery

    • Backbone.js

    • ember.js

    • Ractive.js

    • KISSY

    • Zepto.js

    • Vanilla JS

    • Avalon

    • T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架

    • jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用

  • 轻量级JavaScript框架

    • Min.js - Super minimal selector and event library

    • skel.js - A lightweight responsive framework

    • Sprint.js - 一个高性能、小体积的 DOM 操作库

    • knockout

    • PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API

  • JavaScript 工具库

    • underscore.js

    • Underscore.string.js字符串操作库

    • functional.js

    • Lo-Dash - A JavaScript utility library

    • Lazy.js - a functional utility library for JavaScript

    • Fn.js

    • Way.js - 双向数据绑定库

    • Keys.js - 应用快捷键

    • simple-hotkeys

    • Mousetrap - 键盘快捷键操作

    • Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)

    • Can.js

    • boiler - a utility library that makes tasks in JavaScript easier

3. 前端游戏框架

  • cocos2d-html5

  • Egret Engine

  • LimeJS

  • EaselJS

  • three.js

  • AlloyStick

  • The-Best-JS-Game-Framework

  • CanvasEngine

  • Quintus

  • cutjs

4. ui组件库

  • GMU - 基于zepto的ui组件库,适用于移动端

  • FrozenUI - 腾讯移动端组件库

  • NEC

  • NEJ

  • Pure CSS Components

  • magic-of-css

  • Primer - The CSS toolkit and guidelines that power GitHub

5. 基础模版

  • 浏览器统一(Cross Browser)

    • HTML5 BOILERPLATE

    • Modernizr

    • Normalize.css

    • cssFx - 为CSS3自动生成浏览器前缀

    • -prefix-free - Break free from CSS prefix hell

  • 响应式

    • Responsive - 响应式布局

    • Enquire.js - Awesome Media Queries in JavaScript

    • Free Wall - 创建桌面,移动和平板的动态网格布局

6. 排版

  • yue.css

  • typo.css

  • chinese-copywriting-guidelines - 中文文案排版指南

7. 网格系统

  • grid

  • Flexbox Grid

  • MasonJS - creating a perfect grid

8. 路由和链接(Routing And URLs)

  • History.js - gracefully supports the HTML5 History/State APIs

  • jquery-pjax - pushState+ajax

  • jquery-address - Deep Linking

  • page.js - Micro client-side router

  • crossroads.js

  • hash.js

  • path.js

  • director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)

  • URI.js

  • Roadcrew.js

  • SpeakingURL

9. UA 识别

  • detector

10. 表单处理

10.1 表单验证(Form Validator)/表单提示

  • Validator

  • Parsley

  • jquery.form.js - jQuery Form Plugin

  • Validform

  • validator.js

  • jquery-validation - jQuery Validation Plugin

  • formvalidator.js

  • Fort.js – 表单填写进度提示

  • mailcheck - 用于检测email地址的域名

  • Floatlable.js - 输入时显示placeholder文本

  • jQuery Label Better

  • validator.js

10.2 < select > 相关

  • Chosen

  • Select2

  • bootstrap-select

10.3 单选框/复选框相关

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

  • Switchery - iOS 7 style switches for your checkboxes

10.4 上传组件

  • jQuery File Upload Plugin

  • 百度 Web Uploader

  • uploadify

  • Plupload

  • Fine Uploader

  • arale-upload - 轻量级 iframe and html5 file uploader

  • Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)

  • flow.js

  • localResizeIMG3 - 前端本地客户端压缩图片,兼容IOS,Android,PC

  • simple-uploader

10.5 日期选择

  • Both Date and Time picker widget based on twitter bootstrap

  • GMU 日历组件

  • Mobiscroll

  • Pikaday - 日期选择器

10.6 取色

  • Colorpicker plugin for Twitter Bootstrap

10.7 标签插件(Tag)

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

  • selectize.js

  • Bootstrap Tags Input

10.8 自动完成插件

  • At.js - 一个Twitter/微博样式的@自动完成插件

  • jquery-textcomplete - 智能搜索提示框/自动补全

  • typeahead.js - a fast and fully-featured autocomplete library

10.9 样式修正

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

11. 图表绘制/图形库(Graphics)

  • 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

  • Bonsai - 一个功能强大的JavaScript图形库

  • epoch - 数据图表可视化

  • Vis.js

  • Coutour.js

  • zrender - 一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型,让canvas绘图大不同!

12. 日期格式化 & 时间轴

  • Moment.js - 日期处理

  • Smart Time Ago - 显示相对时间

  • timeline.js

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

  • iSlider - 移动端滑动组件

  • OwlCarousel - create beautiful responsive carousel slider

  • jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件

  • Glide.js - 轻量级滑块组件

  • PhotoSwipe

  • TouchSlide - 触屏滑动特效(焦点图,Tab切换)

13.2 瀑布流

  • Masonry

  • Isotope - Filter & sort magical layouts

13.3 懒加载/加载监听/预加载

  • imagesLoaded

  • Echo.js

  • lazySizes

  • jquery_lazyload

  • BttrLazyLoading

  • lazyload.js

  • layzr.js - 一个小巧快速的图片懒加载库

  • waitForImages - 图片加载监听库

  • PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能

  • bindWithDelay - jQuery Plugin For Delayed Event Execution

  • TypeWatch - 停止输入时调用

13.4 图片轮播(幻灯片)/图片展示

  • FlexSlider

  • unslider - 小而美的轮播库

  • prettyPhoto

  • FlickerPlate - A cool jQuery plugin that lets you flick through content.

  • Holder.js - Client-side image placeholders.

  • RowGrid.js - 在径直的行里放置图片

  • ImageLightbox.js - 灯箱效果

  • JQuery Panorama Viewer - 全景视图

  • Intense Images - 全屏查看图片

  • Picturefill - 一个响应式图片 JS 插件

  • zoom.js - 一个 jQuery 图片放大插件

  • watermarkjs - 一个在浏览器中添加图片水印的 JS 库

13.5 图片剪裁/图片处理

  • Jcrop - Image Cropping Plugin for jQuery

  • croppic - an image cropping jquery plugin

  • jQuery.eraser - 图像擦除插件

  • DD_belatedPNG.js - 让IE6支持透明PNG图片

  • FocusPoint.js 实现图片的响应式裁剪

  • imgareaselect

13.6 进度条/加载动画(Loading)

  • NProgress.js

  • progress.js

  • Pace - Automatic page load progress bar

  • jquery-ajax-progress

  • nanobar - Very lightweight progress bars.

  • waitMe - 很漂亮的loading效果

  • spin.js

  • sonic.js

  • fakeLoader.js

13.7 侧滑插件(offcancas)

  • pushy - a responsive off-canvas navigation menu

  • Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

13.8 菜单(Menu)

  • SuperFish - 基于jQuery的级联下拉菜单

  • Responsive Nav - 响应式导航

13.9 滚动侦测(ScrollSpy)

  • jquery-scrollspy(1)

  • jquery-scrollspy(2)

  • Waypoints

  • ScrollMagic - 像进度条一样使用滚动条

13.10 滚动加载更多/下拉刷新(Pull to Refresh)

  • jScroll

  • web-pull-to-refresh

  • pulltorefresh

  • RubberBand.js - add pull-to-refresh functionality to any page.

13.11 平滑滚动插件(Smooth Scroll)

  • jquery-smooth-scroll

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

  • smooth-scroll

  • scrollUp

  • elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件

13.12 全屏滚动/全屏切换

  • pagePiling.js - 全屏滚动效果

  • fullPage.js

  • onepage-scroll

  • zepto.fullpage - 专注于移动端的fullPage.js

  • screenfull.js - 切换全屏模式

13.13 分屏滚动

  • multiscroll.js - 分屏滚动效果

13.14 转场效果

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

13.15 固定元素(Sticky)

  • sticky - jQuery Plugin for Sticky Objects

  • jquery.pin - 固定页面元素

  • stickUp

  • Slinky.js - 堆叠头部创建滑动导航列表

13.16 触控事件

  • Hammer.js

  • jquery.event.move.js

13.17 拖拽组件

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

  • dragula - 一个让拖放操作变简单的 JS 库

  • GridList - 可拖拉的响应式列表库

13.18 隐藏或展示页面元素

  • Headroom.js - 在不需要页头时将其隐藏

  • Readmore.js - 内容显示与隐藏插件

  • oriDomi - 像指一样折叠Dom元素

13.19 滚动条(Scrollbar)

  • jScrollPane

  • jquery.scrollbar

  • perfect-scrollbar

  • nanoScrollerJS

  • tinyscrollbar

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)

  • animate.css - A cross-browser library of CSS animations.

  • Transit - CSS transitions and transformations for jQuery

  • WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)

  • AniJS - A Library to Raise your Web Design without Coding

  • 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

  • Velocity.js - 加速JavaScript动画

  • lenticular.js - 响应倾斜或鼠标事件创建图片动画

  • jQuery Interactive 3D - Create a 3D interactive object using images

  • AnimateScroll - A Simple jQuery Plugin for Animating Scroll

  • Blast.js - 把动画和样式注入到文本中

  • Bounce.js - CSS3 关键帧动画

  • Sticker.js - create a Sticker Effect

  • scrollReveal.js - 元素进入可视区域自动触发设置好的动画

  • stroll.js - CSS3 list scroll effects

  • jQuery Easing - 动画效果扩展

  • animations - CSS3 ANIMATION CHEAT SHEET

  • iconate.js:将 icons 增加动画效果的 JS 库

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. 通知组件/弹框组件/模态窗口

  • Notify.js(Web Notifications API)

  • alertify.js

  • AlertifyJS

  • SweetAlert

  • Messenger - 非常酷的弹框组件

  • PNotify

  • Notify.js - A simple, versatile notification library

  • Remodal - 模态窗口插件

20. 提示控件(Tooltips)

  • qTip2 - Pretty powerful tooltips

  • tooltip - CSS Tooltips

  • tooltipster - A jQuery tooltip plugin

  • grumble.js - 气泡形状的提示(Tooltip)控件

  • Ouibounce - 离站提示控件

  • intro.js - 一个创建引导式网站介绍功能的 JS 库

21. 对话框/遮罩层/弹出层(lightbox)

  • fancyBox - Fancy jQuery lightbox

  • jquery-lightbox - The popular lightbox script, ported to jQuery

  • Colorbox - a jQuery lightbox

  • artDialog - 经典的网页对话框组件

  • DialogEffects

  • jQuery blockUI - Page or element overlay

22. 文档/表格/PDF

  • Backgrid.js - 强大的表格组件

  • handsontable - 在线可编辑excel表格

  • jQuery Bootgrid - 用于ajax生成动态表格

  • DataTables - Table plug-in for jQuery

  • PDF.js - 一个 JavaScript 编写的 PDF 阅读器

  • jsPDF - Generate PDF files in JavaScript

  • Recline.js - 灵活操作和展示数据

  • Dynatable - 交互式表格插件

  • fattable - 创建无限滚动无限行列数的表格

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

  • Buzz - A Javascript HTML5 Audio library

  • MediaElement.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 - 一个有情怀的编辑器

  • TinyMCE

  • bootstrap-markdown

  • marked - markdown解析器

  • Markdown Plus

  • Editor.md - 开源在线Markdown编辑器

  • stackedit

  • Redactor Text Editor

  • micromarkdown.js - 轻量级的md解析器

28. 内容提取(Readability)

  • Readability

  • json.human.js - Json Formatting for Human Beings

29. 颜色(CSS Colors)/SVG/Canvas

  • CSS Colours

  • SVGeneration

  • SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器

  • Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素

  • Seen.js - 渲染3D场景为SVG或者HTML Canvas

30. 选项卡(Tabs)

  • Easy Responsive Tabs to Accordion

  • Responsive-Tabs

  • ion.tabs - jQuery tabs plugin

  • jQuery-EasyTabs

  • tabulous.js

31. 文本处理

  • ZeroClipboard - 文本复制插件

  • Bigfoot - 点击文章中的脚注弹窗显示

  • Annotator - 文本注解插件,可以包括注释、标签、用户等

  • Succinct - 用作截断多行文本,后面添加省略号

  • Flowtype.js - 自动调整字体大小和行号

  • flat-shadow

  • FitText - A jQuery plugin for inflating web type

  • shine.js - 实现漂亮阴影

  • Type Rendering Mix - 文本渲染引擎

  • jquery-expander - 阅读更多

32. 布局(Layout)

  • 分隔面板(Split Panel)

    • split-pane

    • jQuery UI Layout

33. 演示/幻灯片

  • reveal.js - The HTML Presentation Framework

  • bespoke.js - DIY Presentation Micro-Framework

  • impress.js

34. 国际化(i18n)

  • jquery-i18n

  • i18next.js

  • jsperanto.js

  • jed.js

  • messageformat.js

  • Polyglot.js

35. 实用工具/其他插件

  • jquery-cookie

  • FastClick - 处理移动端 click 事件 300 毫秒延迟

  • InstantClick - 预加载用户可能会点击的一些链接

  • Async.js - 异步操作

  • html2canvas - 实现纯JS网页截图

  • jquery.qrcode.js - 生成二维码的 jQuery 插件

  • nakedpassword - 用脱衣女帮助检测密码强度

  • KityMinder - 脑图编辑工具

  • MixitUp - 动画过滤和排序

  • JQuery Tip Cards - 创建卡片交互的cards布局

  • Fallback.js - JavaScript library for dynamically loading CSS and JS files.

  • swfobject

  • prettyprint.js - An in-browser JavaScript variable dumper

  • Shepherd - 为应用创建用户指南

  • RulersGuide.js - 类似PhotoShop标尺的js库

  • Gremlins.js - Monkey 测试库

  • RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具

前端开发工具

1. 开发工具

  • Sublime Text

2. 调试工具

  • Fiddler

  • Weinre

  • Rythem

3. 浏览器扩展(Chrome Extensions)

  • Postman - REST Client

  • Fiddler - Fiddler for Chrome Extension

  • WEB前端助手(FeHelper)

  • Web Developer

  • Chrome Logger

  • ColorZilla

  • Code Cola

  • 1px

  • AlloyDesigner - 前端重构开发辅助工具

  • Fontface Ninja

  • PageSpeed Insights (by Google)

  • HTTP Status

  • Redirect Path

前端参考集

  • frontend-guidelines - Some HTML, CSS and JS best practices.

  • frontend-dev-bookmarks

  • Codrops - Useful resources

  • Front-end Code Standards & Best Practices

  • frontend-dev-bookmarks

  • Airbnb 的 JavaScript 编码规范

  • awesome-javascript

转载于:https://www.cnblogs.com/cosyer/p/6650832.html

你可能感兴趣的:(前端,ui,markdown,ViewUI)