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

46 pattern’i keşfedin Canlı bileşenleri görün →

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

ÖNE ÇIKAN GALERİ

Farklı işlerin başladığı yer.

Her örnek gerçek HTML ile kurulmuş, responsive ve kopyalanabilir bir başlangıçtır.

Marketing · Hero

İlk ekranı netleştirin.

İki hero varyantı ile ürün hikâyesini açın.

E-commerce · Checkout

Satın alma akışını kurun.

Teslimat, ödeme ve sipariş özeti bir arada.

Application · Data

Veriyi eyleme bağlayın.

Seçim, filtre ve toplu işlem içeren tablo.

Tüm pattern galerisini aç →

TEK ÜRÜN, ÜÇ NET KATMAN

İhtiyacınız kadarını ekleyin.

Core her sayfanın dayanıklı tabanı; UI Kit örnekleri kullanım kılavuzu; Enhance ise yalnızca gerçekten gereken davranış için opsiyonel modüllerdir.

01 · CORE

Tek linkle temel.

Tokenlar, Aleo typography, responsive layout primitive’leri ve erişilebilir temel bileşenler.

Başlangıç rehberi → 02 · UI KIT

Kaynak görünür.

Her bileşende canlı önizleme, HTML, state, responsive davranış ve erişilebilirlik notu.

Bileşen kataloğu → 03 · ENHANCE

Davranış isteğe bağlı.

Bağımsız JS modülleri native deneyimi iyileştirir; kapalıyken içerik ve temel akış çalışır.

Enhance sınırı →

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.

DOKÜMANTASYONLA İLERLEYİN

İlk linkten gerçek projeye.

01 · GUIDE

10 dakikalık başlangıç

Dosyayı ekleyin, layout kurun, ilk component’i kullanın.

02 · DOCS

Prensipleri anlayın

Architecture, typography, responsive, motion ve accessibility aynı merkezde.

03 · AI READY

Ajana sözleşmeyi verin

Makine-okunur API, prompt başlangıcı ve token kuralları.

SIRADAKİ ADIM

İlk sayfanızı şimdi kurun.

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

CKCSS’i indir GitHub’da görüntüle