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

Cada ejemplo a continuacion se renderiza con la misma hoja de estilos que se demuestra. Sin preprocesador. Sin JavaScript. Sin dependencias adicionales. Copia cualquier fragmento en un archivo HTML nuevo y funciona.

Entradas

Elementos interactivos que el visitante clica, toca o enfoca para controlar la pagina.

Botones

Un disparador de accion semantico y personalizable. Las variantes solidas y outline incluyen seis colores de marca cada una.

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

Primary Secondary Tertiary

Variantes outline:

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

Outline Outline

Nota de accesibilidad. Cada variante .button incluye un anillo :focus-visible y un area de toque minima de 44x44 px (WCAG 2.2 SC 2.5.8). Usa <button type="button"> para acciones en la pagina y <a href> solo para navegacion.

Insignias

Una etiqueta compacta para estado, conteo o categoria. El tamano de texto es fijo para que las insignias se alineen con el texto circundante.

<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 de accesibilidad. Las insignias son decorativas por defecto. Cuando la insignia es la unica senal (por ejemplo, un conteo de no leidos), envuelvela en un helper visualmente oculto: <span class="visually-hidden">3 mensajes sin leer</span>.

Retroalimentacion

Superficies que informan al visitante de que algo ocurrio — o esta a punto de ocurrir.

Alertas

Mensajes de estado con intencion semantica. En v2.0.0 cada variante esta explicitamente bajo el espacio de nombres .alert-{primary,secondary,info,success,warning,error} para que la clase de variante no colisione con clases de estado en otras partes de la pagina.

<div class="alert alert-primary" role="alert">
  <strong>Atencion.</strong> Esta es una alerta primaria.
</div>
<div class="alert alert-success" role="status">
  <strong>Guardado.</strong> Tus cambios se han conservado.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Cuidado.</strong> Esta accion afecta al estado compartido.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error.</strong> No se pudo guardar el formulario.
</div>
Guardado. Tus cambios se han conservado.

Nota de accesibilidad. Usa role="alert" para mensajes que requieren atencion inmediata (errores, advertencias) y role="status" para confirmaciones no urgentes. Ambos exponen el mensaje a la tecnologia asistiva en el momento en que aparece.

Superficie

Contenedores que enmarcan y agrupan contenido relacionado.

Tarjetas

Un contenedor con borde y padding para una unidad coherente. Combina con la cuadricula flex-N para muros de tarjetas responsivos.

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

Ligero

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

Accesible

Conforme con WCAG 2.2 desde el primer momento.

Modular

Organizado en capas de cascada para sobrescrituras sencillas.

Nota de accesibilidad. Envuelve cada tarjeta en un landmark semantico (<article>, <section>) y comienza su contenido con un encabezado (<h3>). Los usuarios de lectores de pantalla podran recorrer la lista de tarjetas como regiones navegables de primera clase.

Formularios

Entradas, etiquetas y agrupaciones para recopilar datos del usuario.

Campos de formulario

Etiquetas, campos de texto, textareas, fieldsets y legends — todo dimensionado de forma consistente con el resto del sistema de diseno.

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

Nota de accesibilidad. Cada input debe tener un <label for="…"> asociado programaticamente. Agrupa controles relacionados dentro de un <fieldset> con un <legend>. Marca los campos obligatorios con required (y un asterisco visible en el texto de la etiqueta).

Layout

Primitivas estructurales — cuadricula, contenedor, encabezado — que enmarcan toda la pagina.

Cuadricula

Una cuadricula responsiva flex-N (1 → 12 columnas) construida con flexbox. El padre .row gestiona espaciado y ajuste automaticamente.

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

Nota de accesibilidad. El orden visual debe coincidir con el orden del DOM. Evita reordenar filas con flex-direction: row-reverse u order: — los lectores de pantalla y los usuarios de teclado siguen el codigo fuente, no la representacion visual.

Un encabezado completo solo con CSS con un toggle hamburguesa responsivo. Cero JavaScript. Copia el fragmento a continuacion en una pagina HTML nueva que ya cargue skeletonic.min.css y el menu se contrae, expande y gestiona el foco correctamente por si 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="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>
Brand

Nota de accesibilidad. El checkbox oculto permanece en el orden de tabulacion para que los usuarios de teclado puedan abrir el menu con Espacio o Enter. El <label> lleva aria-hidden porque el checkbox en si es la fuente del nombre accesible. Reduce el tamano de la ventana por debajo de 640 px para ver el toggle hamburguesa en accion.

Ver notas completas de a11y → · Explorar paletas →