HTML tutorial — Lily Design System

Wetin you go build

Small contact form — inputs wey get labels, submit button, real keyboard and screen-reader behaviour — first bare, then styled, for about 10 minutes.

Before you start

You need browser and text editor. Na all. (git dey help to grab di component files, but you fit copy dem from GitHub for browser too.)

Step 1 — Get di code

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

Every component na standalone file inside components/ — button.html, text-input.html, and so on — with header comment wey document im HTML tag, class hook, keyboard behaviour, and accessibility contract. Di files na di library — copy wetin you need and go.

Step 2 — Your first component

Open components/button.html, or just write di markup — di class hook na di contract:

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

Because na real <button>, keyboard focus, Enter and Space activation, and di implicit button role don already correct.

Step 3 — Compose small form

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

Notice di pattern: every control dey link im <label for>, dey use di most specific input type, and dey carry exactly one kebab-case class hook.

Check your work: open di page for browser. E look plain — exactly as dem plan am: di styling still dey come. Press Tab: focus go move through every control, di labels go dey announced, and submit dey work. Di behaviour don finish; di look na yours and e be next.

Step 4 — Style am

Write CSS against di hooks:

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

Or skip to write CSS by hand completely — link one of di 45 ready-made themes and di same markup go light up:

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

Step 5 — Explore further

Di repo tests dey run for real browsers: pnpm install && pnpm test (WebDriverIO).
Storybook for every component: pnpm run storybook.
Di HTML+CSS+JS example app show all 571 components styled, searchable, and demoed.

Next steps

Theming — runtime theme switching with theme-picker.
Preference helpers — language and text size.
Component catalog — di full reference.

You get questions as you dey go? Di help page full of answers — and if any step fit clearer, tell us and we go gladly improve di tutorial.