Front-end Component library

0. Front-end automation

• Front-End build tools
  • Gulp-the Streaming Build system
  • Grunt-the JavaScript Task Runner
• Front-End Module manager
  • BOWER-A Package Manager for the Web
  • Browserify
  • Component
  • Duo
  • Requirejs
  • Sea.js
• CSS Preprocessor
  • Less-less is more, Than CSS
  • sass-syntactically Awesome Style Sheets
  • stylus-expressive, dynamic, robust CSS

1. Front-End frame

• Bootstrap
• Foundation
• Amaze UI
• Semantic UI
• Pure CSS
• Topcoat
• UIkit
• Material UI
• Framework7
• Mui
• Ionic framework
• Fries
• JQuery Mobile

2. JavaScript Framework Rollup

• JavaScript Framework
  • Angular
  • Jquery
  • Backbone.js
  • Ractive.js
  • Kissy
  • Zepto.js
  • Vanilla JS
  • Avalon
• Lightweight JavaScript Framework
  • Min.js-super minimal selector and event library
  • SKEL.JS-A Lightweight Responsive Framework
• JavaScript Tools Library
  • Underscore.js
  • Way.js-bidirectional Data Binding Library
  • Keys.js-Apply shortcut keys

3. Front-end game frame

• Cocos2d-html5
• Egret Engine
• Limejs
• Easeljs
• Three.js
• Alloystick
• The-best-js-game-framework
• Canvasengine
• Quintus

4. UI Component Library

• GMU
• Nec
• Nej
• Pure CSS Components
• Magic-of-css

5. Basic templates

• HTML5 boilerplate
• Modernizr
• Normalize.css

6. Typesetting

• Yue.css
• Typo.css

7. Grid system

• Grid
• Flexbox Grid

8. HTML5 API App

• History.js-gracefully supports the HTML5 history/state APIs
• Jquery-pjax-pushstate+ajax
• Jquery-address-deep linking
• Notify.js (Web notifications API)

9. UA Identification

• Detector

10. Form processing 10.1 form verification (form Validator)

• Validator
• Parsley
• Jquery.form.js-jquery form Plugin
• ValidForm
• Validator.js
• Formvalidator.js
• fort.js– Form Fill Progress tips

10.2 < SELECT > Related

• Chosen
• Select2
• Bootstrap-select

10.3 Radio box/check box related

• ICheck-Enhanced check box and radio button

10.4 Uploading components

• JQuery File Upload Plugin
• Baidu Web Uploader
• Uploadify
• Plupload
• Arale-upload-Lightweight iframe and HTML5 file uploader
• Dropzone.js-drag ' n ' drop library drag and drop upload
• Flow.js

10.5 Date Selection

• Both Date and Time Picker widget based on Twitter bootstrap
• GMU Calendar Component
• Mobiscroll

10.6 Color Extraction

• ColorPicker Plugin for Twitter Bootstrap

10.7 Tag Plugin (tag)

• taggingjs– can be flexibly customized with the jQuery tag system plugin

11. Chart drawing

• Highcharts
• Chart.js-simple HTML5 Charts using Canvas
• Baidu Echarts
• Chartist.js
• D3.js-a JavaScript Visualization library for HTML and SVG.
  • Intro-to-d3-a d3.js Tutorial

12. Date formatting

• Moment.js
• Smart time Ago-show relative times

13. Page Interaction 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

13.2 Waterfall Flow

• Masonry
• Isotope-filter & Sort Magical Layouts

13.3 images lazy loading/loading monitoring

• imagesloaded
• Echo.js
• Lazysizes
• Jquery_lazyload
• Lazyload.js
• Waitforimages-Image loading Monitor Library

13.4 Picture Carousel/Display

• Flexslider
• Unslider-Small and beautiful carousel Library
• Prettyphoto

13.5 Picture Clipping

• Croppic-an Image cropping jquery plugin

13.6 progress bar

• Nprogress.js
• Progress.js
• Pace-automatic Page Load Progress bar
• Jquery-ajax-progress

13.7 Slide-slip insert (Offcancas)

• Pushy-a Responsive Off-canvas navigation menu

13.8 Menus (menu)

• SuperFish-jquery-based cascading drop-down menu
• Responsive nav-responsive navigation

13.9 rolling detection (Scrollspy)

• Jquery-scrollspy (1)
• Jquery-scrollspy (2)
• waypoints

13.10 Scrolling Load More

• Jscroll

13.11 Smooth Scroll plug-in (Smooth Scroll)

• Jquery-smooth-scroll
• Jquery.scrollto-Smooth scrolling to the specified position on the page

13.12 Full-screen scrolling

• Pagepiling.js-full-screen scrolling effect

13.13 Split Screen scrolling

• Multiscroll.js-split-screen scrolling effect

13.14 transition Effects

• Animsition-transition effect on page transitions

13.15 Fixed Element (Sticky)

• Sticky-jquery Plugin for Sticky Objects
• Jquery.pin-Fixed page element

13.16 Touch Events

• Hammer.js

13.17 Drag Components

• Draggabilly-JS Library with a focus on drag function

13.18 hide or Show page elements

• Headroom.js-Hides a page header when it is not needed
• Readmore.js-content display and hidden plugins

13.19 scroll bar

• JScrollPane

13.20 Parallax Scrolling (Parallax scrolling)

• Parallax.js
• Jparallax

14. Code highlighting plugin/code Editor

• Google-code-prettify
• Highlight.js
• Rainbow
• Ace
• Codemirror
• Crayon Syntax Highlighter
• Prism-lightweight, robust, elegant syntax highlighting.

The UI Icon component

• Font Awesome
• Glyphter:the SVG Font Machine
• Perfect Icons
• Iconizr
• CIKONSS-responsive icon with pure CSS implementation
• Simple Icons

16. Animations

• Animate.css-a Cross-browser Library of CSS animations.
• TRANSIT-CSS transitions and Transformations for jQuery
• Move.js-JS library for simplifying CSS3 animations
• scrollme– add a variety of scrolling animations to your Web page
• Effeckt.css-a performant transitions and animations Library
• NEC Animation Library
• CSSHAKE-CSS classes to move your DOM
• MAGIC-CSS3 Animations with special effects
• Hover.css
• Css-loaders
• Spinkit

17. Local Storage

• Cross-storage-cross Domain local Storage
• Localforage
• Pouchdb
• Basil.js

18. Template Engine

• Mustache.js
• Handlebars.js
• Arttemplate
• Baidutemplate
• JSRender
• Ejs-javascript Templates
• Juicer-a Light Javascript templete Engine.
• Tempo
• Json2html

19. Notification Component/Bullet box assembly

• Alertify.js
• Alertifyjs
• Sweetalert
• Messenger-A very cool bullet box component
• Pnotify

20. Hint Control (tooltips)

• Qtip2-pretty powerful ToolTips
• Tooltip-css ToolTips
• Tooltipster-a jQuery tooltip Plugin
• Grumble.js-Bubble shape Hint (tooltip) control
• Ouibounce-off-site hint control

21. dialog box/pop-up layer (Lightbox)

• Fancybox-fancy JQuery Lightbox
• Jquery-lightbox-the Popular Lightbox script, ported to JQuery
• Colorbox-a JQuery Lightbox
• Artdialog-Classic Web Page dialog box components

22. Documentation/Forms

• handsontable-Online Editable Excel table
• JQuery Bootgrid-Creating dynamic tables for Ajax
• Datatables-table Plug-in for JQuery

23. Directory Tree Plugin

• Ztree_v3-jquery Tree Plugin
• Jstree-jquery Tree Plugin
• Fancytree-tree Plugin for JQuery

Ajax Modules

• Fetch-a Window.fetch JavaScript Polyfill
• Reqwest-browser Asynchronous HTTP Requests
• Minajax.js

25. Audio/Video

• JPLAYER-HTML5 Audio & Video for JQuery
• VIDEO.JS-HTML5 & Flash Video player
• Accessible HTML5 Video Player-paypal open source HTML5 videos player
• CLAPPR-Open source web video player
• 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-Video background
• Winamp2-js

26. Button

• Buttons-a CSS Button Library

27. Rich Text Editor/markdown editor/markdown parser

• Simditor-Simple and fast Rich text editor
• Bacheditor-A sentiment editor
• Bootstrap-markdown
• Marked-markdown Parser

28. Content Extraction (readability)

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

29. Color (CSS Colors)/svg

• CSS Colours
• Svgeneration

30. Utilities/Other Plugins

• Jquery-cookie
• Fastclick-handling Mobile Click events 300 MS delay
• Screenfull.js-Full Screen toggle
• Async.js-Asynchronous operation
• Html2canvas-Implement Pure JS Web page
• Jquery.qrcode.js-Create a two-dimensional code for the JQuery plugin
• Focuspoint.js to achieve responsive cropping of images
• Dd_belatedpng.js-let IE6 support transparent PNG images
• Nakedpassword-Help detect password strength with stripping women

Front-end Component library