Özet - Tasarım sistemi

Değişkenlerle küçük bir tasarım sistemi kurarsın.

Tasarım sistemine giriş

Bu grupta değişkenleri tanıdın: adları iki tire ile başlar, :root'ta tanımlanır, var() ile kullanılır, fallback'le güvenli olur, temalarla renk değiştirir. Şimdi bunları birleştirip küçük bir tasarım sistemi kuracağız.

Tasarım sistemi, tutarlı bir arayüz için yeniden kullanılabilir değerler ve bildirimler bütünüdür. Değişkenler onun omurgasıdır.

Uygulama Tasarım sistemi değişkenlerini tanımla

:root seçicisi içine üç değişken tanımla: --bg değeri #ffffff, --text değeri #111827, --gap değeri 16px olsun.

Örnek çözümü göster

:root aç; üç bildirimi alt alta yaz.
Örnek çözüm:
:root {
  --bg: #ffffff;
  --text: #111827;
  --gap: 16px;
}

Uygulama Bir bileşende değişkenleri kullan

.kart seçicisi içine üç özellik yaz: background: var(--bg);, color: var(--text);, padding: var(--gap);.

Örnek çözümü göster

.kart seçicisi aç; üç bildirimi de var() ile yaz.
Örnek çözüm:
.kart {
  background: var(--bg);
  color: var(--text);
  padding: var(--gap);
}

Kendini test et

Bir tasarım sisteminde en büyük avantaj hangisidir?
- Renkleri her yerde tek tek yazmak
- Her bileşene ayrı stil yazmak
- Tutarlılık ve tek noktadan güncelleme
- Tarayıcıyı yeniden başlatmak
Cevabı göster

Tutarlılık ve tek noktadan güncelleme — Doğru! Tek noktadan güncelleme ve tutarlılık tasarım sisteminin özüdür.
Kavramları eşleştir

--ad: değer;

değişken tanımı
var(--ad)

değişken kullanımı
var(--ad, yedek)

fallback
[data-theme="koyu"]

tema seçicisi

Tasarım jetonunu tanımla

:root {
  --renk-marka: ____;
}

Cevabı göster

:root {
  --renk-marka: #2563eb;
}

Sıradaki ders: Input stilleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler