Abubuwan Hadi

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

Ana nuna kowane misali da ke ƙasa da stylesheet ɗin da ake nunawa. Babu preprocessor. Babu JavaScript. Babu ƙarin abubuwan dogaro. Kwafa kowane ɓangare zuwa sabon fayil na HTML kuma ya yi aiki.

Shigarwa

Abubuwan hulɗa da mai ziyara ke danna, taɓawa, ko mai da hankali don tafiyar da shafin.

Maballin

Abubuwan fara aiki masu ma'ana, waɗanda ake iya canza yanayin su. Iri-irin Solid da outline suna zuwa da launuka shida na alama kowanne.

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

Primary Secondary Tertiary

Iri-irin outline:

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

Outline Outline

Bayanan samun dama. Kowane nau'in .button yana zuwa da zoben :focus-visible da mafi ƙarancin yankin bugu na 24×24 px (WCAG 2.2 SC 2.5.8). Yi amfani da <button type="button"> don ayyuka a cikin shafi kuma <a href> don kewayawa kawai.

Alamomi

Lakabi mai taƙaitawa don matsayi, ƙidaya, ko rukunin. Girman rubutu an gyara shi don alamomi su daidaita da rubutun da ke kewaye.

<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

Bayanan samun dama. Alamomi suna don ado ne ta tsoho. Lokacin da alamar ke ɗauke da sigina ɗaya tilo (misali ƙidayar da ba a karanta ba), nannaɗe ta a cikin taimako da aka ɓoye: <span class="visually-hidden">Saƙonni 3 da ba a karanta ba</span>.

Amsa

Saman da ke gaya wa mai ziyara cewa wani abu ya faru — ko kuma yana shirin faruwa.

Faɗakarwa

Saƙonnin matsayi da niyyar ma'ana. A cikin v2.0.0 an sanya kowane nau'i a ƙarƙashin sunan yanki a ƙarƙashin .alert-{primary,secondary,info,success,warning,error} don haka ajin nau'i ba zai yi karo da azuzuwan yanayi a wani wuri a shafin ba.

<div class="alert alert-primary" role="alert">
  <strong>Ku lura.</strong> Wannan faɗakarwa ce ta farko.
</div>
<div class="alert alert-success" role="status">
  <strong>An ajiye.</strong> An adana canje-canjen ku.
</div>
<div class="alert alert-warning" role="alert">
  <strong>A hankali.</strong> Wannan aikin yana shafar yanayin da ake raba.
</div>
<div class="alert alert-error" role="alert">
  <strong>Kuskure.</strong> Ba a iya ajiye sigar ba.
</div>

Ku lura. Wannan faɗakarwa ce ta farko.

An ajiye. An adana canje-canjen ku.

A hankali. Wannan aikin yana shafar yanayin da ake raba.

Kuskure. Ba a iya ajiye sigar ba.

Bayanan samun dama. Yi amfani da role="alert" don saƙonnin da ke buƙatar kulawa nan take (kurakurai, gargaɗi) da role="status" don tabbatarwa marasa gaggawa. Duka biyun suna fallasa saƙon ga fasahar taimako a lokacin da ya bayyana.

Saman

Kwantena da ke ƙirƙira da haɗa abubuwan da ke da alaƙa.

Katunan

Kwantenan da ke da iyaka da padding don raka'a guda mai jituwa. Haɗa shi da grid ɗin flex-N don bangon katuna masu amsa.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Mai saukin nauyi</h3>
      <p>38.8 KB da aka ƙaranta, 7.7 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Mai saukin amfani</h3>
      <p>Daidaitaccen WCAG 2.2 daga cikin akwatin.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Mai tsari</h3>
      <p>Cascade-layered don sauƙin soke.</p>
    </div>
  </article>
</section>

Mai saukin nauyi

38.8 KB da aka ƙaranta, 7.7 KB gzipped.

Mai saukin amfani

WCAG 2.2 daidaitacce daga cikin akwatin.

Mai tsari

Cascade-layered don sauƙin soke.

Bayanan samun dama. Nannaɗe kowanne katuna a cikin wurin ma'ana (<article>, <section>) kuma fara abubuwan cikin sa da kanun (<h3>). Masu amfani da screen-reader za su iya kewaya jerin katuna a matsayin yankuna masu kewayawa.

Sifofi

Shigarwa, lakabai, da rabe-rabe don tattara bayanan mai amfani.

Filayen sifofi

Lakabai, shigarwa na rubutu, textareas, fieldsets da legends — duk an daidaita girman su da sauran tsarin ƙira.

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

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

  <label for="msg">Saƙo</label>
  <textarea id="msg" rows="4"></textarea>

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

Suna

Imel

Saƙo

Bayanan samun dama. Kowane shigarwa dole ne ya kasance da <label for="…"> da aka danganta. Tara abubuwan sarrafa masu alaƙa a cikin <fieldset> tare da <legend>. Yi alamar filayen da ake buƙata da required (da tauraron da ake gani a cikin rubutun lakabi).

Tsari

Ginshiƙan tsari — grid, container, header — da ke ƙirƙira dukan shafin.

Grid

Grid ɗin flex-N mai amsa (1 → 12 ginshiƙi) da aka gina a kan flexbox. .row mai iyaye yana yin gap da nannaɗe ta atomatik.

<div class="row">
  <div class="flex-6">Rabi</div>
  <div class="flex-6">Rabi</div>
</div>
<div class="row">
  <div class="flex-4">Sulusi</div>
  <div class="flex-4">Sulusi</div>
  <div class="flex-4">Sulusi</div>
</div>

Rabi

Sulusi

Bayanan samun dama. Tsarin gani ya kamata ya daidaita da tsarin DOM. Guji sake tsara layuka da flex-direction: row-reverse ko order: — screen readers da masu amfani da maɓalli suna bin tushen, ba fenti ba.

Cikakken kanun shafi na CSS kawai tare da hamburger toggle mai amsa. Babu JavaScript. Kwafa ɓangaren da ke ƙasa zuwa sabon shafin HTML da ya riga ya loda skeletonic.min.css kuma menu ɗin zai naɗe, faɗaɗa, da sarrafa mayar da hankali daidai da kansa.

<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="#">Alama</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Canza kewayawa">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Gida</a></li>
    <li><a href="#">Takardun</a></li>
    <li><a href="#">Abubuwan hadi</a></li>
    <li><a href="#">Game da</a></li>
  </ul>
</header>

Alama

Bayanan samun dama. Checkbox ɗin da aka ɓoye yana cikin tsarin tab don masu amfani da maɓalli su iya buɗe menu ɗin da Space ko Enter. <label> yana ɗauke da aria-hidden saboda checkbox ɗin kansa shine tushen sunan samun dama. Canza girman window ƙasa da 640 px don ganin burger toggle yana karɓar mulki.

Duba bayanan a11y cikakku → · Duba launuka →

Skeletonic Stylus