Ръководство за 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 и 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>, използва най-конкретния тип 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.
Помощници за предпочитания — език и размер на текста.
Каталог на компонентите — пълната справка.

Въпроси по пътя? Страницата за помощ е пълна с отговори — а ако някоя стъпка може да е по-ясна, кажете ни и с радост ще подобрим ръководството.