207 lines
9.2 KiB
HTML
207 lines
9.2 KiB
HTML
<h1 id="awesome-material-design-awesome">Awesome Material Design <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p>A curated list of Google’s <a
|
||
href="http://www.google.com/design/spec">material design</a> based
|
||
libraries, resources and awesome things.</p>
|
||
<h1 id="icons-fonts-and-colors">Icons, Fonts and Colors</h1>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/google/material-design-icons">material-design-icons</a>
|
||
— Material Design icons by Google.</li>
|
||
<li><a
|
||
href="https://github.com/zavoloklom/material-design-iconic-font">material-design-iconic-font</a>
|
||
— Material Design Iconic Font and CSS toolkit.</li>
|
||
<li><a
|
||
href="https://github.com/designjockey/material-design-fonticons">material-design-fonticons</a>
|
||
— Material Design Fonticons is a font converted version of the Google
|
||
Material Design Icon set.</li>
|
||
<li><a
|
||
href="https://github.com/shuhei/material-colors">material-colors</a> —
|
||
Colors of Google’s Material Design made available to coders.</li>
|
||
<li><a
|
||
href="https://github.com/mrmlnc/material-color">material-color</a> — The
|
||
colour palette, based on Google’s Material Design, for use in your
|
||
project.</li>
|
||
<li><a
|
||
href="https://github.com/tisign/LESS-Material-design-colors">LESS-Material-design-colors</a>
|
||
— A .less file with al the Google material design colors.</li>
|
||
<li><a
|
||
href="https://github.com/minusfive/sass-material-colors">sass-material-colors</a>
|
||
— An easy way to use Google’s Material Design colors in your Sass/Scss
|
||
project.</li>
|
||
<li><a
|
||
href="https://github.com/Seb-L/Google-Material-Design-Font-Icon">Google-Material-Design-Font-Icon</a>
|
||
— Font Icon based on Google Material Design Icon set.</li>
|
||
<li><a href="https://materialdesignicons.com/">Material Design Icons</a>
|
||
— Community generated Material Design icon pack.</li>
|
||
<li><a href="https://romannurik.github.io/AndroidAssetStudio/">Android
|
||
Asset Studio</a> — A web-based set of tools for generating graphics and
|
||
other assets that would eventually be in an Android application’s res/
|
||
directory.</li>
|
||
</ul>
|
||
<h1 id="animation">Animation</h1>
|
||
<ul>
|
||
<li>JavaScript
|
||
<ul>
|
||
<li><a href="https://github.com/fians/Waves">Waves</a> — Click effect
|
||
inspired by Google’s Material Design.</li>
|
||
<li><a
|
||
href="https://github.com/swirlycheetah/material-design-hamburger">material-design-hamburger</a>
|
||
— Android’s Material Design hamburger animation built in CSS.</li>
|
||
<li><a
|
||
href="https://github.com/aarondo/Material-Preloader">Material-Preloader</a>
|
||
— A jQuery plugin that recreates the Material Design pre-loader (as seen
|
||
on inbox).</li>
|
||
<li><a
|
||
href="https://github.com/ninox92/Google-material-design-ripple-effect">Google-material-design-ripple-effect</a>
|
||
— jQuery plugin recreates ripple and focus effect.</li>
|
||
</ul></li>
|
||
</ul>
|
||
<h1 id="components">Components</h1>
|
||
<ul>
|
||
<li><a href="https://github.com/alexk111/SVG-Morpheus">SVG-Morpheus</a>
|
||
— JavaScript library enabling SVG icons to morph from one to the other.
|
||
It implements Material Design’s Delightful Details transitions.</li>
|
||
<li><a
|
||
href="https://github.com/Fraina/Material-Design-ColorPicker">Material-Design-ColorPicker</a>
|
||
— A Material Design Color Picker.</li>
|
||
<li><a
|
||
href="https://github.com/zavoloklom/material-design-color-palette">material-design-color-palette</a>
|
||
— Material Design Color Palette: LESS/CSS toolkit.</li>
|
||
<li><a
|
||
href="https://github.com/dotlouis/md-timepicker">md-timepicker</a> — A
|
||
Polymer Timepicker element in Material Design.</li>
|
||
<li><a href="https://github.com/SimeonC/md-date-time">md-date-time</a> —
|
||
A Date-Time picker based on Googles Material Design Spec.</li>
|
||
<li><a
|
||
href="https://github.com/nobitagit/ng-material-floating-button">ng-material-floating-button</a>
|
||
— Material design floating menu with action buttons implemented as an
|
||
Angularjs directive.</li>
|
||
<li><a
|
||
href="https://devexpress.github.io/devextreme-reactive/react">DevExtreme
|
||
Reactive</a> - High-performance plugin-based React components for
|
||
Material Design.</li>
|
||
</ul>
|
||
<h1 id="css">CSS</h1>
|
||
<ul>
|
||
<li><a href="https://github.com/mildrenben/surface">Surface</a> — A
|
||
lightweight, CSS only framework based on Material Design.</li>
|
||
<li><a href="https://github.com/callemall/material-ui">material-ui</a> —
|
||
A CSS Framework and a Set of React Components that Implement Google’s
|
||
Material Design.</li>
|
||
<li><a
|
||
href="https://github.com/FezVrasta/bootstrap-material-design">bootstrap-material-design</a>
|
||
— Material design theme for Bootstrap 3.</li>
|
||
<li><a href="https://github.com/Dogfalo/materialize">materialize</a> —
|
||
Materialize, a CSS Framework based on Material Design.</li>
|
||
<li><a
|
||
href="https://github.com/throrin19/materialBootstrap">materialBootstrap</a>
|
||
— Twitter Bootstrap theme for Google material design.</li>
|
||
<li><a
|
||
href="https://github.com/ebidel/material-playground">material-playground</a>
|
||
— Polymer material design playground.</li>
|
||
<li><a
|
||
href="https://github.com/nt1m/material-framework">material-framework</a>
|
||
— An easy to use material design based framework.</li>
|
||
<li><a href="https://github.com/muicss/mui">mui</a> — A lightweight CSS
|
||
framework that follows Material Design guidelines.</li>
|
||
<li><a
|
||
href="https://github.com/eucalyptuss/material-foundation">material-foundation</a>
|
||
— A Material Design version of Foundation for Sites.</li>
|
||
<li><a href="https://www.tronic247.com/material/">Tronic247 Material</a>
|
||
- A material design framework based on jQuery and CSS</li>
|
||
</ul>
|
||
<h1 id="js">JS</h1>
|
||
<ul>
|
||
<li><a href="https://github.com/angular/material">AngularJS</a> —
|
||
Material design for AngularJS.</li>
|
||
<li><a href="https://github.com/angular/material2">Angular</a> —
|
||
Material design for Angular.</li>
|
||
<li><a href="https://js.devexpress.com">DevExtreme</a> — 65+ responsive
|
||
and feature-complete UI components with customizable Material Design
|
||
compliant themes. Available for Angular, React, Vue and jQuery.</li>
|
||
<li><a
|
||
href="https://github.com/miguelcobain/ember-paper">ember-paper</a> — The
|
||
Ember approach to Material Design.</li>
|
||
<li><a
|
||
href="https://github.com/google/material-design-lite/">material-design-lite</a>
|
||
— Material Design Lite Components in HTML/CSS/JS.</li>
|
||
<li><a href="https://mui.com/">MUI</a> — The React component library of
|
||
Material Design</li>
|
||
<li><a
|
||
href="https://github.com/BerkeleyTrue/react-material">react-material</a>
|
||
— Material design components written with React.js and React Style.</li>
|
||
</ul>
|
||
<h1 id="sass">SASS</h1>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/nkpfstr/quantum-colors">quantum-colors</a> —
|
||
Material Design color palette for your Sass projects.</li>
|
||
<li><a
|
||
href="https://github.com/nkpfstr/quantum-shadows">quantum-shadows</a> —
|
||
Material Design drop shadows for your Sass projects.</li>
|
||
<li><a
|
||
href="https://github.com/axyz/google-material-design">google-material-design</a>
|
||
— Small SASS library inspired by google material design guidelines.</li>
|
||
</ul>
|
||
<h1 id="wordpress">WordPress</h1>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/alexpatin/MaterialPress">MaterialPress</a> —
|
||
MaterialPress is a WordPress theme, influenced heavily by Google’s
|
||
Material Design philosophy.</li>
|
||
<li><a
|
||
href="https://github.com/braginteractive/materialwp">materialwp</a> —
|
||
Material Design WordPress Theme.</li>
|
||
</ul>
|
||
<h1 id="winforms">WinForms</h1>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/IgnaceMaes/MaterialSkin">MaterialSkin</a> —
|
||
Theming .NET WinForms, C# or VB.Net, to Google’s Material Design
|
||
Principles.</li>
|
||
</ul>
|
||
<h1 id="xaml">XAML</h1>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/ButchersBoy/MaterialDesignInXamlToolkit">MaterialDesignInXamlToolkit</a>
|
||
— Google’s Material Design in XAML & WPF, for C# & VB.Net.</li>
|
||
</ul>
|
||
<h1 id="other">Other</h1>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/1sters/material_design_zh">material_design_zh</a>
|
||
— Material Design Collaborative Chinese translation</li>
|
||
<li><a
|
||
href="https://github.com/paradox41/material-color-scheme">material-color-scheme</a>
|
||
— Sublime Text syntax theme based off the Material Design color
|
||
palette.</li>
|
||
<li><a href="https://github.com/Framaterial/framaterial">framaterial</a>
|
||
— A Framework to create Material Design projects.</li>
|
||
<li><a href="http://themeforest.net/tags/material%20design">Material
|
||
Design Templates</a> — Various material design inspired themes and
|
||
templates on ThemeForest.</li>
|
||
<li><a href="http://www.materialup.com/">MaterialUp</a> — Get your daily
|
||
dose of Material design inspiration!</li>
|
||
<li><a href="http://www.materialpalette.com/">Material Palette</a> —
|
||
Choose your favorite colors and generate your Material Design
|
||
palette.</li>
|
||
<li><a
|
||
href="https://elements.polymer-project.org/browse?package=paper-elements">Paper
|
||
Polymer Elements</a> — Paper elements are a set of visual elements that
|
||
implement Google’s Material Design.</li>
|
||
<li><a href="https://scaffoldhub.io">ScaffoldHub.io</a> — Generate full
|
||
Angular Material applications with an online modeling tool!</li>
|
||
</ul>
|
||
<h1 id="other-awesome-lists">Other Awesome Lists</h1>
|
||
<p>Other amazingly awesome lists can be found in the <a
|
||
href="https://github.com/bayandin/awesome-awesomeness">awesome-awesomeness</a>
|
||
list.</p>
|
||
<h2 id="contributing">Contributing</h2>
|
||
<p>Your contributions are always welcome! Please read the <a
|
||
href="contributing.md">contribution guidelines</a> first.</p>
|
||
<p><a href="https://github.com/sachin1092/awesome-material">material.md
|
||
Github</a></p>
|