Lily Design System™

HTML-handleiding

De eenvoudigst denkbare start: kopieer semantische HTML met Lily's klassehaken, voeg één stylesheet toe, publiceer. Gewone bestanden die overal werken waar HTML werkt.

Wat je gaat bouwen

Een klein contactformulier — invoervelden met labels, een verzendknop, echt toetsenbord- en schermlezergedrag — eerst kaal, dan vormgegeven, in ongeveer 10 minuten.

Voordat je begint

Je hebt een browser en een teksteditor nodig. Meer niet. (git helpt om de componentbestanden op te halen, maar je kunt ze ook in de browser vanaf GitHub kopiëren.)

Stap 1 — Haal de code op

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

Elke component is een los bestand in components/ — button.html, text-input.html, enzovoort — met een kopcommentaar dat zijn HTML-tag, klassehaak, toetsenbordgedrag en toegankelijkheidscontract documenteert. De bestanden zijn de bibliotheek — kopieer wat je nodig hebt en ga.

Stap 2 — Je eerste component

Open components/button.html, of schrijf gewoon de markup — de klassehaak is het contract:

<button class="button" type="button">
  Save
</button>

Omdat het een echte <button>is, kloppen toetsenbordfocus, activering met Enter en Spatie en de impliciete knoprol al.

Stap 3 — Stel een klein formulier samen

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

Let op het patroon: elk bedieningselement koppelt zijn <label for>, gebruikt het meest specifieke invoertype en draagt precies één klassehaak in kebab-case.

Controleer je werk: open de pagina in een browser. Hij ziet er kaal uit — precies zoals bedoeld: de vormgeving komt nog. Druk op Tab: de focus beweegt door elk bedieningselement, de labels worden voorgelezen en verzenden werkt. Het gedrag is klaar; het uiterlijk is aan jou en komt hierna.

Stap 4 — Geef het vorm

Schrijf CSS tegen de haken:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

Of sla het met de hand schrijven van CSS helemaal over — koppel een van de 45 kant-en-klare thema's en dezelfde markup licht op: 

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

Stap 5 — Verken verder

  • De tests van de repo draaien in echte browsers: pnpm install && pnpm test (WebDriverIO).
  • Storybook voor elke component: pnpm run storybook.
  • HTML+CSS+JS voorbeeld-app toont alle 571 componenten vormgegeven, doorzoekbaar en gedemonstreerd.

Volgende stappen

Vragen onderweg? De helppagina staat vol antwoorden — en als een stap duidelijker kan, laat het ons weten en we verbeteren de handleiding graag.