Formation Créer son Framework CSS | Le Design System

Framework et design system

Si un framework CSS propose de nombreux outils pour optimiser la création d’interfaces web, il est nécessaire de veiller à l’utiliser dans le respect de son design system.

Voici quelques éléments typiques inclus dans un design system :

• 🎨 Palette de couleurs : Une sélection de couleurs définies avec soin pour être utilisées de manière cohérente dans toute l’interface. Ces couleurs peuvent représenter les nuances principales, secondaires, les nuances de texte, de fond, etc.
• ✒️ Typographie : Les familles de polices, tailles de texte et styles sont spécifiés pour maintenir une apparence uniforme et lisible à travers les différentes parties de l’application.
• 🧱 Grille et mise en page : Un système de grille détermine comment les éléments sont disposés sur la page, la manière dont les espaces blancs sont gérés, et comment la mise en page s’adapte à différentes tailles d’écran pour assurer la cohérence visuelle.
• 🧩 Composants réutilisables : Des éléments d’interface utilisateur standardisés tels que des boutons, des formulaires, des cartes, des barres de navigation, etc. Ces composants sont conçus pour être réutilisés dans toute l’application, garantissant ainsi une apparence cohérente.

Les variables CSS sont des outils puissants facilitant la mise en œuvre d’un design system cohérent. Ces dernières permettent de stocker des valeurs comme les couleurs, les tailles de police, les espacements, etc.

Cela facilite grandement l’exploitation et l’évolutivité du design system en centralisant les informations au même endroit, car un simple changement de variable affectera tous les éléments l’utilisant.

Définition des variables

Les variables du framework seront déclarées au sein du sélecteur :root.

:root {

}

Palette de couleurs

Commençons par définir une palette de couleurs. Notre palette sera constituée d’une gamme de 6 couleurs : light, dark, primary, success, warning et danger.

Couleurs claire et sombre

La couleur claire (light) est une teinte utilisée pour les backgrounds (en thème clair) et le texte (en thème sombre). La couleur sombre (dark) est une teinte utilisée pour les textes (en thème clair) et les backgrounds (en thème sombre).

Les couleurs claires et sombres, seront elles-même définies en 3 teintes. Par souci de cohérence entre les teintes light et dark, nous n’utiliserons ici pas les notations hexadécimale ou RGB, mais plutôt la notation HSL, qui consiste à définir les couleurs selon :

1. La teinte (0-360°)
2. La saturation (0-100%)
3. La luminosité (0-100%)

HSL nous permet d’obtenir des couleurs définies selon le même ton en faisant uniquement varier la luminosité.

:root {

	/* ⚪ LIGHT */
	--light-3: hsl(0, 0%, 100%);
	--light-2: hsl(0, 0%, 96%);
	--light-1: hsl(0, 0%, 92%);
	--light-contrast: var(--dark-2);

	/* ⚫ DARK */
	--dark-1: hsl(240, 17%, 26%);
	--dark-2: hsl(240, 17%, 22%);
	--dark-3: hsl(240, 17%, 18%);
	--dark-contrast: var(--light-2);

}

En faisant varier le taux de luminosité d’une couleur définie en HSL (via le 3ème argument de la fonction hsl()), on obtient très facilement des déclinaisons assombries ou éclaircies, tout en restant dans le même ton.

3 indique que la teinte tend vers le blanc / noir, tandis que 1 indique que la teinte tend davantage vers le milieu du spectre (gris).

Couleurs principale

La couleur principale (primary) représente la couleur d’accent qui sera utilisée pour mettre en valeur des éléments (boutons de type « Call To Action », liens…).

Cette couleur est généralement la couleur principale définie dans une charte graphique (vert pour Spotify, rouge pour YouTube ou Netflix, bleu pour Facebook…).

La couleur principale sera définie par une unique teinte, notée classiquement en hexadécimal.

:root {

	/* ⚪ LIGHT */
	--light-3: hsl(0, 0%, 100%);
	--light-2: hsl(0, 0%, 96%);
	--light-1: hsl(0, 0%, 92%);
	--light-contrast: var(--dark-2);

	/* ⚫ DARK */
	--dark-1: hsl(240, 17%, 26%);
	--dark-2: hsl(240, 17%, 22%);
	--dark-3: hsl(240, 17%, 18%);
	--dark-contrast: var(--light-2);

	/* ✨ PRIMARY */
	--primary: #6e52f7;
	--primary-contrast: var(--light-2);

}

Couleurs d’état

Les couleurs d’états (success, warning, danger) sont utilisées pour aider l’utilisateur à comprendre rapidement le sens d’un élément d’interface.

Les couleurs d’état seront définies par une unique teinte, notée classiquement en hexadécimal.

:root {

	/* ⚪ LIGHT */
	--light-3: hsl(0, 0%, 100%);
	--light-2: hsl(0, 0%, 96%);
	--light-1: hsl(0, 0%, 92%);
	--light-contrast: var(--dark-2);

	/* ⚫ DARK */
	--dark-1: hsl(240, 17%, 26%);
	--dark-2: hsl(240, 17%, 22%);
	--dark-3: hsl(240, 17%, 18%);
	--dark-contrast: var(--light-2);

	/* ✨ PRIMARY */
	--primary: #6e52f7;
	--primary-contrast: var(--light-2);

	/* ✅ SUCCESS */
	--success: #78ffcb;
	--success-contrast: var(--dark-2);

	/* ⚠️ WARNING */
	--warning: #ffdb63;
	--warning-contrast: var(--dark-2);

	/* ❌ DANGER */
	--danger: #ff5e78;
	--danger-contrast: var(--light-2);

}

Typographie

La typographie représente l’essence même d’une interface. Bien choisir sa typographie est essentiel pour construire une interface élégante et cohérente.

Bien souvent les sites/app web exploitent 2 typographies :

• Une typographie principale pour les textes.
• Une typographie secondaire dédiée aux titres.

Il est recommandé de choisir en typographie principale, une typo de type sans-serif, simple et lisible sur les écrans. Pour les titres, s’agissant d’éléments généralement plus gros et plus court, il est possible d’utiliser une typo plus abstraite.

:root {

	/* COULEURS ... */

	--typography-main: Arial, sans-serif;
	--typography-headlines: Verdana, sans-serif;

}

Outre la famille de typographie, nous définirons dans une variable --base-unit la taille de base servant de référence pour les textes :

:root {

	/* COULEURS ... */

	--typography-main: Arial, sans-serif;
	--typography-headlines: Verdana, sans-serif;
	--base-unit: 16px;

}

Cette unité de base servira de taille de référence pour les paragraphes (<p>).

La variable --ratio-line-height servira quant à elle à définir le ratio d’agrandissement entre la taille du texte et la hauteur de la ligne.

:root {

	/* COULEURS ... */

	--typography-main: Arial;
	--typography-headlines: Verdana;
	--base-unit: 16px;
	--ratio-line-height: 1.25;

}

Layout

Le layout constitue les éléments dédiés à la structure et au placement des éléments d’interface.

:root {

	/* COULEURS ... */

	/* TYPOGRAPHIES ... */

	--max-width: 900px;

}

Notre Design System sera simplement constitué d’une variable --max-width, permettant de définir la largeur maximale des conteneurs de l’interface.

Animations

Notre framework CSS intègrera parfois de légères animations au sein de nos composants. Pour créer une cohérence globale entre ces diverses animations, nous allons stocker un type de transition et une durée de transition génériques.

:root {

	/* COULEURS ... */

	/* TYPOGRAPHIES ... */

	/* LAYOUT ... */

	--transition-duration: 300ms;
	--transition-type: ease;

}

La configuration du framework est importé dans 📄 app.css :

@import 'config.css';
@import 'base/all.css';
@import 'layout/all.css';
@import 'components/all.css';
@import 'utilities/all.css';

Code complet

Voici le code complet du fichier 📄 config.css :

:root {

	/* ⚪ LIGHT */
	--light-3: hsl(0, 0%, 100%);
	--light-2: hsl(0, 0%, 96%);
	--light-1: hsl(0, 0%, 92%);
	--light-contrast: var(--dark-2);

	/* ⚫ DARK */
	--dark-1: hsl(240, 17%, 26%);
	--dark-2: hsl(240, 17%, 22%);
	--dark-3: hsl(240, 17%, 18%);
	--dark-contrast: var(--light-2);

	/* ✨ PRIMARY */
	--primary: #6e52f7;
	--primary-contrast: var(--light-2);

	/* ✅ SUCCESS */
	--success: #78ffcb;
	--success-contrast: var(--dark-2);

	/* ⚠️ WARNING */
	--warning: #ffdb63;
	--warning-contrast: var(--dark-2);

	/* ❌ DANGER */
	--danger: #ff5e78;
	--danger-contrast: var(--light-2);

	--typography-main: Arial, sans-serif;
	--typography-headlines: Verdana, sans-serif;
	--base-unit: 16px;
	--ratio-line-height: 1.25;

	--max-width: 900px;

	--transition-duration: 300ms;
	--transition-type: ease;

}

Le design system du framework est importé dans 📄 app.css :

@import 'config.css';
@import 'base/all.css';
@import 'layout/all.css';
@import 'components/all.css';
@import 'utilities/all.css';