Lily Design System™

Vodič za HTML

Najjednostavniji mogući početak: kopirajte semantički HTML s Lilynim klasnim kukama, dodajte jednu stilsku tablicu, objavite. Obične datoteke koje rade svugdje gdje radi HTML.

Što ćete izraditi

Mali kontaktni obrazac — polja s oznakama, gumb za slanje, stvarno ponašanje tipkovnice i čitača zaslona — najprije golo, zatim stilizirano, za otprilike 10 minuta.

Prije nego počnete

Trebaju vam preglednik i uređivač teksta. To je sve. (git pomaže pri dohvaćanju datoteka komponenti, ali ih možete kopirati i s GitHuba u pregledniku.)

Korak 1 — Preuzmite kod

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

Svaka komponenta je samostalna datoteka u components/ — button.html, text-input.htmli tako dalje — sa zaglavnim komentarom koji dokumentira njezinu HTML oznaku, klasnu kuku, ponašanje tipkovnice i ugovor o pristupačnosti. Datoteke jesu biblioteka — kopirajte što trebate i krenite.

Korak 2 — Vaša prva komponenta

Otvorite components/button.html, ili jednostavno napišite oznaku — klasna kuka je ugovor:

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

Budući da je to stvarni <button>, fokus tipkovnice, aktivacija tipkama Enter i Space te implicitna uloga gumba već su ispravni.

Korak 3 — Sastavite mali obrazac

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

Uočite uzorak: svaka kontrola povezuje svoj <label for>, koristi najspecifičniji tip inputa i nosi točno jednu klasnu kuku u kebab-caseu.

Provjerite svoj rad: otvorite stranicu u pregledniku. Izgleda golo — točno kako je zamišljeno: stiliziranje tek slijedi. Pritisnite Tab: fokus prolazi kroz svaku kontrolu, oznake se izgovaraju i slanje radi. Ponašanje je gotovo; izgled je vaš i sljedeći je korak.

Korak 4 — Stilizirajte ga

Napišite CSS prema kukama:

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

Ili potpuno preskočite ručno pisanje CSS-a — povežite jednu od 45 gotovih tema i ista oznaka zasja: 

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

Korak 5 — Istražite dalje

  • Testovi repozitorija izvode se u stvarnim preglednicima: pnpm install && pnpm test (WebDriverIO).
  • Storybook za svaku komponentu: pnpm run storybook.
  • Primjer aplikacija HTML+CSS+JS prikazuje svih 571 komponentu stiliziranih, pretraživih i demonstriranih.

Sljedeći koraci

Pitanja usput? Stranica pomoći puna je odgovora — a ako neki korak može biti jasniji, javite nam i rado ćemo poboljšati vodič.