المتغيرات لرموز التصميم

جزء من قسم Practical Frontend في رحلة HTML على Coddy. الدرس 3 من 35.

الآن بعد أن عرفت كيفية إنشاء متغيرات CSS واستخدامها، لنرَ كيف تساعدك في تنظيم تصميمك.

Design tokens هي متغيرات CSS خاصة تخزّن الألوان الرئيسية لموقعك، والخطوط، وspacing، وقيم style الأخرى.

باستخدام Design tokens، تحافظ على اتساق أنماطك وتسهّل تحديثها؛ ما عليك سوى تغيير الرمز مرة واحدة، وسينعكس التغيير على الموقع بأكمله!

إليك كيفية إنشاء متغيرات CSS لرموز التصميم الخاصة بك:

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

نطبّق رموز التصميم هذه على عناصرَك:

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

يضمن استخدام رموز التصميم الاتساق عبر موقعك الإلكتروني ويجعل التحديثات أسهل.

التحدي

سهل

لديك صفحة تحتوي على مقالات حول الأطعمة الصحية وبعض الأنماط الموجودة. مهمتك هي تحسينها باستخدام متغيرات CSS.

داخل محدد :root، أنشئ متغيرًا باسم --color-secondary واضبط قيمته على البرتقالي الدافئ: #f39c12.
داخل محدد :root، أنشئ متغيرًا باسم --spacing-medium واضبط قيمته على 16px.
استخدم --color-secondary لتعيين لون النص لجميع العناصر <h2>.
استخدم --spacing-medium لتعيين padding للعنصر <section>.

جرّب بنفسك

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