HTML tutorial — Lily Design System

Whit ye'll big

A wee contact form — labelled inputs, a submit button, real keyboard an screen-reader behaviour — first bare, then styled, in aboot 10 minutes.

Afore ye stairt

Ye need a browser an a text editor. That's aw. (git helps for grabbin the component files, but ye can copy them frae GitHub in the browser tae.)

Step 1 — Git the code

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

Ilka component is a standalane file in components/ — button.html, text-input.html, an sae on — wi a header comment documentin its HTML tag, class hook, keyboard behaviour, an accessibility contract. The files are the library — copy whit ye need an gang.

Step 2 — Yer first component

Open components/button.html, or juist write the markup — the class hook is the contract:

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

Because it's a real <button>, keyboard focus, Enter an Space activation, an the implicit button role are aareadies correct.

Step 3 — Compose a wee 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>

Note the pattern: ilka control links its <label for>, uises the maist specific input type, an cairries exactly ae kebab-case class hook.

Check yer wirk: open the page in a browser. It looks plain — exactly as intendit: styling is still aheid. Press Tab: focus muives through ilka control, the labels are announced, an submit wirks. The behaviour is deen; the look is yours, an it's neist.

Step 4 — Style it

Write CSS against the 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 scrievin CSS bi haund entirely — link ane o the 45 ready-made themes an the same markup lichts up:

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

Step 5 — Explore further

The repo's tests rin real browsers: pnpm install && pnpm test (WebDriverIO).
Storybook for ilka component: pnpm run storybook.
The HTML+CSS+JS example app shaws aw 571 components styled, searchable, an demoed.

Neist steps

Theming — runtime theme switchin wi theme-picker.
Preference helpers — leid an text size.
Component catalog — the full reference.

Questions alang the wey? The help page is fu o answers — an if a step could be clearer, tell us an we'll gladly improve the tutorial.