搭建web app常用的樣式/組件等收集列表(移動優先)

搭建web app常用的樣式/組件等收集列表(移動優先)

0. 前端自動化

• 前端構建工具

  • gulp - The streaming build system
  • grunt - the JavaScript Task Runner
  </ul> </li>
  • 前端模塊管理器

    • Bower - A package manager for the web
    • Browserify
    • Component
    • Duo
    • RequireJS
    • Sea.js
    </ul> </li>
    • css預處理器

      • Less - Less is More , Than CSS
      • Sass - Syntactically Awesome Style Sheets
      • Stylus - Expressive, dynamic, robust CSS
      </ul> </li> </ul>

      1. 前端框架

      • Bootstrap
      • Foundation
      • Amaze UI
      • Semantic UI
      • Pure CSS
      • topcoat
      • UIkit
      • Material UI
      • Framework7
      • mui
      • ionic framework
      • Fries
      • jQuery Mobile
      </ul>

      2. JavaScript 框架匯總

      • JavaScript 框架

        • Angular
        • jQuery
        • Backbone.js
        • Ractive.js
        • KISSY
        • Zepto.js
        • Vanilla JS
        • Avalon
        </ul> </li>
        • 輕量級JavaScript框架

          • Min.js - Super minimal selector and event library
          • skel.js - A lightweight responsive framework
          </ul> </li>
          • JavaScript 工具庫

            • underscore.js
            • Way.js - 雙向數據綁定庫
            • Keys.js - 應用快捷鍵
            </ul> </li> </ul>

            3. 前端游戲框架

            • cocos2d-html5
            • Egret Engine
            • LimeJS
            • EaselJS
            • three.js
            • AlloyStick
            • The-Best-JS-Game-Framework
            • CanvasEngine
            • Quintus
            </ul>

            4. ui組件庫

            • GMU
            • NEC
            • NEJ
            • Pure CSS Components
            • magic-of-css
            </ul>

            5. 基礎模版

            • HTML5 BOILERPLATE
            • Modernizr
            • Normalize.css
            </ul>

            6. 排版

            • yue.css
            • typo.css
            </ul>

            7. 網格系統

            • grid
            • Flexbox Grid
            </ul>

            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)
            </ul>

            9. UA 識別

            • detector
            </ul>

            10. 表單處理

            10.1 表單驗證(Form Validator)

            • Validator
            • Parsley
            • jquery.form.js - jQuery Form Plugin
            • Validform
            • validator.js
            • formvalidator.js
            • Fort.js – 表單填寫進度提示
            </ul>

            10.2 < select > 相關

            • Chosen
            • Select2
            • bootstrap-select
            </ul>

            10.3 單選框/復選框相關

            • iCheck - 增強復選框和單選按鈕
            </ul>

            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
            </ul>

            10.5 日期選擇

            • Both Date and Time picker widget based on 推ter bootstrap
            • GMU 日歷組件
            • Mobiscroll
            </ul>

            10.6 取色

            • Colorpicker plugin for 推ter Bootstrap
            </ul>

            10.7 標簽插件(Tag)

            • TaggingJS – 可以靈活定制的 jQuery 標簽系統插件
            </ul>

            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
              </ul> </li> </ul>

              12. 日期格式化

              • Moment.js
              • Smart Time Ago - 顯示相對時間
              </ul>

              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
              </ul>

              13.2 瀑布流

              • Masonry
              • Isotope - Filter & sort magical layouts
              </ul>

              13.3 圖片懶加載/加載監聽

              • imagesLoaded
              • Echo.js
              • lazySizes
              • jquery_lazyload
              • lazyload.js
              • waitForImages - 圖片加載監聽庫
              </ul>

              13.4 圖片輪播/展示

              • FlexSlider
              • unslider - 小而美的輪播庫
              • prettyPhoto
              </ul>

              13.5 圖片剪裁

              • croppic - an image cropping jquery plugin
              </ul>

              13.6 進度條

              • NProgress.js
              • progress.js
              • Pace - Automatic page load progress bar
              • jquery-ajax-progress
              </ul>

              13.7 側滑插件(offcancas)

              • pushy - a responsive off-canvas navigation menu
              </ul>

              13.8 菜單(Menu)

              • SuperFish - 基于jQuery的級聯下拉菜單
              • Responsive Nav - 響應式導航
              </ul>

              13.9 滾動偵測(ScrollSpy)

              • jquery-scrollspy(1)
              • jquery-scrollspy(2)
              • Waypoints
              </ul>

              13.10 滾動加載更多

              • jScroll
              </ul>

              13.11 平滑滾動插件(Smooth Scroll)

              • jquery-smooth-scroll
              • jquery.scrollTo - 平滑滾動到頁面指定位置
              </ul>

              13.12 全屏滾動

              • pagePiling.js - 全屏滾動效果
              </ul>

              13.13 分屏滾動

              • multiscroll.js - 分屏滾動效果
              </ul>

              13.14 轉場效果

              • Animsition - 頁面切換時的過渡效果
              </ul>

              13.15 固定元素(Sticky)

              • sticky - jQuery Plugin for Sticky Objects
              • jquery.pin - 固定頁面元素
              </ul>

              13.16 觸控事件

              • Hammer.JS
              </ul>

              13.17 拖拽組件

              • Draggabilly - 專注于拖拽功能的 JS 庫
              </ul>

              13.18 隱藏或展示頁面元素

              • Headroom.js - 在不需要頁頭時將其隱藏
              • Readmore.js - 內容顯示與隱藏插件
              </ul>

              13.19 滾動條

              • jScrollPane
              </ul>

              13.20 視差滾動(Parallax Scrolling)

              • parallax.js
              • jparallax
              </ul>

              14. 代碼高亮插件/代碼編輯器

              • google-code-prettify
              • highlight.js
              • Rainbow
              • ACE
              • CodeMirror
              • Crayon Syntax Highlighter
              • prism - Lightweight, robust, elegant syntax highlighting.
              </ul>

              15. UI Icon 組件

              • Font Awesome
              • Glyphter: The SVG Font Machine
              • Perfect Icons
              • iconizr
              • Cikonss - 純CSS實現的響應式Icon
              • Simple Icons
              </ul>

              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
              </ul>

              17. 本地存儲

              • cross-storage - Cross domain local storage
              • localForage
              • pouchdb
              • basil.js
              </ul>

              18. 模板引擎

              • mustache.js
              • Handlebars.js
              • artTemplate
              • baiduTemplate
              • JSRender
              • EJS - JavaScript Templates
              • Juicer - A Light Javascript Templete Engine.
              • Tempo
              • json2html
              </ul>

              19. 通知組件/彈框組件

              • alertify.js
              • AlertifyJS
              • SweetAlert
              • Messenger - 非常酷的彈框組件
              • PNotify
              </ul>

              20. 提示控件(Tooltips)

              • qTip2 - Pretty powerful tooltips
              • tooltip - CSS Tooltips
              • tooltipster - A jQuery tooltip plugin
              • grumble.js - 氣泡形狀的提示（Tooltip）控件
              • Ouibounce - 離站提示控件
              </ul>

              21. 對話框/彈出層(lightbox)

              • fancyBox - Fancy jQuery lightbox
              • jquery-lightbox - The popular lightbox script, ported to jQuery
              • Colorbox - a jQuery lightbox
              • artDialog - 經典的網頁對話框組件
              </ul>

              22. 文檔/表格

              • handsontable - 在線可編輯excel表格
              • jQuery Bootgrid - 用于ajax生成動態表格
              • DataTables - Table plug-in for jQuery
              </ul>

              23. 目錄樹插件

              • zTree_v3 - jQuery Tree Plugin
              • jstree - jQuery Tree Plugin
              • fancytree - Tree plugin for jQuery
              </ul>

              24. Ajax模塊

              • fetch - A window.fetch JavaScript polyfill
              • reqwest - browser asynchronous http requests
              • minAjax.js
              </ul>

              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
              </ul>

              26. 按鈕

              • Buttons - A CSS button library
              </ul>

              27. 富文本編輯器/Markdown編輯器/Markdown解析器

              • Simditor - 簡單快速的富文本編輯器
              • BachEditor - 一個有情懷的編輯器
              • bootstrap-markdown
              • marked - markdown解析器
              </ul>

              28. 內容提取(Readability)

              • Readability
              • json.human.js - Json Formatting for Human Beings
              </ul>

              29. 顏色(CSS Colors)/SVG

              • CSS Colours
              • SVGeneration
              </ul>

              30. 實用工具/其他插件

              • jquery-cookie
              • FastClick - 處理移動端 click 事件 300 毫秒延遲
              • screenfull.js - 全屏切換
              • Async.js - 異步操作
              • html2canvas - 實現純JS網頁截圖
              • jquery.qrcode.js - 生成二維碼的 jQuery 插件
              • FocusPoint.js 實現圖片的響應式裁剪
              • DD_belatedPNG.js - 讓IE6支持透明PNG圖片
              • nakedpassword - 用脫衣女幫助檢測密碼強度
              </ul> 來自： CSS魔法