Ana içeriğe geç
CKCSS
Menü

CSS-FIRST · BUILD YOK · ZORUNLU JS YOK

Fikrinizi arayüze bağlayın.

CKCSS; tek bir CSS dosyasıyla modern, erişilebilir ve responsive arayüzler kurmak için tasarlanmış bir temel, UI kit ve isteğe bağlı davranış katmanıdır.

SEMANTİK HTML · ALEO · TOKENLAR · PROGRESSIVE ENHANCEMENT

index.htmlHTML
<link rel="stylesheet"
  href="/assets/ckcss.min.css">

<main class="ck-container ck-stack">
  <h1>Merhaba, CKCSS.</h1>
  <a class="ck-button" href="#">Başla</a>
</main>

CANLI MINI SHOWCASE

Önce semantik yapı, sonra sınıf.

ÖnizlemeResponsive card
YENİ

Bir bileşen, bütün bağlamı.

İçerik, aksiyon ve durum aynı semantic sözleşmeyle birlikte gelir.

Bileşeni aç
<article class="ck-card">
  <div class="ck-card__body ck-stack">
    <h3>Başlık</h3>
    <p>İçerik</p>
  </div>
</article>
HTML
Semantic elementler önce gelir.
API
ck- sınıfları, --ck- tokenları.
State
Native, aria-* veya data-ck-*.
Fallback
JS kapalıyken de temel akış korunur.

SIRADAKİ ADIM

İlk sayfanızı şimdi kurun.

Dosyayı indirin, CDN bağlantısını alın veya dokümantasyondan başlayın.