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

Setiap contoh di bawah ini dirender dengan stylesheet yang sama yang sedang didemonstrasikan. Tanpa preprocessor. Tanpa JavaScript. Tanpa dependensi tambahan. Salin cuplikan mana pun ke file HTML baru dan langsung berfungsi.

Input

Elemen interaktif yang diklik, diketuk, atau difokuskan pengunjung untuk mengoperasikan halaman.

Tombol

Pemicu aksi semantik yang dapat disesuaikan temanya. Varian solid dan outline masing-masing menyertakan enam warna merek.

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

Primary Secondary Tertiary

Varian outline:

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

Outline Outline

Catatan aksesibilitas. Setiap varian .button dilengkapi dengan cincin :focus-visible dan area sentuh minimum 44x44 px (WCAG 2.2 SC 2.5.8). Gunakan <button type="button"> untuk aksi di dalam halaman dan <a href> hanya untuk navigasi.

Badge

Label ringkas untuk status, jumlah, atau kategori. Ukuran teks tetap sehingga badge sejajar dengan teks di sekitarnya.

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

Default Primary Success Warning Danger

Catatan aksesibilitas. Badge bersifat dekoratif secara bawaan. Ketika badge membawa satu-satunya sinyal (misalnya jumlah belum dibaca), bungkus dalam pembantu visually-hidden: <span class="visually-hidden">3 pesan belum dibaca</span>.

Umpan balik

Permukaan yang memberi tahu pengunjung bahwa sesuatu telah terjadi — atau akan terjadi.

Peringatan

Pesan status dengan maksud semantik. Di v2.0.0 setiap varian diberi namespace secara eksplisit di bawah .alert-{primary,secondary,info,success,warning,error} sehingga kelas varian tidak akan bentrok dengan kelas state lain di halaman.

<div class="alert alert-primary" role="alert">
  <strong>Perhatian.</strong> Ini adalah peringatan primary.
</div>
<div class="alert alert-success" role="status">
  <strong>Tersimpan.</strong> Perubahan Anda telah disimpan.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Hati-hati.</strong> Tindakan ini memengaruhi state bersama.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error.</strong> Formulir tidak dapat disimpan.
</div>
Tersimpan. Perubahan Anda telah disimpan.

Catatan aksesibilitas. Gunakan role="alert" untuk pesan yang memerlukan perhatian segera (error, peringatan) dan role="status" untuk konfirmasi yang tidak mendesak. Keduanya mengekspos pesan ke teknologi bantu saat pesan muncul.

Permukaan

Kontainer yang membingkai dan mengelompokkan konten terkait.

Kartu

Kontainer berbingkai dan berpadding untuk satu unit yang koheren. Padukan dengan grid flex-N untuk dinding kartu responsif.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Ringan</h3>
      <p>45,7 KB diminifikasi, 8,3 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Aksesibel</h3>
      <p>Sesuai WCAG 2.2 sejak awal.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modular</h3>
      <p>Cascade-layered untuk kemudahan penimpaan.</p>
    </div>
  </article>
</section>

Ringan

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

Aksesibel

Sesuai WCAG 2.2 sejak awal.

Modular

Cascade-layered untuk kemudahan penimpaan.

Catatan aksesibilitas. Bungkus setiap kartu dalam landmark semantik (<article>, <section>) dan mulai kontennya dengan heading (<h3>). Pengguna screen reader kemudian dapat menelusuri daftar kartu sebagai wilayah yang dapat dinavigasi.

Formulir

Input, label, dan pengelompokan untuk mengumpulkan data pengguna.

Kolom formulir

Label, input teks, textarea, fieldset, dan legend — semua berukuran konsisten dengan seluruh sistem desain.

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

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

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

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

Catatan aksesibilitas. Setiap input harus memiliki <label for="..."> yang terhubung secara programatik. Kelompokkan kontrol terkait di dalam <fieldset> dengan <legend>. Tandai kolom wajib dengan required (dan tanda bintang yang terlihat di teks label).

Tata letak

Primitif struktural — grid, kontainer, header — yang membingkai seluruh halaman.

Grid

Grid flex-N responsif (1 → 12 kolom) yang dibangun di atas flexbox. Parent .row memberikan gap dan wrap secara otomatis.

<div class="row">
  <div class="flex-6">Setengah</div>
  <div class="flex-6">Setengah</div>
</div>
<div class="row">
  <div class="flex-4">Sepertiga</div>
  <div class="flex-4">Sepertiga</div>
  <div class="flex-4">Sepertiga</div>
</div>
Setengah
Setengah
Sepertiga
Sepertiga
Sepertiga

Catatan aksesibilitas. Urutan visual harus sesuai dengan urutan DOM. Hindari menyusun ulang baris dengan flex-direction: row-reverse atau order: — screen reader dan pengguna keyboard mengikuti sumber, bukan tampilan.

Header lengkap khusus CSS dengan toggle hamburger responsif. Tanpa JavaScript. Salin cuplikan di bawah ke halaman HTML baru yang sudah memuat skeletonic.min.css dan menu akan melipat, mengembang, dan menangkap fokus dengan benar secara mandiri.

<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="#">Merek</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Buka/tutup navigasi">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Dokumentasi</a></li>
    <li><a href="#">Komponen</a></li>
    <li><a href="#">Tentang</a></li>
  </ul>
</header>
Merek

Catatan aksesibilitas. Checkbox tersembunyi tetap dalam urutan tab sehingga pengguna keyboard dapat membuka menu dengan Space atau Enter. <label> menggunakan aria-hidden karena checkbox itu sendiri adalah sumber accessible name. Ubah ukuran jendela di bawah 640 px untuk melihat toggle burger mengambil alih.

Lihat catatan a11y lengkap → · Jelajahi palet →