Özet - Tasarım sistemi
- CSS kursu
- Orta seviye
- Ders 75/98
- 5 dk
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.
Başlangıç kodu
/* :root içine --bg, --text, --gap tanımla */Ö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);.
Başlangıç kodu
/* .kart seçicisi ekle; üç özellik de var() ile yaz */Örnek çözüm
.kart {
background: var(--bg);
color: var(--text);
padding: var(--gap);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir tasarım sisteminde en büyük avantaj hangisidir?
- Renkleri her yerde tek tek yazmak
- Tutarlılık ve tek noktadan güncelleme Doğru cevap
- Her bileşene ayrı stil yazmak
- Tarayıcıyı yeniden başlatmak
Açıklama: Tek noktadan güncelleme ve tutarlılık tasarım sisteminin özüdür.
2 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
--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 |
3 Tasarım jetonunu tanımla
:root {
--renk-marka: ____;
}:root {
--renk-marka: #2563eb;
}Açıklama: Marka rengi bir tasarım jetonudur.