Ana içeriğe geç
CKCSS
Menü

UI KIT · MARKETING · CONTENT

Uzun metni okunur tutun.

Makale gövdesi ck-sidebar ile yan bilgi kutusuna ayrılır; ck-max-readable satır uzunluğunu 72 karaktere sabitler.

Neden token tabanlı tasarım?

Sabit piksel değerleri yerine --ck-space-*, --ck-color-* gibi semantik tokenlar kullanmak, tasarım kararlarını tek bir yerden yönetmenizi sağlar. Bir markanın tüm bileşenleri aynı ölçek ve paletten beslenir.

"Token'lar bir tasarım sisteminin gerçek kaynak kodu; bileşenler sadece onları uygular."

Aynı yaklaşım karanlık mod, erişilebilir kontrast ve markaya özel tema değişiklikleri için de geçerlidir — bileşen kodunu değil, token değerlerini değiştirirsiniz.

Kaynak sırası okunabilirliktir

CKCSS pattern kuralı 4, DOM sırasının her zaman erişilebilir okuma sırasıyla eşleşmesini şart koşar. Bu sayede ekran okuyucu kullanıcıları da görsel kullanıcılarla aynı akışı deneyimler.

Tokenlar: --ck-line-body, ck-max-readable, ckcss-quote. Duyarlı davranış: ck-sidebar <48rem altında tek sütuna düşer, kenar çubuğu makalenin altına akar.

SONRAKİ ADIM

Bu örneği katalog içinde bağlama yerleştirin.