Variabel untuk Token Desain

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 3 dari 35.

Setelah mengetahui cara membuat dan menggunakan variabel CSS, sekarang mari kita lihat bagaimana variabel CSS membantu mengatur desainmu.

Token desain adalah variabel CSS khusus yang menyimpan warna utama, font, jarak, dan nilai gaya lainnya di situsmu.

Dengan menggunakan token desain, gaya situsmu tetap konsisten dan mudah diperbarui. Cukup ubah token satu kali, lalu perubahan tersebut akan diterapkan ke seluruh situs!

Berikut cara membuat variabel CSS untuk token desainmu:

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

Di sini kita menerapkan token desain ini ke elemen-elemenmu:

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

Penggunaan design token memastikan konsistensi di seluruh situs webmu dan memudahkan pembaruan.

Tantangan

Mudah

Kamu memiliki halaman berisi artikel tentang makanan sehat dan beberapa gaya yang sudah ada. Tugasmu adalah memperbaikinya dengan menggunakan variabel CSS.

Di dalam selector :root, buat variabel bernama --color-secondary dan atur nilainya menjadi oranye hangat: #f39c12.
Di dalam selector :root, buat variabel bernama --spacing-medium dan atur nilainya menjadi 16px.
Gunakan --color-secondary untuk mengatur warna teks semua elemen <h2>.
Gunakan --spacing-medium untuk mengatur padding elemen <section>.

Coba sendiri

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