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.

Preview: Gerçek Core API ile render edilir.
Source: HTML doğrudan görünür ve taşınabilirdir.
States: Native, aria-* ve data-ck-*.
A11y: Her örnekte semantic kullanım notu.

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.

.ck-field · .ck-select

Ülke seçimi

Ülke

<div class="ck-field">
  <label class="ck-field__label" for="country">Ülke</label>
  <select class="ck-select" id="country">
    ...
  </select>
</div>

Ok ikonu token tabanlıdır; multiple seçicilerde native görünüme döner.

04 · NATIVE UI

Choice, switch, navigation ve dialog.

Core yalnız semantic native elementleri biçimlendirir. Açılır menü için details, ileri davranış içinse opsiyonel Enhance seçilir.

.ck-choice · .ck-switch

Gerçek form kontrolleri

Ürün güncellemeleri

Ayda en fazla bir e-posta.

Kompakt yoğunluk

<label class="ck-switch">
  <input class="ck-switch__control" type="checkbox">
  <span class="ck-switch__track" aria-hidden="true"></span>
  <span class="ck-switch__label">Kompakt yoğunluk</span>
</label>

Checkbox/radio state’i native input’tadır; label, help ve error metnini görünür tutun.

.ck-nav · .ck-dialog

Davranışı uygulama seçer

<dialog class="ck-dialog">
  <div class="ck-dialog__body">...</div>
  <form class="ck-dialog__footer" method="dialog">
    <button class="ck-button">Kapat</button>
  </form>
</dialog>

Dialog görünümü Core’dadır; açma-kapatma, odak ve uygulama state’i Core’a girmez.

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.

.ck-table--striped · th[aria-sort]

Sıralanabilir, zebra desenli tablo


Aslı Kaya	Yönetici
Emre Yıldız	Editör
Deniz Aydın	Editör

<table class="ck-table ck-table--striped">
  <th scope="col" aria-sort="descending">
    <button type="button">Kullanıcı</button>
  </th>
  ...
</table>

Sıralama yönü aria-sort ile taşınır; ok ikonu ondan türetilir.

.ck-media-item · .ck-grid--auto-fit

Medya kütüphanesi ızgarası

<div class="ck-grid ck-grid--auto-fit" style="--ck-grid-min: 10rem">
  <div class="ck-media-item" data-ck-state="selected">
    <img src="…" alt="…">
  </div>
</div>

Izgara için ayrı bir sınıf yoktur — mevcut ck-grid--auto-fit kompoze edilir.

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.

.ck-divider-vertical · .ck-line-clamp-2

Bölücü ve satır sınırlama

Taslak

Uzun açıklama metinleri iki satırdan sonra üç nokta ile kırpılır, düzeni bozmadan önizleme sağlar.

<span class="ck-divider-vertical" aria-hidden="true"></span>

<p class="ck-line-clamp-2">...</p>

Yatay bölücü için düz hr yeterlidir; bu yalnız dikey durum içindir.

KURULUM

Tek bağlantı. Bitti.

Dosyayı kendiniz barındırın veya sürüme sabitlenmiş CDN bağlantısını kullanın. Tam indirme, ZIP ve modül seçenekleri için indirme sayfasına gidin.

İndirme ve CDN seçenekleri

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/kayacuneyd/ckcss@v0.1.0-rc.2/dist/ckcss.min.css">

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