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 travaillant pour 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, puis se poursuit avec un écran d'accueil où sont affichés les 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 et refléter le style unique de la marque comme jamais auparavant.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez personnaliser Shrine pour refléter sa marque à l'aide des éléments suivants :
- Couleur
- Typographie
- Élévation
- Forme
- Mise en page
Composants et sous-systèmes MDC Web 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 en HTML, CSS et JavaScript
Comment évalueriez-vous votre niveau d'expérience en développement Web ?
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
Elle se trouve dans le répertoire material-components-web-codelabs-master/mdc-103/starter. Assurez-vous d'utiliser la commande cd pour accéder à ce répertoire avant de commencer.
… 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
Installer les dépendances du projet
À partir du répertoire de démarrage material-components-web-codelabs/mdc-103/starter (qui devrait être votre répertoire actuel si vous avez suivi l'étape ci-dessus), exécutez la commande suivante :
npm install
Vous verrez beaucoup d'activité. À la fin, votre terminal devrait afficher une installation réussie :
Exécuter l'application de départ
Dans le même répertoire, exécutez la commande suivante :
npm start
La webpack-dev-server va commencer. Accédez à l'adresse http://localhost:8080/ dans votre navigateur pour afficher la page.
Opération réussie ! La page de connexion de Shrine devrait s'afficher dans votre navigateur. Renseignez les champs "Nom d'utilisateur" et "Mot de passe", puis cliquez sur le bouton "Suivant" pour accéder à la page d'accueil. Il doit afficher un tiroir de navigation sur la gauche, à côté d'une grille d'images de produits.
Bien que le tiroir de navigation soit fonctionnel, faisons-le correspondre à la marque Shrine en modifiant sa couleur, son élévation et sa typographie.
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 sont pas issues des palettes de couleurs de Material 2014.)
Modifions la couleur du tiroir de navigation de l'application Shrine pour 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";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 pour créer 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);
}
}Actualisez la page http://localhost:8080/home.html. Votre écran d'accueil devrait maintenant se présenter comme suit :
Modifions 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 invocations de mixin suivantes à l'intérieur du 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 :
En plus des modifications de couleur demandées, votre graphiste vous a fourni une typographie spécifique à utiliser sur le site. Ajoutons également cela au panneau de navigation.
Pour installer le package de typographie, exécutez la commande suivante :
npm install @material/typography
Ajouter le 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'invocation de mixin suivante à la classe shrine-title :
.shrine-title {
@include mdc-typography(headline6);
...
}Ensuite, stylisons les éléments du tiroir.
Ajouter un séparateur de ligne
Dans home.html, ajoutez le code suivant immédiatement 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 et les libellés des images
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 :
Maintenant que vous avez personnalisé la page avec la couleur et la typographie spécifiques de Shrine, examinons la liste d'images qui présente les produits de Shrine. Attirons l'attention sur les produits en les mettant davantage en avant.
Pour installer le package 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 dans une nouvelle div
Dans home.html, ajoutez le balisage suivant autour de l'élément <ul> :
<div class="shrine-body">
<ul...>
</div>Modifier l'élévation à l'aide de 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
}Impressionnant ! Vous avez ajouté une ombre au 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.
À présent, modifions la mise en page pour afficher les images dans différents formats et tailles, de sorte que chaque image soit unique.
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, modifiez le texte du libellé pour chaque image. Une fois l'opération terminée, le résultat doit ressembler à ceci :
<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 la 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/.
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 totalement différent.
Modifier les CSS
Dans _variables.scss, remplacez les variables que vous avez déclarées pour le thème principal par les suivantes :
$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 ressembler à ceci :
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Supprimez également le remplacement du 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 sous 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.
Vous venez de créer une application qui répond aux spécifications de votre graphiste.
É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.