Variables pour les Design Tokens

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 3 sur 35.

Maintenant que tu sais comment créer et utiliser des variables CSS, voyons comment elles t’aident à organiser ton design.

Les tokens de design sont des variables CSS spéciales qui stockent les couleurs principales, les polices, les espacements et d’autres valeurs de style de ton site.

En utilisant des tokens de design, tu gardes des styles cohérents et faciles à mettre à jour : il te suffit de modifier le token une seule fois, et tout le site reflète le changement !

Voici comment créer des variables CSS pour vos tokens de design :

:root {
  /* Couleurs */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* Espacement */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Typographie */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

Nous appliquons ici ces jetons de conception à vos éléments :

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-medium);
}

.card {
  border: 1px solid var(--secondary-color);
  margin: var(--spacing-medium);
  padding: var(--spacing-large);
}

L’utilisation de tokens de conception garantit la cohérence de votre site web et facilite les mises à jour.

Défi

Facile

Vous avez une page contenant des articles sur les aliments sains et quelques styles existants. Votre tâche consiste à l’améliorer en utilisant des variables CSS.

Dans le sélecteur :root, créez une variable nommée --color-secondary et définissez sa valeur sur l’orange chaud : #f39c12.
Dans le sélecteur :root, créez une variable nommée --spacing-medium et définissez sa valeur sur 16px.
Utilisez --color-secondary pour définir la couleur du texte de tous les éléments <h2>.
Utilisez --spacing-medium pour définir le remplissage intérieur de l’élément <section>.

Essayez vous-même

<html>
<head>
    <title>Design Tokens</title>
    <style>
      /* Design tokens: colors, fonts, spacing */
      :root {
        --color-primary: #27ae60;  
        --color-text: #2c3e50;      
        --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --spacing-small: 8px;
        --spacing-large: 24px;
        --border-radius: 8px;
        --bg-light: #e8f5e9;          
      }
    
      body {
        font-family: var(--font-base);
        color: var(--color-text);
        background: var(--bg-light);
        margin: 0;
        padding: var(--spacing-large);
        line-height: 1.5;
      }
    
      header {
        text-align: center;
        margin-bottom: var(--spacing-large);
      }
    
      header h1 {
        color: var(--color-primary);
        margin-bottom: 0.2em;
      }
    
      header p {
        font-size: 1.1rem;
        color: #4a6a4a;
      }
    
      section {
        max-width: 700px;
        margin: 0 auto;
        background: white;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }
    
      h2 {
        margin-top: 0;
      }
    
      article {
        margin-bottom: var(--spacing-large);
      }
    
      article:last-child {
        margin-bottom: 0;
      }
    
      .btn {
        display: inline-block;
        background-color: var(--color-primary);
        color: white;
        border: none;
        padding: var(--spacing-small) var(--spacing-small);
        border-radius: var(--border-radius);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-decoration: none;
      }
    
      .btn:hover {
        background-color: #1e8449;
      }
    </style>
    </head>
    <body>
    
    <header>
      <h1>Eat Healthy, Feel Great!</h1>
      <p>Your guide to nutritious and delicious foods.</p>
    </header>
    
    <section>
      <article>
        <h2>Avocados</h2>
        <p>Rich in healthy fats and fiber, avocados support heart health and keep you full longer.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Quinoa</h2>
        <p>A complete protein source, quinoa is great for vegetarians and provides essential amino acids.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Blueberries</h2>
        <p>Packed with antioxidants and vitamins, blueberries promote brain health and fight inflammation.</p>
        <button class="btn">Learn More</button>
      </article>
    </section>
</body>
</html>