Variablen für Design-Tokens

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

Da du nun weißt, wie man CSS-Variablen erstellt und verwendet, sehen wir uns an, wie sie dabei helfen, dein Design zu organisieren.

Design-Tokens sind spezielle CSS-Variablen, die die wichtigsten Farben, Schriftarten, Abstände und andere Stilwerte deiner Website speichern.

Durch die Verwendung von Design-Tokens bleiben deine Stile konsistent und lassen sich einfach aktualisieren. Ändere das Token einfach einmal, und die gesamte Website spiegelt die Änderung wider!

So erstellst du CSS-Variablen für deine Design-Tokens:

: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-Token auf deine 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 deiner gesamten Website und erleichtert Aktualisierungen.

Aufgabe

Einfach

Du hast eine Seite mit Artikeln über gesunde Lebensmittel und einigen vorhandenen Stilen. Deine Aufgabe ist es, sie mithilfe von CSS-Variablen zu verbessern.

Erstelle innerhalb des :root-Selektors eine Variable namens --color-secondary und setze ihren Wert auf warmes Orange: #f39c12.
Erstelle innerhalb des :root-Selektors eine Variable namens --spacing-medium und setze ihren Wert auf 16px.
Verwende --color-secondary, um die Textfarbe aller <h2>-Elemente festzulegen.
Verwende --spacing-medium, um das Padding des <section>-Elements festzulegen.

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>