組件

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

以下每個範例均使用正在展示的樣式表進行渲染。無需預處理器、無需 JavaScript、無額外依賴。將任何片段複製到空白 HTML 檔案中即可運作。

輸入元素

訪客透過點擊、觸控或聚焦來驅動頁面的互動元素。

按鈕

語義化、可定製主題的操作觸發器。實心與邊框變體各提供六種品牌色彩。

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

主要次要第三

邊框變體：

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

邊框邊框

無障礙提示。 每個 .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>

預設主要成功警告危險

無障礙提示。 徽章預設為裝飾性元素。當徽章承載唯一訊號（例如未讀計數）時，請使用視覺隱藏輔助：<span class="visually-hidden">3 則未讀訊息</span>。

回饋

告知訪客事件已發生（或即將發生）的表面元素。

提示框

帶有語義意圖的狀態訊息。在 v2.0.0 中，每個變體均明確以 .alert-{primary,secondary,info,success,warning,error} 命名空間化，使變體類別不會與頁面上其他狀態類別衝突。

<div class="alert alert-primary" role="alert">
  <strong>Heads up.</strong> This is a primary alert.
</div>
<div class="alert alert-success" role="status">
  <strong>Saved.</strong> Your changes are persisted.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Careful.</strong> This action affects shared state.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error.</strong> Could not save the form.
</div>

請注意。 這是一個主要提示框。

已儲存。 您的變更已持久化。

請小心。 此操作會影響共用狀態。

錯誤。 無法儲存表單。

無障礙提示。 對需要立即關注的訊息（錯誤、警告）使用 role="alert"，對非緊急確認使用 role="status"。兩者都會在訊息出現的瞬間向輔助技術公開內容。

表面

框架化並組織相關內容的容器。

卡片

帶有邊框和內距的容器，用於承載單一內聚單元。搭配 flex-N 格線可建立響應式卡片牆。

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

輕量級

壓縮後 38.8 KB，gzip 後 7.7 KB。

無障礙

開箱即符合 WCAG 2.2。

模組化

級聯層架構，輕鬆覆寫。

無障礙提示。 將每張卡片包裹在語義化地標中（<article>、<section>），並以標題（<h3>）開始其內容。螢幕閱讀器使用者即可將卡片清單作為一級可導覽區域來瀏覽。

表單

用於收集使用者資料的輸入框、標籤和分組。

表單欄位

標籤、文字輸入框、文字區域、欄位集和圖例——所有尺寸均與設計系統的其他部分保持一致。

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

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

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

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

姓名

電子郵件

訊息

無障礙提示。 每個輸入框必須有程式化關聯的 <label for="…">。將相關控制項放入 <fieldset> 並附上 <legend>。使用 required 標記必填欄位（並在標籤文字中加上可見的星號）。

版面

結構化基礎元素——格線、容器、頁首——用於構建整個頁面。

格線

基於 flexbox 的響應式 flex-N 格線（1 → 12 欄）。.row 父元素自動處理間距與換行。

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

一半

三分之一

無障礙提示。 視覺順序應與 DOM 順序一致。避免使用 flex-direction: row-reverse 或 order: 重新排列列——螢幕閱讀器和鍵盤使用者跟隨原始碼順序，而非繪製順序。

完整的純 CSS 頁首，附帶響應式漢堡切換按鈕。零 JavaScript。 將下方片段複製到已載入 skeletonic.min.css 的空白 HTML 頁面中，選單即可自動收合、展開並正確管理焦點。

<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="#">Brand</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Toggle navigation">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">About</a></li>
  </ul>
</header>

品牌

無障礙提示。 隱藏的核取方塊保留在 Tab 順序中，鍵盤使用者可透過 Space 或 Enter 開啟選單。<label> 帶有 aria-hidden，因為核取方塊本身就是無障礙名稱的來源。將視窗縮小至 640 px 以下即可看到漢堡切換按鈕接管。

查看完整無障礙說明 → · 瀏覽色板 →

Skeletonic Stylus

輸入元素

按鈕

徽章

回饋

提示框

表面

卡片

輕量級

無障礙

模組化

表單

表單欄位

版面

格線

頁首與漢堡導覽