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

ทุกตัวอย่างด้านล่าง เรนเดอร์ด้วยสไตล์ชีตเดียวกันที่กำลังสาธิต ไม่มี preprocessor ไม่มี JavaScript ไม่มี dependencies เพิ่ม คัดลอก สนิปเป็ตใดก็ได้ไปใส่ในไฟล์ HTML ใหม่แล้วใช้งานได้เลย

อินพุต

อิลิเมนต์แบบโต้ตอบที่ผู้เข้าชมคลิก แตะ หรือโฟกัสเพื่อควบคุมหน้า

ปุ่ม

ทริกเกอร์การกระทำที่เป็นเชิงความหมายและปรับธีมได้ ตัวแปรแบบทึบและ outline มีสีแบรนด์ให้เลือกหกสี

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

Primary Secondary Tertiary

ตัวแปร Outline:

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

Outline Outline

หมายเหตุการเข้าถึง ทุกตัวแปร .button มาพร้อมวงแหวน :focus-visible และ พื้นที่สัมผัสขั้นต่ำ 24×24 px (WCAG 2.2 SC 2.5.8) ใช้ <button type="button"> สำหรับ การกระทำในหน้า และ <a href> สำหรับการนำทางเท่านั้น

ป้ายกำกับ

ป้ายขนาดกะทัดรัดสำหรับสถานะ จำนวน หรือหมวดหมู่ ขนาดตัวอักษร คงที่เพื่อให้ป้ายเรียงตัวกับข้อความรอบข้าง

<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

หมายเหตุการเข้าถึง ป้ายกำกับเป็นส่วนตกแต่งตามค่าเริ่มต้น เมื่อป้ายเป็นสัญญาณเดียว (เช่น จำนวนที่ยังไม่ได้อ่าน) ให้ครอบด้วย ตัวช่วยที่ซ่อนจากสายตา: <span class="visually-hidden">3 ข้อความ ที่ยังไม่ได้อ่าน</span>

การแจ้งเตือน

พื้นผิวที่แจ้งผู้เข้าชมว่ามีบางอย่างเกิดขึ้น — หรือกำลังจะเกิดขึ้น

แจ้งเตือน

ข้อความสถานะที่มีเจตนาเชิงความหมาย ใน v2.0.0 ทุกตัวแปรถูก ตั้งชื่อ namespace อย่างชัดเจน ภายใต้ .alert-{primary,secondary,info,success,warning,error} เพื่อให้คลาสตัวแปรไม่ชนกับคลาสสถานะอื่นในหน้า

<div class="alert alert-primary" role="alert">
  <strong>โปรดทราบ</strong> นี่คือแจ้งเตือน primary
</div>
<div class="alert alert-success" role="status">
  <strong>บันทึกแล้ว</strong> การเปลี่ยนแปลงของคุณถูกบันทึกแล้ว
</div>
<div class="alert alert-warning" role="alert">
  <strong>ระวัง</strong> การกระทำนี้ส่งผลต่อสถานะที่ใช้ร่วมกัน
</div>
<div class="alert alert-error" role="alert">
  <strong>ผิดพลาด</strong> ไม่สามารถบันทึกฟอร์มได้
</div>
บันทึกแล้ว การเปลี่ยนแปลงของคุณถูกบันทึกแล้ว

หมายเหตุการเข้าถึง ใช้ role="alert" สำหรับข้อความที่ต้องการ ความสนใจทันที (ข้อผิดพลาด คำเตือน) และ role="status" สำหรับ การยืนยันที่ไม่เร่งด่วน ทั้งสองจะแสดงข้อความต่อเทคโนโลยีช่วยเหลือ ทันทีที่ปรากฏ

พื้นผิว

คอนเทนเนอร์ที่กรอบและจัดกลุ่มเนื้อหาที่เกี่ยวข้อง

การ์ด

คอนเทนเนอร์ที่มีขอบและ padding สำหรับหน่วยที่สอดคล้องกันเดียว ใช้คู่กับ กริด flex-N สำหรับผนังการ์ดแบบ responsive

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">เบา</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">เข้าถึงได้</h3>
      <p>รองรับ WCAG 2.2 ทันทีที่ใช้งาน</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">เป็นโมดูล</h3>
      <p>Cascade-layered สำหรับการ override ที่ง่าย</p>
    </div>
  </article>
</section>

เบา

38.8 KB minified, 7.7 KB gzipped

เข้าถึงได้

รองรับ WCAG 2.2 ทันทีที่ใช้งาน

เป็นโมดูล

Cascade-layered สำหรับการ override ที่ง่าย

หมายเหตุการเข้าถึง ครอบแต่ละการ์ดด้วย landmark เชิงความหมาย (<article>, <section>) และเริ่มเนื้อหาด้วยหัวข้อ (<h3>) ผู้ใช้ screen reader จะสามารถนำทางรายการการ์ดเป็นส่วนที่เข้าถึงได้

ฟอร์ม

อินพุต ป้ายชื่อ และการจัดกลุ่มสำหรับรวบรวมข้อมูลผู้ใช้

ฟิลด์ฟอร์ม

ป้ายชื่อ อินพุตข้อความ textarea fieldset และ legend — ทั้งหมดมี ขนาดสม่ำเสมอกับส่วนอื่นของระบบออกแบบ

<form>
  <label for="name">ชื่อ</label>
  <input id="name" type="text" required>

  <label for="email">อีเมล</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">ข้อความ</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">ส่ง</button>
</form>

หมายเหตุการเข้าถึง ทุกอินพุตต้องมี <label for="…"> ที่เชื่อมโยง ทางโปรแกรม จัดกลุ่มคอนโทรลที่เกี่ยวข้องภายใน <fieldset> พร้อม <legend> ทำเครื่องหมายฟิลด์ที่จำเป็นด้วย required (และเครื่องหมาย ดอกจันที่มองเห็นได้ในข้อความป้ายชื่อ)

เลย์เอาต์

โครงสร้างพื้นฐาน — กริด คอนเทนเนอร์ ส่วนหัว — ที่กำหนดกรอบ ทั้งหน้า

กริด

กริด flex-N แบบ responsive (1 → 12 คอลัมน์) สร้างบน flexbox parent .row จัดช่องว่างและ wrap อัตโนมัติ

<div class="row">
  <div class="flex-6">ครึ่ง</div>
  <div class="flex-6">ครึ่ง</div>
</div>
<div class="row">
  <div class="flex-4">หนึ่งส่วนสาม</div>
  <div class="flex-4">หนึ่งส่วนสาม</div>
  <div class="flex-4">หนึ่งส่วนสาม</div>
</div>
ครึ่ง
ครึ่ง
หนึ่งส่วนสาม
หนึ่งส่วนสาม
หนึ่งส่วนสาม

หมายเหตุการเข้าถึง ลำดับที่มองเห็นควรตรงกับลำดับ DOM หลีกเลี่ยง การเรียงลำดับแถวใหม่ด้วย flex-direction: row-reverse หรือ order: — screen reader และผู้ใช้คีย์บอร์ดจะติดตามซอร์ส ไม่ใช่การแสดงผล

ส่วนหัวแบบ CSS-only ที่สมบูรณ์พร้อมปุ่มแฮมเบอร์เกอร์แบบ responsive ไม่มี JavaScript คัดลอกสนิปเป็ตด้านล่างไปใส่ในหน้า HTML ที่ โหลด skeletonic.min.css แล้ว เมนูจะยุบ ขยาย และจัดการโฟกัสได้เอง

<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="#">แบรนด์</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="สลับการนำทาง">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">หน้าแรก</a></li>
    <li><a href="#">เอกสาร</a></li>
    <li><a href="#">ส่วนประกอบ</a></li>
    <li><a href="#">เกี่ยวกับ</a></li>
  </ul>
</header>
แบรนด์

หมายเหตุการเข้าถึง checkbox ที่ซ่อนอยู่ยังคงอยู่ในลำดับ tab เพื่อให้ผู้ใช้คีย์บอร์ดเปิดเมนูด้วย Space หรือ Enter <label> มี aria-hidden เพราะ checkbox เองเป็นแหล่งชื่อ ที่เข้าถึงได้ ปรับขนาดหน้าต่างให้ต่ำกว่า 640 px เพื่อดูปุ่ม แฮมเบอร์เกอร์ทำงาน

ดูบันทึกการเข้าถึงทั้งหมด → · ดูชุดสี →