Awọn Paati

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

Gbogbo apẹẹrẹ ni isalẹ ni a ṣe pẹlu iwe-aṣa kanna ti a n ṣafihan. Ko si preprocessor. Ko si JavaScript. Ko si awọn igbarale afikun. Daakọ apakan eyikeyi sinu faili HTML tuntun ati pe o ṣiṣẹ.

Awọn igbewọle

Awọn ẹya ibaraṣepọ ti alejo tẹ, fọwọkan, tabi dojukọ lati ṣe iwakọ oju-iwe naa.

Awọn bọtini

Olupilẹṣẹ iṣe ti itumọ, ti a le ṣe aṣa. Awọn ẹya to lagbara ati outline fi awọ ami iyasọtọ mẹfa kọọkan ranṣẹ.

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

Akọkọ Keji Kẹta

Awọn ẹya outline:

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

Outline Outline

Akiyesi irayẹ-si. Gbogbo ẹya .button wa pẹlu oruka :focus-visible ati agbegbe tẹ 24×24 px ti o kere julọ (WCAG 2.2 SC 2.5.8). Lo <button type="button"> fun awọn iṣe inu-oju-iwe ati <a href> fun lilọ kiri nikan.

Awọn aami

Aami kekere fun ipo, iye, tabi ẹka. Iwọn ọrọ ti wa ni ipo nitorinaa awọn aami ba ọrọ agbegbe mu.

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

Aiyipada Akọkọ Aṣeyọri Ikilọ Ewu

Akiyesi irayẹ-si. Awọn aami jẹ ohun ọṣọ nipa aiyipada. Nigba ti aami ba gbe ami nikan (fun apẹẹrẹ iye ti a ko ka), fi i sinu oluranlọwọ ti a fi pamọ ni oju: <span class="visually-hidden">awọn ifiranṣẹ 3 ti a ko ka</span>.

Esi

Awọn oju ti o sọ fun alejo pe nkan kan ṣẹlẹ — tabi pe yoo ṣẹlẹ.

Awọn itaniji

Awọn ifiranṣẹ ipo pẹlu idi ti itumọ. Ninu v2.0.0 gbogbo ẹya ni a ṣe orukọ ni kedere labẹ .alert-{primary,secondary,info,success,warning,error} nitorinaa kilasi ẹya ko le kọlu pẹlu awọn kilasi ipo ni ibi miiran lori oju-iwe naa.

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

Akiyesi. Eyi jẹ itaniji akọkọ.

Ti fipamọ. Awọn iyipada rẹ ti wa ni ipamọ.

Ṣọra. Iṣe yii kan ipo ti a pin.

Aṣiṣe. Ko le fipamọ fọọmu naa.

Akiyesi irayẹ-si. Lo role="alert" fun awọn ifiranṣẹ ti o beere akiyesi lẹsẹkẹsẹ (awọn aṣiṣe, awọn ikilọ) ati role="status" fun awọn ifidi ti ko ṣe pataki. Awọn mejeeji ṣafihan ifiranṣẹ naa si imọ-ẹrọ iranlọwọ ni kete ti o ba han.

Oju

Awọn apoti ti o ṣe agbekalẹ ati ṣe akojọpọ akoonu ti o ni ibatan.

Awọn kaadi

Apoti ti a fi ala si, ti a fi idinku si fun ẹyọkan ti o ni ibamu. Darapọ mọ grid flex-N fun awọn odi kaadi ti o dahun.

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

Fẹẹrẹfẹ

38.8 KB minified, 7.7 KB gzipped.

Ti a le wọle si

Ibamu WCAG 2.2 lẹsẹkẹsẹ.

Modulu

Ti a fi cascade-layer ṣe fun atunṣe irọrun.

Akiyesi irayẹ-si. Fi kaadi kọọkan sinu ami ala-ilẹ ti itumọ (<article>, <section>) ki o si bẹrẹ akoonu rẹ pẹlu akọle (<h3>). Awọn olumulo oluka-iboju le lẹhinna rin irin-ajo nipasẹ atokọ kaadi bi awọn agbegbe lilọ kiri akọkọ.

Awọn fọọmu

Awọn igbewọle, awọn akole, ati awọn akojọpọ fun gbigba data olumulo.

Awọn aaye fọọmu

Awọn akole, awọn igbewọle ọrọ, awọn aaye ọrọ, awọn akojọ aaye ati awọn akọle — gbogbo wọn ni iwọn kanna pẹlu iyoku eto apẹrẹ naa.

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

Orukọ

Imeeli

Ifiranṣẹ

Akiyesi irayẹ-si. Gbogbo igbewọle gbọdọ ni <label for="…"> ti a so mọ rẹ nipa eto. Ṣe akojọpọ awọn iṣakoso ti o ni ibatan ninu <fieldset> pẹlu <legend>. Samisi awọn aaye ti o nilo pẹlu required (ati irawọ ti a le ri ninu ọrọ akole).

Eto

Awọn ipilẹ igbekalẹ — grid, apoti, akọle — ti o ṣe agbekalẹ gbogbo oju-iwe.

Grid

Grid flex-N ti o dahun (1 → 12 ọwọn) ti a kọ lori flexbox. Obi .row ṣe aaye ati yi ni aifọwọyi.

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

Idaji

Idamẹta

Akiyesi irayẹ-si. Aṣẹ oju yẹ ki o baamu aṣẹ DOM. Yẹra fun atunto awọn ila pẹlu flex-direction: row-reverse tabi order: — awọn oluka iboju ati awọn olumulo itẹwe tẹle orisun, kii ṣe kikun.

Akọle CSS-nikan ti o pe pẹlu iyipada hamburger ti o dahun. JavaScript kankan. Daakọ apakan ni isalẹ sinu oju-iwe HTML tuntun ti o ti gba skeletonic.min.css tẹlẹ ati pe akojọ aṣayan yoo ṣubu, faagun, ati mu idojukọ mu ni deede funrarẹ.

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

Ami iyasọtọ

Akiyesi irayẹ-si. Apoti iṣayẹwo ti a fi pamọ wa ninu aṣẹ taabu nitorinaa awọn olumulo itẹwe le ṣii akojọ aṣayan pẹlu Space tabi Enter. <label> gbe aria-hidden nitoripe apoti iṣayẹwo funrarẹ ni orisun orukọ ti a le wọle si. Ṣe atunṣe iwọn ferese ni isalẹ 640 px lati ri iyipada hamburger gba iṣẹ.

Wo gbogbo awọn akiyesi a11y → · Ṣawari awọn palẹti →

Skeletonic Stylus