Khóa Học

Design System với CSS Variables

Quay lại bài học

Design System với CSS Variables

Lập trình

Tạo design system sử dụng CSS custom properties

Tạo design system với: - CSS variables cho colors, typography, spacing - Component styles sử dụng variables - Dark/light theme switching - Consistent design tokens

Code mẫu
<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      /* Viết CSS variables của bạn ở đây */
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
    <div class="card">Card Component</div>
  </div>
</body>
</html>