Руководство по HTML

Что вы построите

Небольшая контактная форма — поля с метками, кнопка отправки, реальное поведение клавиатуры и программы чтения с экрана — сначала голая, затем оформленная, примерно за 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 и Пробел и неявная роль кнопки уже правильны.

Шаг 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>, использует самый специфичный тип input и несёт ровно один крючок класса в 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.
Помощники настроек — язык и размер текста.
Каталог компонентов — полный справочник.

Есть вопросы по ходу дела? Страница справки полна ответов — а если какой-то шаг можно сделать яснее, сообщите нам и мы с радостью улучшим руководство.