Comment utiliser Material Design dans vos applications ?
Le Material Design est un ensemble de règle de design pour les interfaces graphiques proposées par Google. Dans la mouvance du flat design, Google l’a rendu populaire à l’appliquant à ses services et applications en 2015. Dernierement il a été poussé encore plus sur le devant de la scène avec le logo de Google. Comment utiliser Material Design dans vos application ? Je vous propose un tour d’horizon des framework actuels.
Materialize
Framework responsive front-end. CSS, SCSS, JavaScript, icons, Roboto font.
Material UI
Framework CSS et un ensemble de composant pour React qui implémente le Material Design de Google.
MUI CSS Framework
Un framework CSS léger comprenant des composants pour React et des WebComponents
Polymer
Créer des composants web riches et réutilisables.
https://www.polymer-project.org/1.0/
Angular Material
Une implementation du Material Design pour AngularJS
https://material.angularjs.org/latest/#/
Ember
Ember Materialize
https://www.npmjs.com/package/ember-cli-materialize
Ember Paper
http://miguelcobain.github.io/ember-paper/
Ionic Material
Une implementation pour Ionic (cordova + angularjs + love)
Material Design Lite
Framework comprenant CSS, JS et icon
http://www.getmdl.io/index.html
Bootstrap
si vous souhaitez continuer à exploiter vos connaissances Bootstrap, c’est possible :
Paper Bootswatch for Bootstrap
Material Design for Bootstrap
http://fezvrasta.github.io/bootstrap-material-design/
Comme vous avez pu le voir, quelque soit le framework que vous utilisez, vous disposez d’une implémentation du Material Design.
- Materialize ou un thème Bootstrap pour un projet « classique »;
- Angular Material pour AngularJS
- Material UI pour ReactJS
- Ember Materialize ou Paper pour EmberJS
- Ionic Material pour Ionic
- Polymer pour les webcomponents
Références:
Spéc du Material Design : https://www.google.com/design/spec/material-design/introduction.html