Samouczek HTML — Lily Design System

Co zbudujesz

Mały formularz kontaktowy — pola z etykietami, przycisk wysyłania, prawdziwe działanie klawiatury i czytnika ekranu — najpierw surowy, potem ostylowany, w około 10 minut.

Zanim zaczniesz

Potrzebujesz przeglądarki i edytora tekstu. To wszystko. (git pomaga pobrać pliki komponentów, ale możesz je też skopiować z GitHuba w przeglądarce.)

Krok 1 — Pobierz kod

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

Każdy komponent to samodzielny plik w components/ — button.html, text-input.htmli tak dalej — z komentarzem nagłówkowym dokumentującym jego znacznik HTML, haczyk klasy, działanie klawiatury i kontrakt dostępności. Pliki są biblioteką — skopiuj, co potrzebujesz, i jedź.

Krok 2 — Twój pierwszy komponent

Otwórz components/button.htmllub po prostu napisz znacznik — haczyk klasy jest kontraktem:

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

Ponieważ to prawdziwy <button>, fokus klawiatury, aktywacja klawiszami Enter i Spacja oraz niejawna rola przycisku są już poprawne.

Krok 3 — Złóż mały formularz

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

Zwróć uwagę na wzorzec: każda kontrolka łączy swój <label for>, używa najbardziej szczegółowego typu input i niesie dokładnie jeden haczyk klasy w kebab-case.

Sprawdź swoją pracę: otwórz stronę w przeglądarce. Wygląda surowo — dokładnie tak, jak zamierzono: stylowanie jest jeszcze przed nami. Naciśnij Tab: fokus przechodzi przez każdą kontrolkę, etykiety są odczytywane, a wysyłanie działa. Zachowanie jest gotowe; wygląd należy do ciebie i jest następnym krokiem.

Krok 4 — Ostyluj go

Napisz CSS względem haczyków:

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

Albo w ogóle pomiń ręczne pisanie CSS — podlinkuj jeden z 45 gotowych motywów, a ten sam znacznik się rozjaśni:

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

Krok 5 — Poznawaj dalej

Testy repozytorium działają w prawdziwych przeglądarkach: pnpm install && pnpm test (WebDriverIO).
Storybook dla każdego komponentu: pnpm run storybook.
Aplikacja przykładowa HTML+CSS+JS pokazuje wszystkie 571 komponentów ostylowane, przeszukiwalne i zademonstrowane.

Następne kroki

Motywy — przełączanie motywu w czasie działania przez theme-picker.
Pomocniki preferencji — język i rozmiar tekstu.
Katalog komponentów — pełna dokumentacja.

Pytania po drodze? Strona pomocy jest pełna odpowiedzi — a jeśli jakiś krok mógłby być jaśniejszy, daj nam znać a chętnie ulepszymy samouczek.