Mafunzo ya HTML — Lily Design System

Utakachojenga

Fomu ndogo ya mawasiliano — pembejeo zenye lebo, kitufe cha kutuma, tabia halisi ya kibodi na kisomaji skrini — kwanza bila mapambo, kisha ikiwa na mapambo, kwa takriban dakika 10.

Kabla ya kuanza

Unahitaji kivinjari na kihariri cha maandishi. Hilo tu. (git husaidia kupata faili za vipengele, lakini unaweza kuzinakili kutoka GitHub kwenye kivinjari pia.)

Hatua ya 1 — Pata msimbo

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

Kila kipengele ni faili huru katika components/ — button.html, text-input.html, na kadhalika — chenye maoni ya kichwa yanayoeleza tagi yake ya HTML, kishikio cha darasa, tabia ya kibodi, na mkataba wa ufikivu. Faili hizo ndizo maktaba — nakili unachohitaji na uende.

Hatua ya 2 — Kipengele chako cha kwanza

Fungua components/button.html, au andika tu alama — kishikio cha darasa ndicho mkataba:

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

Kwa sababu ni <button>halisi, umakini wa kibodi, uanzishaji kwa Enter na Space, na jukumu la kitufe lisilo wazi tayari ni sahihi.

Hatua ya 3 — Unda fomu ndogo

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

Zingatia mchoro huu: kila kidhibiti huunganisha <label for>yake, hutumia aina mahususi zaidi ya input, na hubeba kishikio kimoja tu cha darasa la herufi ndogo zilizotenganishwa kwa kistari.

Hakiki kazi yako: fungua ukurasa kwenye kivinjari. Unaonekana wa kawaida — kama ilivyokusudiwa: mapambo bado yanakuja. Bonyeza Tab: umakini husogea kwenye kila kidhibiti, lebo zinatangazwa, na kutuma kunafanya kazi. Tabia imekamilika; mwonekano ni wako, na ndio unaofuata.

Hatua ya 4 — Ipambe

Andika CSS dhidi ya vishikio:

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

Au ruka kuandika CSS kwa mkono kabisa — unganisha mojawapo ya mandhari 45 yaliyo tayari na alama zilezile zinawaka:

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

Hatua ya 5 — Chunguza zaidi

Majaribio ya hifadhi hii huendeshwa kwenye vivinjari halisi: pnpm install && pnpm test (WebDriverIO).
Storybook kwa kila kipengele: pnpm run storybook.
Programu ya mifano ya HTML+CSS+JS inaonyesha vipengele vyote 571 vikiwa na mapambo, vinavyotafutika, na vyenye maonyesho.

Hatua zinazofuata

Mandhari — kubadili mandhari wakati wa utekelezaji kwa theme-picker.
Visaidizi vya mapendeleo — lugha na ukubwa wa maandishi.
Orodha ya vipengele — marejeo kamili.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.