Il est désormais temps de rendre le site de Yummy Nouilles agréable à utiliser et fidèle aux maquettes.
Créez votre Design System
Nous allons voir ensemble un élément à la fois invisible et très important d’un site internet : le “Design System”.
Design System ? Je n’ai jamais entendu parler de ce concept, à quoi ça va servir ?
Le Design System est un ensemble de variables, de composants et de concepts qui permettent de maintenir une cohérence visuelle au sein d’un même projet.
Initialisez le fichier main.css
Dans un premier temps, créez un dossier styles à la racine du projet et ajoutez-y un fichier main.css.
Avant de commencer à y ajouter nos premières règles CSS, il convient d’importer ce fichier CSS dans les pages HTML.
Ajoutez cette ligne dans le <head> de chaque page :
<link rel="stylesheet" href="styles/main.css">
Maintenant que le fichier main.css est lié, nous allons pouvoir créer nos premières variables CSS !
Pour ajouter des règles CSS globales, nous pouvons utiliser la pseudo-classe CSS :root :
/* Design System */
:root {}Exportez les couleurs depuis Figma
Il est maintenant temps de créer des variables pour chaque couleur utilisée dans la maquette.
Dans Figma, il existe un menu dans la barre de droite qui permet de récupérer le CSS des éléments de la maquette : le menu Inspect.
Pour pouvoir récupérer les couleurs du projet, il faut qu’aucun élément de la maquette ne soit sélectionné. Cliquez sur un endroit vide sur l’espace de travail Figma pour désélectionner tous les éléments.
Le menu de droite devrait maintenant contenir toutes ces couleurs :
Ouvrez le menu Style de la couleur rouge pour obtenir le code hexadécimal qui lui correspond.
Maintenant que vous avez le code, retournez dans votre fichier main.css et ajoutez une variable --red-highlight en lui attribuant le code ; faites de même avec les autres couleurs.
/* Design System */
:root {
/* Colors */
--red-highlight: #D2483D;
--light-grey: #F3F3F3;
--black: #000000;
--white: #FFFFFF;
}Exportez les textes depuis Figma
Maintenant que nous avons les couleurs, nous allons ajouter les formats de texte à notre Design System.
Ouvrez le menu de style du texte Body.
Nous retrouvons donc dans la partie CSS le nom de la police utilisée, son poids, son style, la taille des caractères et la taille de la ligne en pixels.
Créez dans un premier temps une variable --body-font pour le nom de la police et une variable --body-font-weight pour le poids.
Maintenant que c’est fait, nous allons nous occuper des tailles de caractère et de ligne. Sur la maquette Figma, ces tailles sont en px, nous allons les convertir dans une unité différente ici : les rem.
Les rem ? Qu’est-ce que c’est que cette unité ? Pourquoi ne pas utiliser des pixels, simplement ?
Effectivement, il serait tout à fait possible et acceptable d’utiliser des pixels directement sur notre page. Cependant, voici deux points qui vous permettront de comprendre l’intérêt des rem :
Les pixels sont une unité de mesure statique, ce qui signifie qu'ils restent les mêmes quelle que soit la taille de l'écran de l'utilisateur. Ça peut être problématique, car cela peut rendre votre site Web moins accessible pour les personnes malvoyantes. En utilisant des rem, vous pouvez ajuster dynamiquement la taille de vos éléments en fonction de la taille de la police de l'utilisateur, ce qui garantit une expérience plus agréable pour tous ;
De plus, les pixels peuvent entraîner des problèmes de mise en page si l'utilisateur modifie la taille de la police de son navigateur. En utilisant des rem, la mise en page s'adapte automatiquement à la taille de la police de l'utilisateur, ce qui garantit une expérience utilisateur constante.
Vous pouvez maintenant créer vos variables --body-font-size et --body-line-height en tenant compte de la conversion en rem.
Vous pouvez arrondir les valeurs lorsqu’elles ne tombent pas juste, pour améliorer la cohérence globale des tailles (1,245 rem -> 1,25 rem).
Vous pouvez maintenant faire pareil pour les autres variables de texte, mais uniquement celles qui sont appliquées au “desktop”. Nous nous occuperons du mobile plus tard dans ce cours.
Votre Design System devrait maintenant ressembler à ça :
/* Design System */
:root {
/* Colors */
--red-highlight: #D2483D;
--light-grey: #F3F3F3;
--black: #000000;
--white: #FFFFFF;
/* Text configuration */
--body-font: 'Montserrat';
--body-highlight-font: 'Montserrat';
--header-font: 'Bebas Neue';
--title-font: 'Bebas Neue';
--body-font-weight: 400;
--body-highlight-font-weight: 600;
--header-font-weight: 400;
--title-font-weight: 400;
--body-font-size: 1.25rem;
--body-highlight-font-size: 1.25rem;
--header-font-size: 4.5rem;
--title-font-size: 1.5rem;
--body-line-height: 1.5rem;
--body-highlight-line-height: 1.5rem;
--header-line-height: 5.375rem;
--title-line-height: 1.75rem;
}Stylisez les éléments globaux
Il est maintenant temps de nous attaquer aux éléments globaux du site Yummy Nouilles.
Quand je parle d’éléments globaux, c’est en référence aux balises qui auront toujours le même style quelle que soit la page ou la section dans laquelle elles se trouvent.
Comme un exemple est toujours plus parlant que des explications, nous allons commencer par définir le style du body !
Dans le fichier main.css, on va créer les règles grâce au sélecteur body.
Retournez sur la maquette Yummy Nouilles, et cliquez sur le frame Accueil de la homepage.
Dans le menu Inspect à droite, nous pouvons voir que la couleur utilisée pour le background est light-grey.
Ajoutez une règle CSS au sélecteur body pour appliquer la bonne couleur de background.
body {
background-color: var(--light-grey);
}Si vous jetez un œil au résultat, vous verrez que la couleur de fond a bel et bien changé.
Nous allons ajouter au sélecteur body les règles CSS pour les textes grâce aux variables CSS que nous avons définies dans le Design System.
body {
background-color: var(--light-grey);
font-family: var(--body-font);
font-style: normal;
font-weight: var(--body-font-weight);
font-size: var(--body-font-size);
line-height: var(--body-line-height);
color: var(--black);
}Les textes n’ont toujours pas le même format que sur les maquettes, comment ça se fait ?
Bonne remarque ! En effet, pour que les polices Montserrat et Bebas Neue puissent être appliquées aux éléments, il faut les importer dans le projet.
Ces polices d’écriture sont toutes deux éditées par Google.
Vous pouvez récupérer le lien d’import sur la page Google Fonts dédiée :
Ajoutez les imports tout en haut du fichier main.css.
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600&display=swap');Prenez le temps de faire la même chose pour les titres H1 et H2.
Vous devriez avoir quelque chose comme ça :
body {
background-color: var(--light-grey);
font-family: var(--body-font);
font-style: normal;
font-weight: var(--body-font-weight);
font-size: var(--body-font-size);
line-height: var(--body-line-height);
color: var(--black);
}
h1 {
font-family: var(--header-font);
font-style: normal;
font-weight: var(--header-font-weight);
font-size: var(--header-font-size);
line-height: var(--header-line-height);
color: var(--black);
}
h2 {
font-family: var(--title-font);
font-style: normal;
font-weight: var(--title-font-weight);
font-size: var(--title-font-size);
line-height: var(--title-line-height);
color: var(--black);
}Si vous ouvrez la homepage Yummy Nouilles dans votre navigateur, vous pouvez constater qu’elle commence à ressembler à la maquette !
Mais les titres H2 sont soulignés en rouge sur la maquette ! Pourquoi est-ce qu’ils ne le sont pas chez moi ?
Vous avez l'œil, décidément ! En effet, il manque quelques règles CSS pour créer cet élément du design.
Il y a plein de façons de faire ce genre d’élément. Pour ce cours, nous allons utiliser une règle de text-decoration .
Nous allons ajouter au sélecteur H2 la règle suivante :
text-decoration: underline var(--red-highlight);
Qui donne ce résultat :
Pas mal, non ? Cependant, la ligne est beaucoup plus fine que sur la maquette, et trop collée au texte.
Mais comment changer la taille de cette ligne ? En plus je ne sais même pas quelle épaisseur elle fait réellement sur la maquette !
Pour récupérer l’épaisseur de la ligne en dessous du texte, rendez-vous sur la maquette et zoomez au plus proche d’un titre souligné.
Vous allez voir une grille se dessiner : c’est une grille de pixels.
Comptez donc les pixels entre le texte et la ligne, et ceux qui forment l’épaisseur de cette dernière, et convertissez-les en rem.
Ajoutons ces deux règles CSS pour ajuster le décalage entre la ligne et le texte (en anglais, offset), et l’épaisseur de la ligne (thickness).
text-underline-offset: 0.25rem;
text-decoration-thickness: 0.188rem;Et maintenant, devant vos yeux ébahis : la magie du CSS !
Créez vos modules
Maintenant que le Design System est correctement configuré, nous allons nous attaquer à ma partie préférée : les modules.
Un module est un bloc standardisé qui peut être utilisé à plusieurs endroits et dans plusieurs contextes.
L’intérêt d’identifier les modules et de bien les construire est d’éviter le démoniaque copier-coller de code. 😈
Il existe plusieurs manières d’appréhender les modules. Certaines sont plus poussées que d’autres.
Nous allons simplifier au maximum pour ce cours, et considérer que chaque élément qui peut (d’un point de vue design) être réutilisé de manière identique ailleurs dans le site est un module.
Prenez un moment pour identifier les éléments du site Yummy Nouilles qui pourraient être réutilisés en tant que modules.
De mon côté, j’ai identifié 5 modules :
L’AppBar (header de navigation) ;
Le Footer ;
Le CTA noir ;
La section contenant les infos de contact ;
La bannière rouge avec un CTA.
Nous allons construire ensemble l’AppBar.
Commençons par créer un dossier modules dans le dossier styles.
Dans ce nouveau dossier, ajoutez un fichier appBar.css dans lequel nous allons commencer par créer une classe appBar qui aura la propriété flex et comme direction row.
.appBar {
display: flex;
flex-direction: row;
}Ajoutez maintenant cette classe à la balise HTML <header> de la homepage.
<header class="appBar">Il ne se passe rien du tout quand je recharge la page ! C’est normal ?
Effectivement, vous savez repérer mes petits oublis, vous ! Nous avons oublié d’importer notre nouveau fichier CSS.
Cependant nous n’allons pas l’importer de la même manière que main.css avec une balise <link> .
Nous allons l’importer directement dans notre fichier main.css !
/* Modules */
@import 'modules/appBar.css';Ce n’est pas encore parfait mais au moins, les éléments s’affichent dans le bon sens !
Comme nous utilisons une icône en SVG, il faut explicitement définir sa taille. Nous créons donc une classe appBar__icon et lui donnons une hauteur et une largeur en rem !
Je ne sais pas du tout de quelle taille est le logo ! En plus, quand je zoome sur Figma, il y a beaucoup trop de pixels pour que je les compte.
Pas de panique ! Nous allons récupérer la taille de cet élément grâce au menu Inspect à droite de l’interface, puis en cliquant sur l'icône de manière à ce qu’il soit sélectionné.
Vous pouvez voir la taille à deux endroits :
Autour de la zone de sélection ;
Dans le menu de droite.
Une fois traduit en rem, vous devriez avoir cette nouvelle classe CSS que vous allez pouvoir appliquer sur la balise <img> .
.appBar__icon {
width: 4.5rem;
height: 4.5rem;
}Vous utilisez des __ dans le nom, c’est étrange. Pourquoi ?
Vous avez décidément l'œil pour ce genre de choses ! J’utilise une convention de nommage sobrement appelée BEM (Block - Element - Modifier) ; je vous conseille d’aller regarder la documentation et de commencer à l’utiliser pour ce projet.
Maintenant, nous allons nous occuper du placement des boutons de navigation dans l’AppBar.
Pour centrer les boutons, nous allons utiliser flex et align-items.
Créez une nouvelle classe appBar__nav et appliquez-la à l’élément de page correspondant.
.appBar__nav {
display: flex;
align-items: center;
}Si vous rechargez la page, vous pourrez constater que les boutons de navigation sont collés à l’icône. Nous allons les espacer avec la règle padding-left.
Pour récupérer l’espacement entre deux éléments dans Figma, il faut être en mode Inspect dans le menu de droite, et sélectionner un élément.
Lorsque l’on survole un autre élément avec la souris, Figma nous indique la distance en pixels entre les deux éléments.
Une fois traduite en rem et ajoutée à notre classe appBar__nav, voici le résultat :
En appliquant la même logique abordée dans ce cours, construisez la classe appBar__nav-item qui sera appliquée à chaque bouton de navigation.
.appBar__navItem {
font-family: var(--title-font);
font-style: normal;
font-weight: var(--title-font-weight);
font-size: var(--title-font-size);
line-height: var(--title-line-height);
margin-right: 1rem;
}Mais je ne comprends pas… On n’a pas dit plus haut que l’intérêt était d’éviter le copier-coller ? Pourtant le code HTML de ces éléments a été dupliqué, lui !
Effectivement, vous avez raison. Nous touchons ici aux limites du HTML et du CSS. Plus tard, vous aurez l'occasion de découvrir des outils permettant d'aller encore plus loin dans le côté "modulaire" (JavaScript, Sass...).
Maintenant que nous avons appliqué la mise en forme des boutons, il faut encore que nous nous occupions de cette jolie barre rouge qui souligne la page active.
Nous n’allons pas faire comme avec les titres H2 puisque nous voulons que cette ligne ne s’affiche que dans deux cas :
Lorsque la page cible du bouton est la page active.
Lorsque l’on survole le bouton avec la souris.
Pour ce faire, nous allons utiliser la pseudo-classe :hover et une classe .active pour appliquer le CSS de la barre sur les nav-item , comme ceci :
.appBar__navItem:hover,
.appBar__navItem.active {
text-decoration: underline var(--red-highlight);
text-underline-offset: 0.25rem;
text-decoration-thickness: 0.188rem;
}Il ne reste plus qu’à écarter de la bonne distance les éléments de notre barre des contours de la page dans la class .appBar :
padding: 1rem 0 1rem 3rem;
Vous allez maintenant construire la Hero section du site.
Puisque ce n’est pas un module, vous allez créer un nouveau dossier pages dans le dossier styles et y ajouter un fichier home.css .
N’oubliez pas de l’importer dans main.css !
Appliquez la classe hero à la balise <section> correspondante !
Pour cette section, l’affichage des éléments est en row , et vous devez faire en sorte de l’écarter de l’AppBar :
/* Hero section */
.hero {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 6.5rem;
}Construisez le reste des pages en CSS, sans oublier les modules que nous avons identifiés plus tôt !
Vous pouvez retrouver la version Desktop terminée ici.
En résumé
Créez votre Design System avec les variables CSS.
Récupérez les espacements sur Figma avec le mode Inspect.
Convertissez les pixels en rem pour l’accessibilité.
Identifiez les modules réutilisables.
Bravo ! Le site est beau et utilisable, mais il est temps de le rendre “responsive”. Rejoignez-moi au chapitre suivant !
