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

Materialize

Framework responsive front-end. CSS, SCSS, JavaScript, icons, Roboto font.

http://materializecss.com/

Material UI

MaterialUI

Framework CSS et un ensemble de composant pour React qui implémente le Material Design de Google.

http://material-ui.com/

MUI CSS Framework

MUI

Un framework CSS léger comprenant des composants pour React et des WebComponents

https://www.muicss.com/

Polymer

Polymer

Créer des composants web riches et réutilisables.

https://www.polymer-project.org/1.0/

Angular Material

AngularMaterial

Une implementation du Material Design pour AngularJS

https://material.angularjs.org/latest/#/

Ember

Ember Materialize

EmberMaterialize

https://www.npmjs.com/package/ember-cli-materialize

Ember Paper

EmberPaper

http://miguelcobain.github.io/ember-paper/

Ionic Material

IonicMaterial

Une implementation pour Ionic (cordova + angularjs + love)

http://ionicmaterial.com/

Material Design Lite

MDL

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

http://bootswatch.com/paper/

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