Variablen für Design Tokens

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

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

Design tokens sind spezielle CSS-Variablen, in denen die wichtigsten colors, fonts, spacing und andere style-Werte deiner Website gespeichert werden.

Durch die Verwendung von Design tokens bleiben deine Stile konsistent und lassen sich einfach aktualisieren. Ändere den Token einfach einmal, und die gesamte Website übernimmt die Änderung!

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

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

Hier wenden wir diese Design-Tokens 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 sorgt für Konsistenz auf deiner gesamten Website und erleichtert Aktualisierungen.

Aufgabe

Einfach

Du hast eine Seite mit Artikeln über healthy foods und einigen vorhandenen Stilen. Deine Aufgabe ist es, sie durch die Verwendung 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 text color 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>