Thanh phan

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

Moi vi du ben duoi duoc hien thi voi chinh stylesheet dang duoc gioi thieu. Khong preprocessor. Khong JavaScript. Khong phu thuoc bo sung. Sao chep bat ky doan ma nao vao tap HTML moi va no hoat dong.

Dau vao

Cac phan tu tuong tac ma nguoi dung nhan, cham hoac focus de dieu khien trang.

Nut bam

Mot nut hanh dong ngu nghia, co the tuy chinh giao dien. Bien the dac va vien co sau mau thuong hieu moi loai.

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

Primary Secondary Tertiary

Bien the vien:

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

Vien Vien

Luu y tro nang. Moi bien the .button deu co vong :focus-visible va vung cham toi thieu 24×24 px (WCAG 2.2 SC 2.5.8). Su dung <button type="button"> cho hanh dong trong trang va <a href> chi cho dieu huong.

Huy hieu

Nhan nho gon cho trang thai, so luong hoac danh muc. Kich thuoc chu co dinh de huy hieu thang hang voi van ban xung quanh.

<span class="badge">Mac dinh</span>
<span class="badge primary">Primary</span>
<span class="badge success">Thanh cong</span>
<span class="badge warning">Canh bao</span>
<span class="badge danger">Nguy hiem</span>

Mac dinh Primary Thanh cong Canh bao Nguy hiem

Luu y tro nang. Huy hieu mac dinh la trang tri. Khi huy hieu mang tin hieu duy nhat (v.d. so chua doc), boc no trong tro giup an truc quan: <span class="visually-hidden">3 tin nhan chua doc</span>.

Phan hoi

Cac be mat thong bao cho nguoi dung biet dieu gi da xay ra — hoac sap xay ra.

Canh bao

Thong bao trang thai voi y nghia ngu nghia. Trong v2.0.0 moi bien the duoc dat ten ro rang trong .alert-{primary,secondary,info,success,warning,error} de lop bien the khong xung dot voi cac lop trang thai khac tren trang.

<div class="alert alert-primary" role="alert">
  <strong>Luu y.</strong> Day la canh bao primary.
</div>
<div class="alert alert-success" role="status">
  <strong>Da luu.</strong> Cac thay doi cua ban da duoc luu.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Can than.</strong> Hanh dong nay anh huong den trang thai chung.
</div>
<div class="alert alert-error" role="alert">
  <strong>Loi.</strong> Khong the luu bieu mau.
</div>

Luu y. Day la canh bao primary.

Da luu. Cac thay doi cua ban da duoc luu.

Can than. Hanh dong nay anh huong den trang thai chung.

Loi. Khong the luu bieu mau.

Luu y tro nang. Su dung role="alert" cho thong bao can chu y ngay (loi, canh bao) va role="status" cho xac nhan khong khan cap. Ca hai deu pho bay thong bao cho cong nghe ho tro ngay khi xuat hien.

Be mat

Cac container dong khung va nhom noi dung lien quan.

The

Container co vien va dem cho mot don vi nhat quan. Ket hop voi luoi flex-N de tao tuong the responsive.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Nhe</h3>
      <p>45,7 KB nen, 8,3 KB gzip.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Tro nang</h3>
      <p>Tuan thu WCAG 2.2 ngay tu dau.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Mo-dun</h3>
      <p>Phan tang cascade de de ghi de.</p>
    </div>
  </article>
</section>

Nhe

45,7 KB nen, 8,3 KB gzip.

Tro nang

Tuan thu WCAG 2.2 ngay tu dau.

Mo-dun

Phan tang cascade de de ghi de.

Luu y tro nang. Boc moi the trong mot landmark ngu nghia (<article>, <section>) va bat dau noi dung voi tieu de (<h3>). Nguoi dung trinh doc man hinh co the duyet danh sach the nhu cac vung dieu huong hang dau.

Bieu mau

Dau vao, nhan va nhom de thu thap du lieu nguoi dung.

Truong bieu mau

Nhan, o van ban, vung van ban, fieldset va legend — tat ca deu co kich thuoc nhat quan voi phan con lai cua he thong thiet ke.

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

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

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

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

Ho ten

Tin nhan

Luu y tro nang. Moi o nhap phai co <label for="…"> duoc lien ket theo chuong trinh. Nhom cac dieu khien lien quan trong <fieldset> voi <legend>. Danh dau truong bat buoc bang required (va dau hoa thi hien thi trong nhan).

Bo cuc

Cac primitives cau truc — luoi, container, header — dong khung toan bo trang.

Luoi

Luoi flex-N responsive (1 → 12 cot) xay tren flexbox. Cha .row tu dong gap va wrap.

<div class="row">
  <div class="flex-6">Nua</div>
  <div class="flex-6">Nua</div>
</div>
<div class="row">
  <div class="flex-4">Mot phan ba</div>
  <div class="flex-4">Mot phan ba</div>
  <div class="flex-4">Mot phan ba</div>
</div>

Nua

1/3

Luu y tro nang. Thu tu hien thi phai khop voi thu tu DOM. Tranh sap xep lai hang voi flex-direction: row-reverse hoac order: — trinh doc man hinh va nguoi dung ban phim theo nguon, khong phai hinh anh.

Mot header CSS-only hoan chinh voi nut chuyen doi hamburger responsive. Khong JavaScript. Sao chep doan ma ben duoi vao trang HTML moi da tai skeletonic.min.css va menu se thu gon, mo rong va giu focus dung cach.

<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="#">Thuong hieu</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Chuyen doi dieu huong">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Trang chu</a></li>
    <li><a href="#">Tai lieu</a></li>
    <li><a href="#">Thanh phan</a></li>
    <li><a href="#">Gioi thieu</a></li>
  </ul>
</header>

Thuong hieu

Luu y tro nang. Checkbox an van nam trong thu tu tab de nguoi dung ban phim co the mo menu bang Space hoac Enter. <label> mang aria-hidden vi checkbox la nguon ten tro nang. Thu nho cua so duoi 640 px de thay nut hamburger hoat dong.

Xem ghi chu a11y day du → · Duyet bang mau →

Skeletonic Stylus