HTML-handledning — Lily Design System

Det här bygger du

Ett litet kontaktformulär — fält med etiketter, en skicka-knapp, verkligt tangentbords- och skärmläsarbeteende — först naket, sedan formgivet, på ungefär 10 minuter.

Innan du börjar

Du behöver en webbläsare och en textredigerare. Det är allt. (git hjälper till att hämta komponentfilerna, men du kan också kopiera dem från GitHub i webbläsaren.)

Steg 1 — Hämta koden

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

Varje komponent är en fristående fil i components/ — button.html, text-input.html, och så vidare — med en huvudkommentar som dokumenterar dess HTML-tagg, klasskrok, tangentbordsbeteende och tillgänglighetskontrakt. Filerna är biblioteket — kopiera det du behöver och kör.

Steg 2 — Din första komponent

Öppna components/button.html, eller skriv bara markupen — klasskroken är kontraktet:

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

Eftersom det är ett riktigt <button>är tangentbordsfokus, aktivering med Enter och Mellanslag och den underförstådda knappens roll redan korrekta.

Steg 3 — Sätt ihop ett litet formulär

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

Lägg märke till mönstret: varje kontroll länkar sin <label for>, använder den mest specifika indatatypen och bär exakt en klasskrok i kebab-case.

Kontrollera ditt arbete: öppna sidan i en webbläsare. Den ser kargt ut — precis som tänkt: formgivningen återstår. Tryck på Tab: fokus flyttas genom varje kontroll, etiketterna läses upp och inskickning fungerar. Beteendet är klart; utseendet är ditt och kommer härnäst.

Steg 4 — Formge det

Skriv CSS mot krokarna:

.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; }

Eller hoppa över att skriva CSS för hand helt — länka ett av de 45 färdiga temana så lyser samma markup upp:

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

Steg 5 — Utforska vidare

Förvarets tester körs i riktiga webbläsare: pnpm install && pnpm test (WebDriverIO).
Storybook för varje komponent: pnpm run storybook.
Exempelappen HTML+CSS+JS visar alla 571 komponenter formgivna, sökbara och demonstrerade.

Nästa steg

Teman — temabyte under körning med theme-picker.
Inställningshjälpare — språk och textstorlek.
Komponentkatalog — den fullständiga referensen.

Frågor på vägen? Hjälpsidan är full av svar — och om ett steg kan bli tydligare, berätta för oss så förbättrar vi gärna handledningen.