Lily Design System™

HTML tutoriala

Hasiera sinpleena: kopiatu HTML semantikoa Lilyren klase-gakoekin, gehitu estilo-orri bat, argitaratu. HTMLk funtzionatzen duen edonon funtzionatzen duten fitxategi soilak.

Zer eraikiko duzun

Harremanetarako formulario txiki bat — etiketadun sarrerak, bidaltze-botoia, teklatu eta pantaila-irakurgailu portaera erreala — lehenik biluzik, gero estilatuta, 10 minutu inguruan.

Hasi aurretik

Nabigatzaile bat eta testu-editore bat behar dituzu. Hori da dena. (git-ek osagai-fitxategiak lortzen laguntzen du, baina nabigatzailean GitHub-etik ere kopia ditzakezu.)

1. pausoa — Lortu kodea

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

Osagai bakoitza fitxategi autonomoa da hemen: components/ — button.html, text-input.html, eta abar — goiburuko iruzkin batekin, bere HTML etiketa, klase-gakoa, teklatu-portaera eta irisgarritasun-kontratua dokumentatzen dituena. Fitxategiak dira liburutegia — kopiatu behar duzuna eta aurrera.

2. pausoa — Zure lehen osagaia

Ireki components/button.html, edo idatzi markaketa — klase-gakoa da kontratua:

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

Benetako <button>delako, teklatu-fokua, Enter eta Space bidezko aktibazioa eta botoi-rol inplizitua zuzenak dira jada.

3. pausoa — Osatu formulario txiki bat

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

Ohartu patroiaz: kontrol bakoitzak bere <label for>lotzen du, sarrera-mota zehatzena erabiltzen du eta kebab-case klase-gako bakar bat darama.

Egiaztatu zure lana: ireki orria nabigatzaile batean. Soila ageri da — hain zuzen nahi bezala: estiloa oraindik aurrean dago. Sakatu Tab: fokua kontrol guztietatik pasatzen da, etiketak iragartzen dira eta bidalketak funtzionatzen du. Portaera prest dago; itxura zurea da eta hurrengoa da.

4. pausoa — Estilatu

Idatzi CSSa gakoen kontra:

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

Edo saltatu CSSa eskuz idaztea osorik — lotu prest dauden 45 gaietako bat eta markaketa bera argitzen da: 

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

5. pausoa — Esploratu gehiago

  • Biltegiko probak benetako nabigatzaileetan exekutatzen dira: pnpm install && pnpm test (WebDriverIO).
  • Storybook osagai bakoitzeko: pnpm run storybook.
  • HTML+CSS+JS adibide-aplikazioak 571 osagaiak erakusten ditu estilatuta, bilagarri eta demostratuta.

Hurrengo pausoak

Galderarik bidean? laguntza-orriak erantzunez beteta dago — eta pauso bat argiagoa izan badaiteke, esan iezaguzu eta pozik hobetuko dugu tutoriala.