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

Kazdy priklad nize je vykreslovany presne tim stylesheetem, ktery je zde prezentovan. Zadny preprocesor. Zadny JavaScript. Zadne dalsi zavislosti. Zkopirujte jakykoliv ukazku do prazdneho HTML souboru a funguje.

Vstupy

Interaktivni elementy, na ktere navstevnik klika, tapa nebo je fokusuje pro ovladani stranky.

Tlacitka

Semanticky, temovatelny spoustec akce. Plne a obrysove varianty nabizeji sest znackovych barev.

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

Primarni Sekundarni Terciarni

Obrysove varianty:

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

Outline Outline

Poznamka k pristupnosti. Kazda .button varianta ma :focus-visible ohraniceni a minimalni dotykovou plochu 24×24 px (WCAG 2.2 SC 2.5.8). Pouzijte <button type="button"> pro akce na strance a <a href> pouze pro navigaci.

Stitky

Kompaktni popisek pro stav, pocet nebo kategorii. Velikost pisma je fixni, aby se stitky zarovnaly s okolnim textem.

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

Vychozi Primarni Uspech Varovani Nebezpeci

Poznamka k pristupnosti. Stitky jsou ve vychozim stavu dekorativni. Pokud stitek nese jediny signal (napr. pocet neprectenych zprav), obalte jej vizualne skrytym pomocnikem: <span class="visually-hidden">3 neprectene zpravy</span>.

Zpetna vazba

Povrchy, ktere navstevnika informuji, ze se neco stalo — nebo se brzy stane.

Upozorneni

Stavove zpravy se semantickym vyznamem. Ve v2.0.0 je kazda varianta explicitne pojmenovana pod .alert-{primary,secondary,info,success,warning,error}, aby trida varianty nekolidovala se stavovymi tridami jinde na strance.

<div class="alert alert-primary" role="alert">
  <strong>Pozor.</strong> Toto je primarni upozorneni.
</div>
<div class="alert alert-success" role="status">
  <strong>Ulozeno.</strong> Vase zmeny byly ulozeny.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Opatrne.</strong> Tato akce ovlivnuje sdileny stav.
</div>
<div class="alert alert-error" role="alert">
  <strong>Chyba.</strong> Formular se nepodarilo ulozit.
</div>

Pozor. Toto je primarni upozorneni.

Ulozeno. Vase zmeny byly ulozeny.

Opatrne. Tato akce ovlivnuje sdileny stav.

Chyba. Formular se nepodarilo ulozit.

Poznamka k pristupnosti. Pouzijte role="alert" pro zpravy vyzadujici okamzitou pozornost (chyby, varovani) a role="status" pro nenarocne potvrzeni. Oba zpristupni zpravu pro asistivni technologie v okamziku jejiho zobrazeni.

Povrchy

Kontejnery, ktere rami a seskupuji souvisejici obsah.

Karty

Oramovany kontejner s odsazenim pro jednu soudrznou jednotku. Kombinujte s mrizkou flex-N pro responzivni steny karet.

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

Lehke

45,7 KB minifikovano, 8,3 KB gzipped.

Pristupne

WCAG 2.2 soulad hned po instalaci.

Modularni

Kaskadove vrstvy pro snadne prepsani.

Poznamka k pristupnosti. Kazdou kartu obalte do semantickeho landmarku (<article>, <section>) a obsah zacnete nadpisem (<h3>). Uzivatele screen readeru pak mohou procházet seznam karet jako plnohodnotne navigovatelne oblasti.

Formulare

Vstupy, popisky a seskupeni pro sber uzivatelsych dat.

Formularova pole

Popisky, textove vstupy, textove oblasti, fieldsety a legendy — vse dimenzovane konzistentne se zbytkem navrhoveho systemu.

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

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

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

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

Jmeno

E-mail

Zprava

Poznamka k pristupnosti. Kazdy vstup musi mit programove propojeny <label for="…">. Souvisejici ovladaci prvky seskupte do <fieldset> s <legend>. Povinná pole oznacte atributem required (a viditelnou hvezdickou v textu popisku).

Rozvrzeni

Strukturalni primitivy — mrizka, kontejner, zahlavi — ktere tvorí celkovy ramec stranky.

Mrizka

Responzivni mrizka flex-N (1 az 12 sloupcu) postavena na flexboxu. Rodicovsky .row automaticky pridava mezery a zalamuje.

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

Polovina

Tretina

Poznamka k pristupnosti. Vizualni poradi by melo odpovidat poradi v DOM. Neprehazujte radky pomoci flex-direction: row-reverse nebo order: — screen readery a uzivatele klavesnice nasleduji zdrojovy kod, ne vizualni zobrazeni.

Kompletni zahlavi ciste v CSS s responzivnim hamburger prepinacem. Zadny JavaScript. Zkopirujte nasledujici ukazku do prazdne HTML stranky, ktera jiz nacita skeletonic.min.css — menu se spravne sklada, rozklada a spravuje fokus samo.

<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="#">Znacka</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Prepnout navigaci">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Domov</a></li>
    <li><a href="#">Dokumentace</a></li>
    <li><a href="#">Komponenty</a></li>
    <li><a href="#">O projektu</a></li>
  </ul>
</header>

Znacka

Poznamka k pristupnosti. Skryty checkbox zustava v tab poradi, aby uzivatele klavesnice mohli otevrít menu mezernikem nebo Enterem. <label> nese aria-hidden, protoze checkbox sam je zdrojem pristupneho nazvu. Zmensete okno prohlizece pod 640 px, abyste videli hamburger prepinac v akci.

Poznamky k pristupnosti → · Prohledejte palety →