├── logo.svg └── readme.md /logo.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Logo Badge 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # UI Components 4 | 5 | ### Charts 6 | 7 | - [chart.js](https://github.com/chartjs/Chart.js) 8 | - [echarts](https://github.com/ecomfe/echarts) 9 | 10 | ### Maps 11 | 12 | - [leaflet](https://github.com/Leaflet/Leaflet) 13 | - [gmaps](https://github.com/HPNeo/gmaps) 14 | - [mapbox.js](https://github.com/mapbox/mapbox.js) 15 | - [openlayers](https://github.com/openlayers/openlayers) 16 | 17 | #### 3D 18 | 19 | - [cesium](https://github.com/AnalyticalGraphicsInc/cesium) 20 | 21 | ### Carousel 22 | 23 | - [swiper](https://github.com/nolimits4web/Swiper) 24 | - [flickity](https://github.com/metafizzy/flickity) 25 | 26 | 27 | ###### Overlay 28 | 29 | *Overlay / modal / alert / dialog / lightbox / popup* 30 | 31 | - [sweetalert](https://github.com/t4t5/sweetalert) 32 | 33 | 34 | ### Notification 35 | 36 | *Toaster / snackbar — Notify the user with a modeless temporary little popup* 37 | 38 | - [humane-js](https://github.com/wavded/humane-js) 39 | - [notie](https://github.com/jaredreich/notie) 40 | 41 | 42 | ### Loader 43 | 44 | *Let the user know that something is loading* 45 | 46 | - [ladda](https://github.com/hakimel/Ladda) 47 | 48 | 49 | #### Spinner 50 | 51 | - [spin.js](https://github.com/fgnass/spin.js) 52 | - [spinkit](https://github.com/tobiasahlin/SpinKit) 53 | 54 | 55 | #### Progress bar 56 | 57 | - [mprogress](https://github.com/lightningtgc/MProgress.js) 58 | - [nprogress](https://github.com/rstacruz/nprogress) 59 | - [progressbar.js](https://github.com/kimmobrunfeldt/progressbar.js) 60 | - [topbar](https://github.com/buunguyen/topbar) 61 | - [nanobar](https://github.com/jacoborus/nanobar) 62 | 63 | 64 | ### Tooltip 65 | 66 | - [hint.css](https://github.com/chinchang/hint.css) 67 | 68 | 69 | ### Menu 70 | 71 | - [slideout](https://github.com/mango/slideout) 72 | 73 | ### Header 74 | 75 | *Fixed headers / scroll-up headers / sticky elements* 76 | 77 | - [headroom.js](https://github.com/WickyNilliams/headroom.js) 78 | 79 | ### Drag and Drop 80 | - [dragula](https://github.com/bevacqua/dragula) 81 | 82 | ### File Upload 83 | - [dropzone](https://github.com/enyo/dropzone) 84 | - [@flowjs/flow.js](https://github.com/flowjs/flow.js) 85 | - [fine-uploader](https://github.com/FineUploader/fine-uploader) 86 | 87 | ### PDF 88 | 89 | - [pdfjs-dist](https://github.com/mozilla/pdf.js) 90 | 91 | ### Media 92 | 93 | - [mediaelement](https://github.com/johndyer/mediaelement) 94 | 95 | #### Video 96 | 97 | - [video.js](https://github.com/videojs/video.js) 98 | - [flowplayer](https://github.com/flowplayer/flowplayer) 99 | - [clappr](https://github.com/clappr/clappr) 100 | 101 | #### Audio 102 | 103 | - [SoundJS](https://github.com/CreateJS/SoundJS) 104 | 105 | ### Image Gallery 106 | - [photoswipe](https://github.com/dimsemenov/PhotoSwipe) 107 | - [baguettebox.js](https://github.com/feimosi/baguetteBox.js) 108 | 109 | ### Rich Text Editors 110 | - [quill](https://github.com/quilljs/quill) 111 | - [medium-editor](https://github.com/yabwe/medium-editor) 112 | 113 | ### Parallax 114 | 115 | - [parallax-js](https://github.com/wagerfield/parallax) 116 | - [scrollmonitor-parallax](https://github.com/stutrek/scrollmonitor-parallax) 117 | 118 | ### Code highlighting 119 | - [prismjs](https://github.com/PrismJS/prism) 120 | - [highlight.js](https://github.com/isagalaev/highlight.js) 121 | 122 | ### Form 123 | 124 | *Let the user enter data* 125 | 126 | #### Date / Time picker 127 | 128 | *Date picker / time picker / datetime picker / date range picker* 129 | 130 | - [pikaday](https://github.com/dbushell/Pikaday) 131 | - [rome](https://github.com/bevacqua/rome) 132 | 133 | 134 | #### Input Types 135 | 136 | *Masked inputs, specialized inputs; email / telephone number / credit card / etc.* 137 | 138 | - [vanilla-masker](https://github.com/fernandofleury/vanilla-masker) 139 | 140 | 141 | #### Autocomplete 142 | 143 | *Autosuggest / autocomplete / typeahead* 144 | 145 | - [awesomplete](https://github.com/LeaVerou/awesomplete) 146 | 147 | #### Range slider 148 | - [nouislider](https://github.com/leongersen/noUiSlider) 149 | 150 | 151 | #### Source Code Editor 152 | - [codemirror](https://github.com/codemirror/CodeMirror) 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | # UI Animation 161 | - [velocity-animate](https://github.com/julianshapiro/velocity) 162 | - [mo-js](https://github.com/legomushroom/mojs) 163 | - [animejs](https://github.com/juliangarnier/anime) 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | # UI Layout 173 | 174 | *Layout the overall / main view* 175 | 176 | - [scrollreveal](https://github.com/jlmakes/scrollreveal) 177 | - [masonry-layout](https://github.com/desandro/masonry) 178 | - [sequencejs](https://github.com/IanLunn/Sequence) 179 | 180 | ## Responsive Design 181 | 182 | - [flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid) 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | # UI Utilities 192 | 193 | ## Reporters 194 | 195 | *Report changes about a DOM element* 196 | 197 | ### Scroll 198 | 199 | - [scrollmonitor](https://github.com/stutrek/scrollMonitor) 200 | 201 | 202 | ## Device Input 203 | 204 | *Turn user input into actions* 205 | 206 | ### Touch Events 207 | 208 | - [hammerjs](https://github.com/hammerjs/hammer.js) 209 | 210 | ### Scroll 211 | 212 | - [iScroll](https://github.com/cubiq/iscroll) 213 | 214 | 215 | ## Image backgrounds 216 | 217 | - [multiple.js](https://github.com/NeXTs/Multiple.js) 218 | 219 | 220 | ## Clipboard 221 | 222 | - [clipboard](https://github.com/zenorocha/clipboard.js) 223 | 224 | 225 | ## HTTP requests 226 | 227 | - [axios](https://github.com/mzabriskie/axios) 228 | - [whatwg-fetch](https://github.com/github/fetch) 229 | 230 | 231 | ## HTML5 support 232 | 233 | - [modernizr](https://github.com/Modernizr/Modernizr) 234 | 235 | 236 | 237 | 238 | 239 | # UI Performance 240 | 241 | ## Large Lists 242 | 243 | *Display large lists* 244 | 245 | - [clusterize.js](https://github.com/NeXTs/Clusterize.js) 246 | 247 | ## List Filter 248 | 249 | *Filter large lists* 250 | 251 | - [jets](https://github.com/NeXTs/Jets.js) 252 | 253 | 254 | 255 | 256 | 257 | 258 | # UI Frameworks 259 | 260 | ## Responsive 261 | 262 | - [bootstrap](https://github.com/twbs/bootstrap) 263 | - [semantic-ui](https://github.com/Semantic-Org/Semantic-UI) 264 | 265 | ## Layout 266 | 267 | *Framework to layout your app in a specific way* 268 | 269 | - [fullpage.js](https://github.com/alvarotrigo/fullPage.js) 270 | 271 | 272 | # Scaffold 273 | 274 | - [html5-boilerplate](https://github.com/h5bp/html5-boilerplate) 275 | - [MEAN Stack](https://github.com/linnovate/mean) 276 | 277 | 278 | 279 | # Dev tools 280 | 281 | - [json-server](https://github.com/typicode/json-server) 282 | 283 | ## Package manager 284 | 285 | - [npm](https://github.com/npm/npm) 286 | - [jspm](https://github.com/jspm/jspm-cli) 287 | 288 | ## Module loader 289 | 290 | - [systemjs](https://github.com/systemjs/systemjs) 291 | --------------------------------------------------------------------------------