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

Elk voorbeeld hieronder wordt weergegeven met hetzelfde stylesheet dat wordt gedemonstreerd. Geen preprocessor. Geen JavaScript. Geen extra afhankelijkheden. Kopieer elk fragment in een nieuw HTML-bestand en het werkt.

Invoer

Interactieve elementen waarop de bezoeker klikt, tikt of focust om de pagina aan te sturen.

Knoppen

Een semantische, thematiseerbare actietrigger. Gevulde en omlijning-varianten leveren elk zes merkkleuren.

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

Primary Secondary Tertiary

Omlijning-varianten:

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

Omlijning Omlijning

Toegankelijkheidsnoot. Elke .button-variant wordt geleverd met een :focus-visible-ring en een minimaal raakgebied van 24×24 px (WCAG 2.2 SC 2.5.8). Gebruik <button type="button"> voor acties op de pagina en <a href> alleen voor navigatie.

Badges

Een compact label voor status, telling of categorie. Tekstgrootte is vast zodat badges uitlijnen met omringende tekst.

<span class="badge">Standaard</span>
<span class="badge primary">Primary</span>
<span class="badge success">Succes</span>
<span class="badge warning">Waarschuwing</span>
<span class="badge danger">Gevaar</span>

Standaard Primary Succes Waarschuwing Gevaar

Toegankelijkheidsnoot. Badges zijn standaard decoratief. Wanneer de badge het enige signaal draagt (bijv. een ongelezen telling), wikkel het in een visueel verborgen helper: <span class="visually-hidden">3 ongelezen berichten</span>.

Feedback

Oppervlakken die de bezoeker vertellen dat er iets is gebeurd — of gaat gebeuren.

Meldingen

Statusberichten met semantische intentie. In v2.0.0 is elke variant expliciet genaamd onder .alert-{primary,secondary,info,success,warning,error} zodat de variantklasse niet kan botsen met statusklassen elders op de pagina.

<div class="alert alert-primary" role="alert">
  <strong>Let op.</strong> Dit is een primaire melding.
</div>
<div class="alert alert-success" role="status">
  <strong>Opgeslagen.</strong> Je wijzigingen zijn bewaard.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Voorzichtig.</strong> Deze actie raakt gedeelde status.
</div>
<div class="alert alert-error" role="alert">
  <strong>Fout.</strong> Het formulier kon niet worden opgeslagen.
</div>
Opgeslagen. Je wijzigingen zijn bewaard.

Toegankelijkheidsnoot. Gebruik role="alert" voor berichten die onmiddellijke aandacht vereisen (fouten, waarschuwingen) en role="status" voor niet-urgente bevestigingen. Beide stellen het bericht beschikbaar voor hulptechnologie op het moment dat het verschijnt.

Oppervlak

Containers die gerelateerde inhoud inkaderen en groeperen.

Kaarten

Een omrande, opgevulde container voor een enkele samenhangende eenheid. Combineer met het flex-N-grid voor responsieve kaartwanden.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Lichtgewicht</h3>
      <p>45,7 KB geminificeerd, 8,3 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Toegankelijk</h3>
      <p>WCAG 2.2 conform uit de doos.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modulair</h3>
      <p>Cascade-layered voor eenvoudige overschrijvingen.</p>
    </div>
  </article>
</section>

Lichtgewicht

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

Toegankelijk

WCAG 2.2 conform uit de doos.

Modulair

Cascade-layered voor eenvoudige overschrijvingen.

Toegankelijkheidsnoot. Wikkel elke kaart in een semantische landmark (<article>, <section>) en begin de inhoud met een kop (<h3>). Schermlezergebruikers kunnen dan de kaartenlijst doorkruisen als navigeerbare regio's van eerste klasse.

Formulieren

Invoervelden, labels en groeperingen voor het verzamelen van gebruikersgegevens.

Formuliervelden

Labels, tekstinvoervelden, textarea's, fieldsets en legends — allemaal consistent in grootte met de rest van het ontwerpsysteem.

<form>
  <label for="name">Naam</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">Bericht</label>
  <textarea id="msg" rows="4"></textarea>

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

Toegankelijkheidsnoot. Elk invoerveld moet een programmatisch gekoppeld <label for="…"> hebben. Groepeer gerelateerde besturingselementen in een <fieldset> met een <legend>. Markeer verplichte velden met required (en een zichtbaar sterretje in de labeltekst).

Layout

Structurele bouwstenen — grid, container, header — die de hele pagina inkaderen.

Grid

Een responsief flex-N-grid (1 → 12 kolommen) gebouwd op flexbox. De .row-ouder biedt automatisch tussenruimte en omloop.

<div class="row">
  <div class="flex-6">Helft</div>
  <div class="flex-6">Helft</div>
</div>
<div class="row">
  <div class="flex-4">Derde</div>
  <div class="flex-4">Derde</div>
  <div class="flex-4">Derde</div>
</div>
Helft
Helft
Derde
Derde
Derde

Toegankelijkheidsnoot. Visuele volgorde moet overeenkomen met DOM-volgorde. Vermijd het herschikken van rijen met flex-direction: row-reverse of order: — schermlezers en toetsenbordgebruikers volgen de broncode, niet de weergave.

Een complete CSS-only header met een responsieve hamburgerschakelaar. Geen JavaScript. Kopieer het onderstaande fragment in een nieuw HTML-bestand dat al skeletonic.min.css laadt en het menu klapt in, klapt uit en vangt focus correct op uit zichzelf.

<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="#">Merk</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Navigatie in-/uitklappen">
  <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="#">Documentatie</a></li>
    <li><a href="#">Componenten</a></li>
    <li><a href="#">Over ons</a></li>
  </ul>
</header>
Merk

Toegankelijkheidsnoot. Het verborgen selectievakje blijft in de tabvolgorde zodat toetsenbordgebruikers het menu kunnen openen met Space of Enter. Het <label> draagt aria-hidden omdat het selectievakje zelf de toegankelijke naambron is. Verklein het venster onder 640 px om de hamburgerschakelaar te zien overnemen.

Bekijk volledige a11y-notities → · Bekijk paletten →