MDC-103 Web: Utilisation des thèmes de Material Design (couleur, formes, élévation et type) (Web)

1. Introduction

Material Components (MDC) aide les développeurs à implémenter Material Design. Conçu par une équipe d'ingénieurs et de spécialistes de l'expérience utilisateur chez Google, MDC propose des dizaines de composants d'interface utilisateur élégants et fonctionnels. Il est disponible pour Android, iOS, le Web et Flutter.material.io/develop.

Dans les ateliers de programmation MDC-101 et MDC-102, vous avez utilisé Material Components (MDC) pour concevoir les bases de Shrine, une application d'e-commerce pour la vente de vêtements et d'articles pour la maison. Le parcours utilisateur de cette application commence par un écran de connexion, qui redirige ensuite l'utilisateur vers un écran d'accueil contenant des produits.

Material Design a récemment été étendu pour offrir aux concepteurs et aux développeurs une plus grande flexibilité pour exprimer la marque de leur produit. Dans cet atelier de programmation, vous allez utiliser MDC pour personnaliser l'application Shrine afin de refléter le style unique de la marque plus que jamais.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez personnaliser Shrine afin de refléter sa marque à l'aide des éléments suivants:

• Couleur
• Typographie
• Élévation
• Forme
• Mise en page

Cet atelier est le dernier des trois ateliers de programmation qui vous aideront à créer une application appelée Shrine.

Voici les ateliers de programmation associés :

• MDC-101 : Principes de base de Material Components (MDC)
• MDC-102 : Structure et mise en page Material Design

Composants et sous-systèmes Web de MDC utilisés dans cet atelier de programmation

• Thème
• Typographie
• Élévation
• Liste d'images

Prérequis

• Une version récente de Node.js (fournie avec npm, un gestionnaire de packages JavaScript)
• L'exemple de code (à télécharger à l'étape suivante)
• Connaissances de base de HTML, CSS et JavaScript

Comment évalueriez-vous votre niveau d'expérience en développement Web ?

<ph type="x-smartling-placeholder"></ph> Débutant Intermédiaire Expert .

2. Configurer l'environnement de développement

Vous avez déjà suivi l'atelier MDC-102 ?

Si vous avez fini l'atelier de programmation MDC-102, votre code devrait être prêt pour commencer cet atelier. Passez à l'étape 3: Modifier la couleur.

Télécharger l'application de départ de l'atelier de programmation

Télécharger l'application de démarrage

Elle se trouve dans le répertoire material-components-web-codelabs-master/mdc-103/starter. Assurez-vous d'accéder à ce répertoire avec la commande cd avant de commencer.

Notez le suffixe -master dans le nom du répertoire racine. Si vous téléchargez l'application de démarrage à l'aide du bouton ci-dessus, veuillez ajouter le suffixe -master chaque fois que vous faites référence au répertoire racine dans le reste de cet atelier de programmation.

… ou cloner l'atelier depuis GitHub

Pour cloner cet atelier de programmation à partir de GitHub, exécutez les commandes suivantes :

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-103/starter

Pour obtenir de l'aide, consultez la section Cloner un dépôt depuis GitHub

Installer les dépendances du projet

À partir du répertoire de démarrage material-components-web-codelabs/mdc-103/starter (si vous suivez la procédure ci-dessus, il devrait s'agir de votre répertoire actuel), exécutez la commande suivante:

npm install

Vous verrez de nombreuses activités et, à la fin, votre terminal devrait indiquer une installation réussie:

MDC Web utilise un préprocesseur CSS appelé Sass. Si vous utilisez un autre préprocesseur CSS (voire aucun), ce n'est pas un problème. Vous pouvez utiliser Sass avec votre préprocesseur actuel en installant la CLI sass ou en utilisant un plug-in (par exemple, sass-loader pour Webpack, gulp-sass pour Gulp ou grunt-sass pour Grunt) dans votre chaîne d'outils de compilation.

Pour que notre code fonctionne dans des navigateurs plus anciens comme IE 11, nous utilisons un transcompilateur appelé Babel pour convertir la syntaxe JavaScript ES2015 de MDC Web en syntaxe JavaScript ES5.

Nous allons utiliser webpack pour regrouper nos fichiers et diffuser notre site localement. La configuration webpack pour ce projet a déjà été définie dans le fichier webpack.config.js. Pour en savoir plus sur sa configuration, consultez le guide de démarrage.

Exécuter l'application de départ

Dans le même répertoire, exécutez la commande suivante:

npm start

webpack-dev-server va démarrer. Saisissez l'adresse http://localhost:8080/ dans votre navigateur pour afficher la page.

Si vous n'avez pas réussi à exécuter npm install ou npm start, arrêtez votre environnement de développement et dépannez-le.

Opération réussie. La page de connexion de Shrine doit s'exécuter dans votre navigateur. Renseignez les champs "Nom d'utilisateur" et "Mot de passe", puis cliquez sur "Suivant". pour accéder à la page d'accueil. Il devrait afficher un panneau de navigation à gauche, à côté d'une grille d'images des produits.

Bien que le panneau de navigation soit fonctionnel, faisons en sorte qu'il corresponde à la marque Shrine en modifiant sa couleur, son élévation et sa typographie.

3. Modifier la couleur

Ce thème de couleur a été créé par un graphiste à partir de couleurs personnalisées (illustrées sur l'image ci-dessous). Il contient des couleurs sélectionnées à partir de la marque Shrine et appliquées à Material Theme Editor, une extension qui permet de créer une palette plus complète. (Ces couleurs ne proviennent pas des palettes de couleurs Material 2014.)

Modifions la couleur du panneau de navigation de l'application Shrine afin de refléter ce jeu de couleurs.

Remplacer les couleurs du thème

Créez un fichier nommé _variables.scss, contenant les éléments suivants:

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

Importez-le ensuite tout en haut de _common.scss:

@import "./variables";

Toutes les variables globales que vous souhaitez remplacer (par exemple, $mdc-theme-primary ou $mdc-theme-secondary) doivent être déclarées avant d'importer les composants. styles dans vos fichiers *.scss. Dans ce cas, _common.scss est une partie partielle importée avant tout autre élément dans login.scss et home.scss. Elle s'applique donc aux deux pages. .

Ajouter un style CSS au panneau de navigation

Dans home.scss, ajoutez l'instruction d'importation suivante après les importations existantes:

@import "@material/ripple/mixins";

Ajoutez ensuite les styles suivants, en créant la classe .shrine-drawer:

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

Nous avons importé @material/ripple/mixins pour prendre en charge notre utilisation du mixin mdc-states-activated qu'il fournit. Le package MDC Ripple fournit à la fois des mixins mdc-ripple et mdc-states, car l'ondulation est directement liée au système d'états.

Actualisez la page http://localhost:8080/home.html. Votre écran d'accueil devrait maintenant se présenter comme suit :

Changeons la couleur de l'écran de connexion pour qu'elle corresponde à notre jeu de couleurs.

Ajouter un style CSS à la page de connexion

Dans login.scss, ajoutez les lignes suivantes :

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

Ajoutez également les appels Mixin suivants dans le sélecteur CSS .username, .password:

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

Actualisez la page http://localhost:8080/. L'écran de connexion devrait maintenant ressembler à ceci :

4. Modifier la typographie et le style des libellés

En plus des changements de couleur, votre concepteur vous a fourni une typographie spécifique à utiliser sur le site. Ajoutons également cela au panneau de navigation.

Pour installer le package pour Typography, exécutez la commande suivante:

npm install @material/typography

Ajouter le code CSS pour la typographie

Dans home.scss, ajoutez l'instruction d'importation suivante après les importations existantes:

@import "@material/typography/mdc-typography";

Ajoutez ensuite l'appel Mixin suivant à la classe shrine-title:

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

La typographie peut être définie soit en utilisant le mixin Sass, comme nous l'avons fait ici, soit en incluant la classe de type spécifique (par exemple, class="mdc-typography--headline6") dans votre élément.

Ensuite, stylisons les éléments du panneau.

Ajouter un séparateur de ligne

Dans home.html, ajoutez le code suivant juste après l'élément <a ...>Featured</a>:

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

Ajoutez les styles suivants à home.scss:

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

Ajuster les éléments image et les étiquettes

Pour ajuster les éléments et les libellés, ajoutez les styles suivants à home.scss dans le sélecteur .product-list:

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

Actualisez la page. Votre écran d'accueil devrait maintenant se présenter comme suit :

5. Ajuster l'élévation

Maintenant que vous avez stylisé la page avec les couleurs et la typographie spécifiques de Shrine, examinons la liste d'images montrant les produits de Shrine. Mettez l'accent sur ces produits pour attirer leur attention.

Pour installer le package pour Elevation, exécutez la commande suivante:

npm install @material/elevation

Ajouter l'instruction d'importation

Dans home.scss, ajoutez la ligne suivante après la dernière instruction d'importation:

@import "@material/elevation/mdc-elevation";

Encapsuler la liste d'images avec un nouvel élément DIV

Dans home.html, ajoutez le balisage suivant autour de l'élément <ul>:

<div class="shrine-body">
 <ul...>
</div>

Modifier l'altitude à l'aide des mixins Sass

Dans home.scss, ajoutez les éléments suivants :

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

L'élévation est appliquée en appelant le mixin Sass mdc-elevation dans un sélecteur représentant les éléments que vous souhaitez surélevés.

Impressionnant ! Vous avez ajouté une ombre sur le bord gauche de la surface blanche derrière les éléments de la liste d'images, de sorte qu'elle semble flotter légèrement au-dessus de la navigation.

6. Modifier la mise en page

À présent, modifions la mise en page pour afficher des images dans différents formats et tailles, de sorte que chaque image soit unique par rapport aux autres.

Modifier le code HTML

Dans home.html, mettez à jour l'élément mdc-image-list pour qu'il contienne la classe mdc-image-list--masonry:

<ul class="mdc-image-list mdc-image-list--masonry product-list">

Ajouter des images

Dans home.html, modifiez l'attribut src de chaque élément img pour qu'il corresponde aux images situées dans le dossier assets. Ensuite, mettez à jour le texte de l'étiquette pour chaque image. Une fois l'opération terminée, le code doit se présenter comme suit:

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Ginger scarf</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Blue stone mug</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Cerise scallop tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Chambray napkins</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/fine-lines.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Fine lines tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/garden-strand.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Garden strand</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gatsby hat</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gilt desk trio</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Kitchen quattro</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Seabreeze sweater</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Shrug bag</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Stella sunglasses</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Surf and perf shirt</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Vagabond sack</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/walter-henley.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Walter henley (white)</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Weave keyring</span>
        </div>
      </li>
    </ul>

Mettre à jour le CSS

Dans home.scss, supprimez le mixin mdc-image-list-standard-columns(4) et remplacez-le par le mixin suivant:

@include mdc-image-list-masonry-columns(4);

Ajoutez ensuite les valeurs padding suivantes à la classe product-list dans home.scss:

.product-list {
  ...
  padding: 80px 100px 0;
}

Votre code doit maintenant correspondre à celui inclus dans le dossier complete/.

Le composant de liste d'images inclut actuellement deux variantes, standard et maçonnerie,qui permettent aux éléments de liste d'avoir une taille différente ou d'être disposés d'une manière spécifique.

7. Essayer un autre thème

L'utilisation des couleurs est une manière puissante d'exprimer votre marque. Une légère modification de la couleur peut avoir un impact important sur l'expérience utilisateur. Pour tester cela, voyons à quoi ressemblerait Shrine si le jeu de couleurs de la marque était complètement différent.

Modifier le code CSS

Dans _variables.scss, remplacez les variables que vous avez déclarées pour le thème principal par ce qui suit:

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

Dans login.scss, supprimez les mixins dans le sélecteur .username, .password. Le résultat doit se présenter comme suit:

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

De plus, supprimez le forçage de mixin mdc-button-ink-color dans la classe .cancel:

Dans home.scss, ajoutez la règle suivante à la classe .home:

background-color: $mdc-theme-background;

Dans le sélecteur .shrine-logo-drawer, remplacez la propriété fill par la couleur on-primary:

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

De même, dans le sélecteur .shrine-title, définissez la propriété color sur la couleur on-primary:

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

Enfin, supprimez le mixin mdc-elevation utilisé précédemment dans le sélecteur .shrine-body.

Compilez et exécutez. Le nouveau thème devrait maintenant s'afficher dans votre navigateur.

Accédez maintenant à http://localhost:8080/home.html pour voir les modifications apportées à la page home.html.

8. Récapitulatif

Vous avez maintenant créé une application qui répond aux spécifications de votre graphiste.

L'application MDC-103 terminée est disponible dans ce répertoire: material-components-web-codelabs/mdc-103/complete

Vous pouvez tester votre version de la page par rapport à la page de ce répertoire. N'oubliez pas d'exécuter d'abord npm install dans ce répertoire.

Étapes suivantes

Vous avez utilisé les composants MDC suivants : les thèmes, la typographie, l'élévation et les formes. Vous pouvez découvrir d'autres composants et sous-systèmes dans le catalogue MDC Web.

La réalisation de cet atelier de programmation m'a demandé un temps et des efforts raisonnables

Tout à fait d'accord D'accord Ni d'accord, ni pas d'accord Pas d'accord Pas du tout d'accord

Je souhaite continuer à utiliser Material Components

<ph type="x-smartling-placeholder"></ph> Tout à fait d'accord D'accord Sans opinion Pas d'accord Pas du tout d'accord .