HTML-opas — Lily Design System

Mitä rakennat

Pieni yhteydenottolomake — nimiöityjä kenttiä, lähetyspainike, aito näppäimistö- ja ruudunlukijakäyttäytyminen — ensin paljaana, sitten tyylitellen, noin 10 minuutissa.

Ennen kuin aloitat

Tarvitset selaimen ja tekstieditorin. Siinä kaikki. (git helpottaa komponenttitiedostojen hakemista, mutta voit kopioida ne myös GitHubista selaimessa.)

Vaihe 1 — Hae koodi

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

Jokainen komponentti on itsenäinen tiedosto hakemistossa components/ — button.html, text-input.htmlja niin edelleen — otsikkokommentilla, joka dokumentoi sen HTML-tagin, luokkakoukun, näppäimistökäyttäytymisen ja saavutettavuussopimuksen. Tiedostot ovat kirjasto — kopioi tarvitsemasi ja aloita.

Vaihe 2 — Ensimmäinen komponenttisi

Avaa components/button.htmltai kirjoita vain merkintä — luokkakoukku on sopimus:

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

Koska se on aito <button>, näppäimistökohdistus, aktivointi Enterillä ja välilyönnillä sekä implisiittinen painikeroolit ovat jo oikein.

Vaihe 3 — Kokoa pieni lomake

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

Huomaa malli: jokainen ohjain linkittää oman <label for>-elementtinsä, käyttää tarkinta syöttötyyppiä ja kantaa täsmälleen yhtä kebab-case-luokkakoukkua.

Tarkista työsi: avaa sivu selaimessa. Se näyttää paljaalta — juuri niin kuin on tarkoitus: tyylittely on vielä edessä. Paina Tab: kohdistus liikkuu jokaisen ohjaimen läpi, nimiöt ilmoitetaan ja lähettäminen toimii. Toiminta on valmis; ulkoasu on sinun ja seuraava vaihe.

Vaihe 4 — Tyylittele se

Kirjoita CSS koukkuja vasten:

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

Tai ohita CSS:n käsin kirjoittaminen kokonaan — linkitä yksi 45 valmiista teemasta, ja sama merkintä syttyy:

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

Vaihe 5 — Tutki lisää

Repon testit ajetaan oikeilla selaimilla: pnpm install && pnpm test (WebDriverIO).
Storybook jokaiselle komponentille: pnpm run storybook.
HTML+CSS+JS-esimerkkisovellus näyttää kaikki 571 komponenttia tyyliteltyinä, haettavina ja esiteltyinä.

Seuraavat askeleet

Teemat — teeman vaihto ajon aikana theme-pickerillä.
Asetusapuvälineet — kieli ja tekstikoko.
Komponenttiluettelo — täysi viite.

Kysymyksiä matkan varrella? Ohjesivu on täynnä vastauksia — ja jos jokin vaihe voisi olla selkeämpi, kerro meille ja parannamme opasta mielellämme.