Https://www.luoxiao123.cn/1196.html
Here is the collection of Web front-end development common front-end development component library, build web App common style/components such as Collection list (mobile first). Mainly includes the front-end framework, building tools, automation modules, jquery plug-ins, front-end style, etc., including the most useful front-end development component library!
0. Front-end automation
- Front-End build tools
- Gulp–the Streaming Build system
- Grunt–the JavaScript Task Runner
- Webpack (module management and packaging): http://webpack.github.io/
- Front-End Module manager
- Bower–a Package Manager for the Web
- Browserify
- Component
- Duo
- Requirejs
- Sea.js
- Webpack (module management and packaging): http://webpack.github.io/
- CSS Preprocessor
- sass–syntactically Awesome Style Sheets
- Less–less is more, Than CSS
- 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
7. Grid system
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
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 boxes and radio buttons
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– display 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– a 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
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 when page is toggled
13.15 Fixed Element (Sticky)
- Sticky–jquery Plugin for Sticky Objects
- jquery.pin– Fixed page elements
13.16 Touch Events
13.17 Drag Components
- draggabilly– focus on the drag function of JS library
13.18 hide or Show page elements
- headroom.js– hide a page header when it is not needed
- readmore.js– content display and hidden plugins
13.19 scroll bar
13.20 Parallax Scrolling (Parallax scrolling)
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– purely CSS-implemented responsive icon
- Simple Icons
16. Animations
- Animate.css–a Cross-browser Library of CSS animations.
- TRANSIT–CSS transitions and Transformations for jQuery
- move.js– simplifying the JS library of 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– is 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 component
- Dialogeffects
22. Documentation/Forms
- handsontable– Online Editable Excel table
- JQuery bootgrid– for AJAX-generated dynamic tables
- 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
- Buttoncomponentmorph
- Progressbuttonstyles
- Creativebuttons
- CSS3 buttons
27. Rich Text Editor/markdown editor/markdown parser
- simditor– simple and fast Rich text editor
- bacheditor– a mood editor
- Bootstrap-markdown
- Marked–markdown Parser
28. Content Extraction (readability)
- Readability
- Json.human.js–json Formatting for human Beings
29. Color (CSS Colors)/svg
30. Utilities/Other Plugins
- Jquery-cookie
- fastclick– handling Mobile Click events 300 MS delay
- screenfull.js– Full Screen Toggle
- async.js– Asynchronous operations
- html2canvas– implementation of Pure JS Web page
- jquery.qrcode.js– creating a two-dimensional code for JQuery plugins
- Focuspoint.js to achieve responsive cropping of images
- dd_belatedpng.js– let IE6 support transparent PNG images
- nakedpassword– helps detect password strength with stripping women
Front-end Reference set
- Frontend-guidelines–some HTML, CSS and JS best practices.
- Codrops–useful Resources
- Front-End Code standards & best Practices
Front-end Component Collection List
