ui-tutorial.md

框架篇

• Spectre.css
• Foundation
• Bootcss
• Element UI
• ANT DESIGN
• iview(Vue)
• Smart UI
• MetroUICSS
• Semantic
• Layui
• Buttons
• kitecss
• pintuer
• amazeui
• worldhello
• linuxtoy
• gitmagic
• rogerdudler
• gitref
• book
• gogojimmy

组件篇

• shoelace-style/shoelace: _{A collection of professionally designed, every day UI components built on a framework-agnostic technology.}
• PhotoSwipe: _{JavaScript image gallery for mobile and desktop, modular, framework independent}
• moveable: _{↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! https://daybrush.com/moveable}
• draggable: _{The JavaScript Drag & Drop library your grandparents warned you about. https://shopify.github.io/draggable}
• shepherd: _{Guide your users through a tour of your app}
• filebrowser: _{📂 Web File Browser which can be used as a middleware or standalone app. https://filebrowser.xyz}
• handsontable: _{Handsontable Community Edition - JavaScript/HTML5 Data Grid Component with Spreadsheet Look & Feel. Available for React, Vue and Angular. https://handsontable.com/}
• wiredjs/wired-elements：_{Collection of elements that appear hand drawn. Great for wireframes. https://wiredjs.com}
• nhnent/tui.calendar: _{🍞📅A JavaScript calendar that everything you need. http://ui.toast.com/tui-calendar}
• tippyjs: _{Highly customizable tooltip and popover library https://atomiks.github.io/tippyjs}
• kenwheeler/slick: _{the last carousel you'll ever need}
• scrollreveal: _{Animate elements as they scroll into view. https://scrollrevealjs.org}
• ScrollMagic: _{The javascript library for magical scroll interactions. http://ScrollMagic.io}
• rcbyr/keen-slider: _{The HTML touch slider carousel with the most native feeling}
• web-padawan/vanilla-colorful: _{A tiny color picker custom element for modern web apps (2.7 KB) 🎨}
• nolanlawson/emoji-picker-element: _{A lightweight emoji picker for the modern web}

可视化

• d3: _{Bring data to life with SVG, Canvas and HTML. 📊📈🎉 https://d3js.org}
• antvis/g6: _{A Graph Visualization Framework in JavaScript}
• incubator-echarts: _{A powerful, interactive charting and visualization library for browser http://echarts.baidu.com/}
• leeoniya/uPlot: _{📈 A small, fast chart for time series, lines, areas, ohlc & bars}
• metafizzy/zdog: _{Flat, round, designer-friendly pseudo-3D engine for canvas & SVG https://zzz.dog}
• alyssaxuu/flowy: _{The minimal javascript library to create flowcharts ✨}
• AnalyticalGraphicsInc/cesium: _{An open-source JavaScript library for world-class 3D globes and maps 🌎}
• plotly.js: _{Open-source JavaScript charting library behind plot.ly and Dash}
• beizhedenglong/rough-charts: _{📈 A responsive, composable react charting library with a hand-drawn style.}
• blocks/blocks: _{A JSX-based page builder for creating beautiful websites without writing code https://blocks-ui.com}
• highcharts: _{Make your data come alive. Highcharts makes it easy for developers to set up interactive charts in their web pages}
• anychart: _{AnyChart is a lightweight and robust JavaScript charting solution with great API and documentation. The chart types and unique features are numerous, and the library works easily with any development stack.}
• x-spreadsheet: _{A web-based JavaScript（canvas） spreadsheet https://myliang.github.io/x-spreadsheet}
• Leaflet: _{🍃 JavaScript library for mobile-friendly interactive maps https://leafletjs.com}
• williamngan/pts: _{A library for visualization and creative-coding https://ptsjs.org}
• apexcharts.js: _{📊 Interactive and Modern SVG Charts https://apexcharts.com}
• processing/p5.js: _{p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — http://p5js.org}
• alibaba/butterfly: _{🦋Butterfly，A JavaScript Diagramming library which concentrate on flow layout field}
• daybrush/moveable: _{Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!}
• retejs/rete: _{JavaScript framework for visual programming and creating node editor}
• bradley/Blotter: _{A JavaScript API for drawing unconventional text effects on the web. https://blotter.js.org/}

可视化编辑器

• LianjiaTech/hetu: _{低代码平台, 可视化编辑器，单手打代码，解放你的双手}

布局篇

• Magic-Grid: _{A simple, lightweight Javascript library for dynamic grid layouts}

在线绘制

• excalidraw/excalidraw: _{Virtual whiteboard for sketching hand-drawn like diagrams}
• wozhishilaonanhai/dragUI: _{基于 vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件}

其他篇

• StoryBook: _{UI component dev & test: React, Vue, Angular, React Native, Ember & more!}
• JS 触屏教程之 Hammer.js