前端框架

    • 前端组件库

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

 

你可能感兴趣的:(前端基础)