Lily Design System™

Tutorja tal-HTML

L-iktar bidu sempliċi possibbli: ikkopja HTML semantiku bil-ganċijiet tal-klassi ta' Lily, żid stylesheet wieħed, ippubblika. Fajls sempliċi li jaħdmu kullimkien fejn jaħdem l-HTML.

X'se tibni

Formola żgħira ta' kuntatt — oqsma b'tikketti, buttuna biex tibgħat, mġiba vera tat-tastiera u tal-qarrej tal-iskrin — l-ewwel għarwiena, imbagħad bi stil, f'madwar 10 minuti.

Qabel ma tibda

Għandek bżonn browser u editur tat-test. Dak huwa kollox. (git jgħin biex tikseb il-fajls tal-komponenti, imma tista' tikkopjahom ukoll minn GitHub fil-browser.)

Pass 1 — Ġib il-kodiċi

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

Kull komponent huwa fajl indipendenti fi components/ — button.html, text-input.htmlu hekk għall-quddiem — b'kummentarju fil-header li jiddokumenta t-tag HTML tiegħu, il-ganċ tal-klassi, il-mġiba tat-tastiera u l-kuntratt tal-aċċessibbiltà. Il-fajls huma il-librerija — ikkopja dak li għandek bżonn u mur.

Pass 2 — L-ewwel komponent tiegħek

Iftaħ components/button.html, jew sempliċement ikteb il-markup — il-ganċ tal-klassi huwa l-kuntratt:

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

Peress li huwa <button>veru, il-focus tat-tastiera, l-attivazzjoni b'Enter u Space u r-rwol impliċitu tal-buttuna diġà huma korretti.

Pass 3 — Ikkomponi formola żgħira

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

Innota l-mudell: kull kontroll jorbot <label for>tiegħu, juża l-iktar tip speċifiku ta' input u jġorr ganċ tal-klassi kebab-case wieħed biss.

Iċċekkja x-xogħol tiegħek: iftaħ il-paġna f'browser. Tidher għarwiena — eżattament kif intenzjonat: l-istil għad irid jiġi. Agħfas Tab: il-focus jgħaddi minn kull kontroll, it-tikketti jiġu mħabbra u l-ibgħat jaħdem. Il-mġiba lesta; id-dehra hija tiegħek u hija l-pass li jmiss.

Pass 4 — Agħtiha stil

Ikteb CSS kontra l-ganċijiet:

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

Jew aqbeż għalkollox il-kitba tas-CSS bl-id — evita wieħed mill-45 tema lesti u l-istess markup jixgħel: 

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

Pass 5 — Esplora iktar

  • It-testijiet tar-repożitorju jmexxu fuq browsers veri: pnpm install && pnpm test (WebDriverIO).
  • Storybook għal kull komponent: pnpm run storybook.
  • L-app eżempju HTML+CSS+JS turi l-571 komponent kollha bi stil, li jistgħu jiġu mfittxija u murija.

Passi li jmiss

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.