CANLI COMPONENT CATALOG

Önce görün. Sonra kodu alın.

Her örnek gerçek CKCSS sınıflarıyla render edilir. Kod bloklarını seçip doğrudan projenize kopyalayın; framework, JavaScript veya build adımı istemez.

01 · ACTIONS

Butonlar

Sayfa içi işlemler için gerçek button, yönlendirme için a kullanın. Varyantlar yalnızca görsel hiyerarşiyi değiştirir.

.ck-button

Birincil işlem

<button class="ck-button" type="button">
  Değişiklikleri kaydet
</button>

<button class="ck-button ck-button--secondary">
  Vazgeç
</button>

Klavye odağı CKCSS tarafından görünür kılınır.

02 · CONTENT

Kartlar ve durumlar

Bir kart bağımsız içerik grubudur. Badge ve alert durumları metinle birlikte taşır; yalnız renge dayanmaz.

.ck-card · .ck-alert

Yayın durumu

Yayında

Portfolyo sitesi

Son güncelleme bugün yayınlandı.

Durum mesajı

Gözden geçirme gerekiyor

İletişim e-posta adresinizi doğrulayın.

<article class="ck-card">
  <div class="ck-card__body">
    <span class="ck-badge ck-badge--success">Yayında</span>
    <h3>Portfolyo sitesi</h3>
  </div>
</article>

Alert için görünür başlık ve açıklama kullanın.

03 · FORMS

Form alanları

Her alan bir label ile eşleşir. Hata durumunda aria-invalid, açıklayıcı metin ve görünür hata satırı birlikte kullanılır.

.ck-field · .ck-input

E-posta alanı

E-posta adresi

Geçerli bir e-posta adresi girin.

<div class="ck-field">
  <label class="ck-field__label" for="email">E-posta</label>
  <input class="ck-input" id="email"
    aria-invalid="true" aria-describedby="email-error">
  <p class="ck-field__error" id="email-error">
    Geçerli bir e-posta adresi girin.
  </p>
</div>

Hata mesajını yalnızca kırmızı kenarla ikame etmeyin.

04 · DATA

Tablolar

Geniş verileri .ck-table-wrap içinde tutun. Dar ekranlarda yalnız tablo alanı yatay kayar; sayfa taşmaz.

.ck-table-wrap · .ck-table

Versiyonlar

CKCSS yayın kanalları
Sürüm	Kanal	İçerik
0.1.0-beta	Güncel	Foundation, layout ve bileşenler
0.1.0-alpha	Önceki	Foundation ve layout

<div class="ck-table-wrap">
  <table class="ck-table">
    <thead>…</thead>
    <tbody>…</tbody>
  </table>
</div>

Table başlıklarını scope="col" ile tanımlayın.

05 · HELPERS

Küçük ama anlamlı yardımcılar.

CKCSS, Tailwind benzeri sınırsız bir utility matrisi sunmaz. Erişilebilirlik, okunabilirlik ve taşma gibi tekrar eden ihtiyaçlar için token tabanlı küçük bir yardımcı katman sağlar.

.ck-visually-hidden · .ck-skip-link

Erişilebilir başlangıç

Skip link, klavye odağı aldığında görünür olur.

<a class="ck-skip-link" href="#main-content">
  Ana içeriğe geç
</a>

<span class="ck-visually-hidden">
  Yalnızca yardımcı teknolojiler için ek bağlam.
</span>

Görsel olarak gizlenen içerik screen reader erişimini korur.

aria-pressed · data-ck-state

Native state sözleşmesi

Seçili kart

E-posta

<button class="ck-button" aria-pressed="true">
  Seçili
</button>

<div class="ck-field" data-ck-state="invalid">
  ...
</div>

State, JavaScript sınıfı yerine native attribute ile taşınır.

.ck-query-container · .ck-query-grid

Container’a uyumlanan grid

İlk alan

İkinci alan

Üçüncü alan

<div class="ck-query-container">
  <div class="ck-query-grid">
    ...
  </div>
</div>

Container query desteklenmezse tek kolon fallback’i çalışır.

ÖLÇÜ SİSTEMİ

Tutarlı ölçüler, daha sakin arayüzler.

Spacing, radius ve component ölçüleri rem tabanlı token’larla yönetilir. 1px border ve 2–3px focus outline gibi piksel hassasiyeti isteyen detaylar istisnadır.

--ck-space-4: 1rem;
--ck-radius-md: .75rem;
--ck-radius-pill: 999px;