HTML-i õpetus — Lily Design System

Mida sa ehitad

Väike kontaktivorm — sildiga väljad, saatmisnupp, tõeline klaviatuuri- ja ekraanilugeja käitumine — esmalt paljas, seejärel kujundatud, umbes 10 minutiga.

Enne alustamist

Vaja on brauserit ja tekstiredaktorit. Ongi kõik. (git aitab komponentfaile kätte saada, aga neid saab brauseris ka GitHubist kopeerida.)

Samm 1 — Hangi kood

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

Iga komponent on eraldiseisev fail kaustas components/ — button.html, text-input.htmlja nii edasi — päisekommentaariga, mis dokumenteerib selle HTML-sildi, klassikonksu, klaviatuurikäitumise ja ligipääsetavuse lepingu. Failid on teek — kopeeri, mida vajad, ja mine.

Samm 2 — Sinu esimene komponent

Ava components/button.htmlvõi kirjuta lihtsalt märgistus — klassikonks on leping:

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

Kuna see on päris <button>, on klaviatuurifookus, aktiveerimine Enteri ja tühikuga ning kaudne nupurolli õige juba olemas.

Samm 3 — Kombineeri väike vorm

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

Pane tähele mustrit: iga juhtelement seob oma <label for>, kasutab kõige täpsemat sisendi tüüpi ja kannab täpselt ühte kebab-case klassikonksu.

Kontrolli oma tööd: ava leht brauseris. See paistab paljas — täpselt nagu ette nähtud: kujundamine on alles ees. Vajuta Tab: fookus liigub läbi iga juhtelemendi, sildid kuulutatakse ette ja saatmine töötab. Käitumine on valmis; välimus on sinu ja järgmine samm.

Samm 4 — Kujunda see

Kirjuta CSS konksude vastu:

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

Või jäta CSS-i käsitsi kirjutamine üldse vahele — lingi üks 45 valmis teemast ja sama märgistus süttib:

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

Samm 5 — Uuri edasi

Repo testid jooksevad päris brauserites: pnpm install && pnpm test (WebDriverIO).
Storybook igale komponendile: pnpm run storybook.
HTML+CSS+JS näiterakendus näitab kõiki 571 komponenti kujundatuna, otsitavana ja demonstreeritult.

Järgmised sammud

Teemad — teema vahetamine töö ajal theme-pickeriga.
Eelistuste abilised — keel ja teksti suurus.
Komponentide kataloog — täielik viide.

Küsimusi teel? Abileht on täis vastuseid — ja kui mõni samm saaks olla selgem, anna meile teada ja me parandame õpetust hea meelega.