Design Tokens için Değişkenler

Coddy'nin HTML Journey'sinin Practical Frontend 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, bunların tasarımınızı düzenlemeye nasıl yardımcı olduğunu görelim.

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

Tasarım belirteçlerini kullanarak stillerinizi tutarlı ve güncellenmesi kolay tutarsınız — belirteci bir kez değiştirmeniz yeterlidir; tüm site değişikliği yansıtacaktır!

Tasarım belirteçleriniz için CSS değişkenlerini şu şekilde oluşturabilirsiniz:

:root {
  /* Renkler */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* Boşluklar */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Tipografi */
  --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 (design tokens) kullanmak, web siteniz genelinde tutarlılık sağlar ve güncellemeleri kolaylaştırır.

Görev

Kolay

Sağlıklı gıdalar hakkında makaleler içeren bir sayfanız ve mevcut bazı stilleriniz var. Göreviniz, CSS değişkenlerini kullanarak bu sayfayı geliştirmektir.

:root seçicisi içinde, --color-secondary adında bir değişken oluşturun ve değerini sıcak turuncu olarak ayarlayın: #f39c12.
:root seçicisi içinde, --spacing-medium adında bir değişken oluşturun ve değerini 16px olarak ayarlayın.
Tüm <h2> öğelerinin metin rengini ayarlamak için --secondary-color değişkenini kullanın.
<section> öğesinin padding değerini ayarlamak için --spacing-medium değişkenini kullanın.

Kopya kağıdı

Tasarım belirteçleri (design tokens), tutarlılık ve kolay güncellemeler için sitenizin ana renklerini, yazı tiplerini, boşluklarını ve diğer stil değerlerini saklayan CSS değişkenleridir.

Tasarım belirteçlerini :root seçicisinde oluşturun:

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

Tasarım belirteçlerini var() kullanarak uygulayın:

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

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>