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

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

Related Post

Bien débuter avec Git J’ai utilisé Git de manière assez basique avec GitHub et Bitbucket pour des tests et des POC personnels. Dernièrement j’ai découvert un GitLab dans ma...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *