Design Tokens için Değişkenler

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 3 / 35.

Artık CSS değişkenlerini nasıl oluşturacağınızı ve kullanacağınızı bildiğinize göre, tasarımınızı düzenlemenize nasıl yardımcı olduklarına bakalım.

Tasarım belirteçleri, sitenizin ana renklerini, yazı tiplerini, boşluklarını ve diğer stil değerlerini depolayan özel CSS değişkenleridir.

Tasarım belirteçlerini kullanarak stillerinizi tutarlı ve güncellenmesi kolay tutarsınız; belirteci yalnızca bir kez değiştirin, tüm site bu değişikliği yansıtsın!

Tasarım tokensınız için CSS değişkenlerini şu şekilde oluşturabilirsiniz:

: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;
}

Burada bu tasarım belirteçlerini öğelerinize uyguluyoruz:

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

Tasarım belirteçlerini kullanmak, web sitenizde tutarlılık sağlar ve güncellemeleri kolaylaştırır.

Görev

Kolay

Sağlıklı yiyecekler hakkında makaleler ve bazı mevcut stiller içeren bir sayfan var. Görevin, CSS değişkenlerini kullanarak sayfayı geliştirmek.

:root seçicisinin içinde --color-secondary adlı bir değişken oluştur ve değerini sıcak turuncu olarak ayarla: #f39c12.
:root seçicisinin içinde --spacing-medium adlı bir değişken oluştur ve değerini 16px olarak ayarla.
Tüm <h2> öğelerinin metin rengini ayarlamak için --color-secondary değişkenini kullan.
<section> öğesinin iç dolgusunu ayarlamak için --spacing-medium değişkenini kullan.

Kendin dene

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