Посібник з HTML — Lily Design System

Що ви створите

Невелика контактна форма — поля з мітками, кнопка надсилання, справжня поведінка клавіатури та зчитувача екрана — спочатку «гола», потім стилізована, приблизно за 10 хвилин.

Перш ніж почати

Вам потрібні браузер і текстовий редактор. Це все. (git допомагає забрати файли компонентів, але ви можете скопіювати їх із GitHub прямо в браузері.)

Крок 1 — Отримайте код

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

Кожен компонент — окремий самодостатній файл у components/ — button.html, text-input.htmlі так далі — із коментарем-заголовком, що документує його тег HTML, клас-гачок, поведінку клавіатури та контракт доступності. Файли це і є бібліотека — копіюйте потрібне й рушайте.

Крок 2 — Ваш перший компонент

Відкрийте components/button.htmlабо просто напишіть розмітку — клас-гачок і є контрактом:

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

Оскільки це справжній <button>, фокус клавіатури, активація Enter і Space та неявна роль кнопки вже коректні.

Крок 3 — Складіть невелику форму

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

Зверніть увагу на шаблон: кожен елемент керування пов’язує свій <label for>, використовує найточніший тип поля й має рівно один клас-гачок kebab-case.

Перевірте свою роботу: відкрийте сторінку в браузері. Вона виглядає простою, саме як і задумано: стилізація ще попереду. Натисніть Tab: фокус проходить через кожен елемент керування, мітки озвучуються, а надсилання працює. Поведінка готова; вигляд — ваш, і він наступний.

Крок 4 — Стилізуйте

Напишіть CSS для гачків:

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

Або взагалі не пишіть CSS вручну — підключіть одну з 45 готових тем, і та сама розмітка оживе:

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

Крок 5 — Досліджуйте далі

Тести репозиторію запускаються в справжніх браузерах: pnpm install && pnpm test (WebDriverIO).
Storybook для кожного компонента: pnpm run storybook.
Приклад застосунку HTML+CSS+JS показує всі 571 компонентів стилізованими, з пошуком і демонстраціями.

Наступні кроки

Теми — перемикання теми під час виконання за допомогою theme-picker.
Допоміжні засоби налаштувань — мова та розмір тексту.
Каталог компонентів — повний довідник.

Питання по дорозі? сторінка допомоги повна відповідей — а якщо якийсь крок може бути зрозумілішим, повідомте нам і ми із задоволенням покращимо посібник.