Bilesenler — Skeletonic Stylus

Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.

Asagidaki her ornek gosterilen stil sayfasiyla render edilmistir. On islemci yok. JavaScript yok. Ekstra bagimlilik yok. Herhangi bir kod parcasini bos bir HTML dosyasina kopyalayin ve calisir.

Girisler

Ziyaretcinin sayfayi yonlendirmek icin tikladigi, dokundugu veya odakladigi etkilesimli ogeler.

Butonlar

Semantik, temalanabilir bir eylem tetikleyicisi. Dolu ve anahat varyantlari alti marka rengi sunar.

<a href="#" class="button primary">Primary</a>
<a href="#" class="button secondary">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>

Birincil Ikincil Ucuncul

Anahat varyantlari:

<a href="#" class="button primary-outline">Outline</a>
<a href="#" class="button secondary-outline">Outline</a>

Anahat Anahat

Erisilebilirlik notu. Her .button varyanti bir :focus-visible halkasi ve minimum 44x44 px tiklanabilir alan (WCAG 2.2 SC 2.5.8) ile gelir. Sayfa ici eylemler icin <button type="button">, yalnizca navigasyon icin <a href> kullanin.

Rozetler

Durum, sayi veya kategori icin kompakt bir etiket. Yazi boyutu sabit oldugundan rozetler cevresindeki metinle hizalanir.

<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

Varsayilan Birincil Basarili Uyari Tehlike

Erisilebilirlik notu. Rozetler varsayilan olarak dekoratiftir. Rozet tek sinyali tasiyorsa (ornegin okunmamis sayi), gorsel olarak gizli bir yardimci ile sarin: <span class="visually-hidden">3 okunmamis mesaj</span>.

Geri bildirim

Ziyaretciye bir seyin oldugunu — veya olmak uzere oldugunu bildiren yuzeyler.

Uyarilar

Semantik amacli durum mesajlari. v2.0.0'de her varyant acikca .alert-{primary,secondary,info,success,warning,error} altinda adlandirilmistir, boylece varyant sinifi sayfadaki baska durum siniflariyla catismaz.

<div class="alert alert-primary" role="alert">
  <strong>Dikkat.</strong> Bu birincil bir uyaridir.
</div>
<div class="alert alert-success" role="status">
  <strong>Kaydedildi.</strong> Degisiklikleriniz kaydedildi.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Dikkatli olun.</strong> Bu eylem paylasilan durumu etkiler.
</div>
<div class="alert alert-error" role="alert">
  <strong>Hata.</strong> Form kaydedilemedi.
</div>

Dikkat. Bu birincil bir uyaridir.

Kaydedildi. Degisiklikleriniz kaydedildi.

Dikkatli olun. Bu eylem paylasilan durumu etkiler.

Hata. Form kaydedilemedi.

Erisilebilirlik notu. Aninda dikkat gerektiren mesajlar (hatalar, uyarilar) icin role="alert", acil olmayan onaylar icin role="status" kullanin. Her ikisi de mesaji gostuldugu anda yardimci teknolojilere acik hale getirir.

Yuzey

Ilgili icerigi cerceveleyen ve gruplayan konteynerler.

Kartlar

Tek bir tutarli birim icin kenarlikh, dolgulu bir konteyner. Duyarli kart duvarlari icin flex-N izgarasiyla birlestirebilirsiniz.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Lightweight</h3>
      <p>38.8 KB minified, 7.7 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Accessible</h3>
      <p>WCAG 2.2 conformant out of the box.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modular</h3>
      <p>Cascade-layered for easy overrides.</p>
    </div>
  </article>
</section>

Hafif

45,7 KB kucultulmus, 8,3 KB gzipped.

Erisilebilir

WCAG 2.2 kutudan ciktiginda uyumlu.

Moduler

Kolay gecersiz kilma icin cascade-layered.

Erisilebilirlik notu. Her karti semantik bir isaretci (<article>, <section>) icerisine yerlestirin ve icerigini bir baslikla (<h3>) baslatsin. Ekran okuyucu kullanicilari boylece kart listesini birinci sinif gezilebilir bolgeler olarak dolasabilir.

Formlar

Kullanici verilerini toplamak icin giris alanlari, etiketler ve gruplamalar.

Form alanlari

Etiketler, metin girisleri, metin alanlari, fieldset'ler ve legend'ler — tamami tasarim sisteminin geri kalasiyla tutarli boyutlandirilmistir.

<form>
  <label for="name">Ad</label>
  <input id="name" type="text" required>

  <label for="email">E-posta</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">Mesaj</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">Gonder</button>
</form>

E-posta

Mesaj

Erisilebilirlik notu. Her giris alaninin programatik olarak iliskilendirilmis bir <label for="..."> ogelesi olmalidir. Iliskili kontrolleri bir <legend> ile <fieldset> icerisine gruplayin. Zorunlu alanlari required (ve etiket metninde gorsel bir yildiz) ile isaretleyin.

Duzen

Tum sayfayi cerceveleyen yapisal temel ogeler — izgara, konteyner, baslik.

Izgara

Flexbox uzerine kurulu duyarli bir flex-N izgarasi (1 → 12 sutun). .row ebeveyn ogeleri bosluk ve satirlama islemlerini otomatik yapar.

<div class="row">
  <div class="flex-6">Half</div>
  <div class="flex-6">Half</div>
</div>
<div class="row">
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
</div>

Yarim

Ucte bir

Erisilebilirlik notu. Gorsel sira DOM sirasina uygun olmalidir. Satirlari flex-direction: row-reverse veya order: ile yeniden siralamaktan kacinin — ekran okuyuculari ve klavye kullanicilari goruntulemeyi degil kaynagi takip eder.

Duyarli hamburger acma/kapama ile tam bir salt-CSS baslik. Sifir JavaScript. Asagidaki kod parcasini zaten skeletonic.min.css yukleyen bos bir HTML sayfasina kopyalayin — menu kendi basina dogru sekilde acilir, kapanir ve odagi yakalar.

<style>
  .sk-header{position:relative;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e4e4e7;border-radius:.5rem;background:#fff;}
  .sk-header .sk-brand{font-weight:600;color:#0a0a0a;text-decoration:none;}
  .sk-header .sk-toggle{position:absolute;left:-9999px;}
  .sk-header .sk-burger{display:none;margin-left:auto;cursor:pointer;padding:.625rem .75rem;border:1px solid #e4e4e7;border-radius:.375rem;font-size:1.125rem;line-height:1;min-width:2.75rem;min-height:2.75rem;}
  .sk-header .sk-burger:focus-within,.sk-header .sk-toggle:focus-visible+.sk-burger{outline:2px solid hsl(210,100%,42%);outline-offset:2px;}
  .sk-header .sk-menu{list-style:none;display:flex;gap:.25rem;margin:0 0 0 auto;padding:0;}
  .sk-header .sk-menu a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .875rem;border-radius:.375rem;color:#1a1a1a;text-decoration:none;}
  .sk-header .sk-menu a:hover{background:#f4f4f5;}
  @media (max-width:640px){
    .sk-header .sk-burger{display:inline-flex;align-items:center;justify-content:center;}
    .sk-header .sk-menu{display:none;flex-direction:column;gap:0;position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.375rem;box-shadow:0 4px 24px rgba(0,0,0,.08);z-index:10;}
    .sk-header .sk-menu a{padding:.75rem 1rem;border-bottom:1px solid #f4f4f5;}
    .sk-header .sk-menu li:last-child a{border-bottom:0;}
    .sk-header .sk-toggle:checked ~ .sk-menu{display:flex;}
  }
</style>
<header class="sk-header">
  <a class="sk-brand" href="#">Marka</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Navigasyonu ac/kapat">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Ana sayfa</a></li>
    <li><a href="#">Dokumanlar</a></li>
    <li><a href="#">Bilesenler</a></li>
    <li><a href="#">Hakkinda</a></li>
  </ul>
</header>

Marka

Erisilebilirlik notu. Gizli onay kutusu sekme sirasinda kalir, boylece klavye kullanicilari menuyu Bosluk veya Enter ile acabilir. <label>, aria-hidden tasir cunku onay kutusunun kendisi erisilebilir ad kaynagidir. Hamburger acma/kapama'yi calisir halde gormek icin pencereyi 640 px'in altina daraltsin.

Tum erisilebilirlik notlarini gorun → · Paletlere goz atin →