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