Le framework Front end Material Design Lite de google

Material Design Lite

Nous allons beaucoup jouer avec Codepen le long de ce tutoriel, depuis que google a dévoilé son nouveau framework d’intégration Material Design Light ( MDL ) qui intègrera à la fois le html, le css et le javascript.

Ce framework Front End est très légère du fait même de sa conception (de moins en moins de dépendance, très peu de surcharge…) d’où son appellation Lite.

En rendant MDL disponible pour le grand public, google a pris du note du fait que plusieurs communautés ont voulu créer une framework plus ou moins qui tourne autour de MDL comme : Bootstrap Material Design, Materialize, et Material UI.

Maintenant, prenons le temps de rentrer dans le ventre de MDL.

Le Material Design Components

Contrairement à Polymer Material Design Elements (aussi appelé Elements paper) qui sont des outils développés pour des sites web applicative plus orientées données, MDL se concentre plutôt sur des sites Web avec contenu simple tels que blogs, les site marketing et les landing pages.

Dans cette nouvelle version, MDL est livré avec une flopée de composants que nous allons dévoiler petit à petit:

Le Layout

Le layout de MDL se base sur un système de grid comme sur presque tous les framework front end ( comme bootstrap, foundation …).

Le grid de MDL est construit avec le module CSS3 Flexbox appuyer par la fonction calc()
Il est formé par douze colonnes prévues pour les grandes résolutions ( desktop ), huit colonnes pour ce qu’on pourrait appeler des résolutions moyennes (tablettes), et quatre colonnes pour les petites résolutions ( mobiles ).

La composante de la mise en page du MDL comprend également le nav, les onglets, et le footer dont chacune ont été optimisés pour les différentes résolutions.

Les Boutons

Selon les principes du Material Design Light, il existe plusieurs types de boutons ou des liens:

  • Bouton normal: un bouton rectangulaire basique avec un background différente du couleur du texte
  • Bouton plat: un bouton simple sans background.
  • Float Action Button (or FAB): une bouton circulaire qui flotte sur la page avec des états différents sur chaque action ( active, hover, focus …)

Au passage tous les types de boutons pourront être animés par le ripple effect en jouant avec la classe mdl-js-ripple-effect.

Les Cartes ( Cards )

Détrompez vous on parle pas de map ici mais plutôt d’un conteneur pour l’affichage un contenu texte ou image qu’il faut mettre en évidence.
Par exemple, une image avec un bouton “like”, une liste de musique avec le bouton “play”, ou un formulaire avec un bouton “Enregistrer”.

Les Badges

Un badge est un petit cercle rattaché à un UI element ,contenant dans la plupart des cas une valeur numérique ( utiliser pour indiquer les nouveaux messages non lus ou le nombre d’éléments dans le panier) ou une icône.

De nos jours, où l’information évolue en permanence le “badge” peut être considérée comme un élément de l’interface utilisateur très important dans toute conception.

Et il y a plus encore

Autres éléments essentiels que vous trouverez dans MDL comprennent les champs de saisie, sliders, toggles, menus, tooltips, et aussi le Material Design icons.

En outre, Google fournit également un ensemble de template qui pourra vous aider à démarrer rapidement un projet.

Il existe cinq types de modèles dans cette version initiale:
1. Un blog
2. Un article
3. Une landing page
4. Un tableau de bord
5. Une page d’affichage de contenu lourd (en texte )

Material Design Lite

Personnalisation

MDL est structuré avec le compresseur CSS Sass. Les styles peuvent être personnalisés de nombreuses façons et même avant le téléchargement du framework package.

L’un des techniques qu’on pourrait utiliser est de générer directement les couleurs sur Customize page .
La roue des couleurs vous permet de sélectionner les nuances de couleur basée sur la sélection de couleurs primaires. Le customizer va alors générer la feuille de style, que vous pourrez télécharger, ou utiliser directement la feuille de style du CDN de google.

Le fichier généré material.min.css est très léger (17.6kB gzip), mais pour ceux qui ont besoin de personnaliser au maximum le rendu, le code source est disponible sur le dépôt Github du projet.

Compatibilité navigateur du framework

Comme la plupart des composants présent dans MDL sont construits avec les dernières module CSS3 tels que calc(), Flexbox, querySelector et classList MDL fonctionnera parfaitement que sur les navigateurs modernes: Chrome, Firefox, Opera, Microsoft Edge.

MDL s’affichera en mode dégradé sur les navigateurs plus anciens, comme IE9, en servant la version CSS seulement.
Les éléments interactifs (comme le ripple effect sur les boutons, par exemple) ne seront pas présents.

Répondre