Share
J'ai l'impression que CodePen va être absolument rempli de Material Design dans les mois à venir. Pourquoi? Parce que Google vient de dévoiler son très attendu Material Design Lite (MDL). Cette bibliothèque de composants frontaux permet aux utilisateurs Web d'implémenter les spécifications de Google Material Design à l'aide de HTML, CSS et JavaScript de vanille. C'est une implémentation légère de la spécification Material Design (peu de dépendances, peu de frais généraux, très ciblée) d'où son surnom de «Lite»..
En publiant MDL, Google a répondu à une demande très évidente. Ils ont pris note du fait que la communauté avait déployé des efforts considérables pour créer des cadres inspirés de Material Design, tels que Bootstrap Material Design, Materialise et Material UI, pour n'en citer que quelques-uns. Avec MDL, une collaboration étroite établie avec l’équipe de Chrome UX, Google a défini un standard sur la manière dont Material Design devrait être mis en œuvre sur les sites Web..
Regardons ce que MDL a apporté à la table avec sa première version!
Contrairement aux éléments de conception en matériau polymère (également appelés éléments en papier) développés pour les sites Web et les applications hautement interactifs et axés sur les données, MDL se concentre principalement sur les sites Web au contenu plus simple, tels que les blogs, le marketing et les pages de destination..
Dans cette version initiale, MDL contient une poignée de composants, notamment:
Le composant de présentation comporte un certain nombre de blocs de construction pour la construction de pages. Par exemple, la grille: une caractéristique fondamentale de tout framework front-end. La grille de MDL est construite avec Flexbox et un peu d'aide de CSS calc (). Il comporte douze colonnes pour les grandes fenêtres, huit colonnes pour les fenêtres de la taille d'une tablette et quatre colonnes pour les petites fenêtres..
Le composant Disposition de MDL comprend également la navigation, les onglets et les pieds de page, chacun optimisé pour différentes tailles de fenêtres..
Conformément aux principes de conception des matériaux, il existe plusieurs types de boutons visuels, dont les suivants:
Chaque bouton peut être amélioré avec l'effet d'entraînement habituel.
Une carte est un conteneur d’affichage de contenu, tel que du texte et des images, qui favorise généralement une action quelconque. Par exemple, une image avec un bouton «J'aime» ou «Partager», une liste de musique avec le bouton «Lire» ou peut-être une note avec un bouton «Enregistrer»..
Un badge est un petit cercle, placé près d'un élément de l'interface utilisateur, contenant généralement un numéro (peut-être pour indiquer de nouveaux messages non lus ou des discussions entrantes) ou une icône. De nos jours, lorsque les informations circulent sans cesse sur nos appareils, un «badge» peut être considéré comme un élément d'interface utilisateur très important dans toute conception..
Les autres éléments essentiels que vous trouverez dans MDL incluent les champs de saisie, les curseurs, les options, les menus, les info-bulles et les icônes Material Design..
Rencontrer les composantsEn outre, Google fournit également quelques modèles pour vous aider à être rapidement opérationnel, avec une structure de présentation appropriée. Il existe cinq types de modèles dans cette version initiale:
Le modèle de présentation de blog MDL plutôt savoureuxLes styles MDL sont structurés avec Sass et la méthodologie BEM. Les styles peuvent être personnalisés de nombreuses manières, même avant de télécharger votre package de framework. La roue de couleur sur la page de personnalisation en est un exemple. La roue chromatique vous permet de sélectionner des accents de couleur en fonction de la sélection de couleur primaire. Le personnalisateur générera ensuite la feuille de style que vous pouvez télécharger ou associer directement à Google CDN..
Aperçu du générateur de thème MDLLe fichier material.min.css résultant est plutôt petit (17,6 Ko compressé), mais pour ceux qui ont besoin d'un contrôle total pour pouvoir tout réduire au maximum, le code source est disponible dans le référentiel Github..
La plupart des composants de MDL reposant sur des techniques Web de pointe, telles que calc (), Flexbox, querySelector, et classList, MDL ne fonctionnera que à la perfection dans les navigateurs modernes à feuilles persistantes: Chrome, Firefox, Opera, Microsoft Edge. MDL se dégradera avec élégance dans les navigateurs plus anciens, tels que IE9, en ne servant que la version CSS. Les éléments interactifs (comme l’effet d’ondulation dans le bouton, par exemple) ne seront pas présents.
Cela dit, l'interface utilisateur est toujours remarquablement présentable dans IE8. Par exemple, jetez un coup d'oeil aux boutons et à l'élément tables:
Vous seriez pardonné de penser que nous avons maintenant un cadre frontal supplémentaire à mettre dans notre boîte à outils aux côtés de Bootstrap et Foundation. Cependant, MDL n’a pas l’intention de remplacer ou de devenir un successeur de Bootstrap. La conception de matériaux fait partie de la mission de Google: veiller à ce que les interfaces utilisateur, ainsi que les expériences dans la gamme de produits, soient cohérentes, uniformes et prises en compte..
Rappelons-nous l'idée de base pour un moment:
"Nous nous sommes mis au défi de créer pour nos utilisateurs un langage visuel qui synthétise les principes classiques d'un bon design avec l'innovation et les possibilités offertes par la technologie et la science." - Google Material Design Introduction
N'oubliez donc pas que, même si MDL correspond bien aux produits Google, il peut être hors contexte lorsqu'il est implémenté dans un site Web qui n'a rien à voir avec Google. Cependant, comme nous venons de le découvrir, Google fournit un contrôle total sur le code source, ce qui nous permet de le personnaliser dans les moindres détails. Et c'est ce dont nous allons parler dans le prochain article. Alors restez à l'écoute!
Accentsconagua