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

Ogni esempio qui sotto e renderizzato con lo stesso foglio di stile in dimostrazione. Nessun preprocessore. Nessun JavaScript. Nessuna dipendenza aggiuntiva. Copia qualsiasi snippet in un file HTML vuoto e funziona.

Input

Elementi interattivi su cui il visitatore fa clic, tocca o mette a fuoco per interagire con la pagina.

Pulsanti

Un trigger di azione semantico e personalizzabile. Le varianti solide e outline includono sei colori brand ciascuna.

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

Primary Secondary Tertiary

Varianti outline:

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

Outline Outline

Nota sull'accessibilita. Ogni variante .button include un anello :focus-visible e un'area di tocco minima di 44x44 px (WCAG 2.2 SC 2.5.8). Usa <button type="button"> per azioni nella pagina e <a href> solo per la navigazione.

Badge

Un'etichetta compatta per stato, conteggio o categoria. La dimensione del testo e fissa cosi i badge si allineano con il testo circostante.

<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

Nota sull'accessibilita. I badge sono decorativi per impostazione predefinita. Quando il badge porta l'unico segnale (ad es. un conteggio di messaggi non letti), avvolgilo in un helper nascosto visivamente: <span class="visually-hidden">3 messaggi non letti</span>.

Feedback

Superfici che informano il visitatore che qualcosa e successo — o sta per succedere.

Alert

Messaggi di stato con intento semantico. Nella v2.0.0 ogni variante e esplicitamente sotto namespace .alert-{primary,secondary,info,success,warning,error} cosi la classe della variante non puo collidere con classi di stato altrove nella pagina.

<div class="alert alert-primary" role="alert">
  <strong>Attenzione.</strong> Questo e un alert primario.
</div>
<div class="alert alert-success" role="status">
  <strong>Salvato.</strong> Le tue modifiche sono state salvate.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Cautela.</strong> Questa azione influisce sullo stato condiviso.
</div>
<div class="alert alert-error" role="alert">
  <strong>Errore.</strong> Impossibile salvare il form.
</div>
Salvato. Le tue modifiche sono state salvate.

Nota sull'accessibilita. Usa role="alert" per messaggi che richiedono attenzione immediata (errori, avvisi) e role="status" per conferme non urgenti. Entrambi espongono il messaggio alle tecnologie assistive nel momento in cui appare.

Superficie

Contenitori che incorniciano e raggruppano contenuti correlati.

Card

Un contenitore con bordo e padding per una singola unita coerente. Abbina con la griglia flex-N per creare pareti di card responsive.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Leggero</h3>
      <p>45,7 KB minificati, 8,3 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Accessibile</h3>
      <p>Conforme WCAG 2.2 fin da subito.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modulare</h3>
      <p>Cascade-layered per sovrascritture semplici.</p>
    </div>
  </article>
</section>

Leggero

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

Accessibile

WCAG 2.2 conforme fin da subito.

Modulare

Cascade-layered per sovrascritture semplici.

Nota sull'accessibilita. Avvolgi ogni card in un landmark semantico (<article>, <section>) e inizia il suo contenuto con un titolo (<h3>). Gli utenti di screen reader possono cosi navigare l'elenco delle card come regioni di primo livello.

Form

Input, label e raggruppamenti per raccogliere dati dall'utente.

Campi del form

Label, input di testo, textarea, fieldset e legend — tutti dimensionati in modo coerente con il resto del design system.

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

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

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

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

Nota sull'accessibilita. Ogni input deve avere un <label for="..."> associato programmaticamente. Raggruppa i controlli correlati all'interno di un <fieldset> con una <legend>. Contrassegna i campi obbligatori con required (e un asterisco visibile nel testo della label).

Layout

Primitive strutturali — griglia, container, header — che incorniciano l'intera pagina.

Griglia

Una griglia responsive flex-N (da 1 a 12 colonne) basata su flexbox. Il genitore .row gestisce automaticamente gap e wrapping.

<div class="row">
  <div class="flex-6">Meta</div>
  <div class="flex-6">Meta</div>
</div>
<div class="row">
  <div class="flex-4">Terzo</div>
  <div class="flex-4">Terzo</div>
  <div class="flex-4">Terzo</div>
</div>
Meta
Meta
Terzo
Terzo
Terzo

Nota sull'accessibilita. L'ordine visivo deve corrispondere all'ordine del DOM. Evita di riordinare le righe con flex-direction: row-reverse o order: — screen reader e utenti da tastiera seguono il sorgente, non la visualizzazione.

Un header completo solo CSS con toggle hamburger responsive. Zero JavaScript. Copia lo snippet qui sotto in una pagina HTML che gia carica skeletonic.min.css e il menu si comprime, si espande e gestisce il focus correttamente da solo.

<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="Attiva/disattiva navigazione">
  <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="#">Documentazione</a></li>
    <li><a href="#">Componenti</a></li>
    <li><a href="#">Informazioni</a></li>
  </ul>
</header>
Brand

Nota sull'accessibilita. La checkbox nascosta resta nell'ordine di tabulazione cosi gli utenti da tastiera possono aprire il menu con Spazio o Invio. Il <label> porta aria-hidden perche la checkbox stessa e la fonte del nome accessibile. Ridimensiona la finestra sotto i 640 px per vedere il toggle hamburger prendere il controllo.

Vedi le note complete sull'a11y → · Esplora le palette →