Variablen für Design Tokens

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 3 von 35.

Jetzt, da Sie wissen, wie man CSS-Variablen erstellt und verwendet, schauen wir uns an, wie sie helfen, Ihr Design zu organisieren.

Design-Tokens sind spezielle CSS-Variablen, die die Hauptfarben, Schriftarten, Abstände und andere Stilwerte Ihrer Website speichern.

Durch die Verwendung von Design-Tokens halten Sie Ihre Stile konsistent und einfach zu aktualisieren – ändern Sie das Token einfach einmal, und die gesamte Website übernimmt die Änderung!

Hier erfahren Sie, wie Sie CSS-Variablen für Ihre Design-Tokens erstellen:

:root {
  /* Farben */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* Abstände */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Typografie */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

Hier wenden wir diese Design-Tokens auf Ihre Elemente an:

.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);
}

Die Verwendung von Design-Tokens gewährleistet Konsistenz auf Ihrer gesamten Website und erleichtert Aktualisierungen.

Aufgabe

Einfach

Sie haben eine Seite mit Artikeln über gesunde Lebensmittel und einigen vorhandenen Stilen. Ihre Aufgabe ist es, diese durch die Verwendung von CSS-Variablen zu verbessern.

Erstellen Sie innerhalb des :root-Selektors eine Variable namens --color-secondary und setzen Sie deren Wert auf ein warmes Orange: #f39c12.
Erstellen Sie innerhalb des :root-Selektors eine Variable namens --spacing-medium und setzen Sie deren Wert auf 16px.
Verwenden Sie --secondary-color, um die Textfarbe aller <h2>-Elemente festzulegen.
Verwenden Sie --spacing-medium, um das Padding des <section>-Elements festzulegen.

Spickzettel

Design-Tokens sind CSS-Variablen, die die Hauptfarben, Schriftarten, Abstände und andere Stilwerte Ihrer Website speichern, um Konsistenz und einfache Aktualisierungen zu gewährleisten.

Erstellen Sie Design-Tokens im :root-Selektor:

:root {
  /* Farben */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* Abstände */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Typografie */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

Wenden Sie Design-Tokens mit var() an:

.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);
}

Probier es selbst

<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>