Lily Design System™

Oideachadh HTML

An tòiseachadh as sìmplidh: dèan lethbhreac de HTML seamantach le crochaidhean clas Lily, cuir aon bhileag-stoidhle ris, foillsich. Faidhlichean sìmplidh a dh’obraicheas àite sam bith an obraich HTML.

Na thogas tu

Foirm fios-thugainn bheag — in-chuiridhean le leubail, putan cur-a-steach, giùlan clàr-iuchrach is leughadair-sgrìn fìor — an toiseach lom, an uairsin le stoidhle, ann an timcheall air 10 mionaidean.

Mus tòisich thu

Feumaidh tu brabhsair agus deasaiche teacsa. Sin uile. (Cuidichidh git le faidhlichean nan co-phàirtean fhaighinn, ach faodaidh tu lethbhreac a dhèanamh dhiubh bho GitHub sa bhrabhsair cuideachd.)

Ceum 1 — Faigh an còd

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

Tha gach co-phàirt na faidhle fèin-sheasmhach ann an components/ — button.html, text-input.html, agus mar sin air adhart — le beachd-cinn a’ clàradh a taga HTML, crochadh clas, giùlan clàr-iuchrach agus cùmhnant so-ruigsinneachd. Tha na faidhlichean an leabharlann — dèan lethbhreac dhen fheadhainn a tha a dhìth ort agus rach air adhart.

Ceum 2 — A’ chiad cho-phàirt agad

Fosgail components/button.html, no dìreach sgrìobh am marcachadh — is e an crochadh clas an cùmhnant:

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

Leis gu bheil e na fhìor <button>, tha fòcas clàr-iuchrach, gnìomhachadh Enter is Space, agus dreuchd shàmhach a’ phutain ceart mu thràth.

Ceum 3 — Cuir foirm bheag ri chèile

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

Thoir an aire don phàtran: bidh gach smachd a’ ceangal a <label for>, a’ cleachdadh an t-seòrsa in-chuir as sònraichte, agus a’ giùlan dìreach aon chrochadh clas kebab-case.

Dèan cinnteach air d’ obair: fosgail an duilleag ann am brabhsair. Tha e a’ coimhead lom — dìreach mar a bha dùil: tha an stoidhle fhathast romhainn. Brùth Tab: bidh am fòcas a’ gluasad tro gach smachd, tha na leubailean air an ainmeachadh, agus obraichidh cur-a-steach. Tha an giùlan deiseil; is leatsa an coltas, agus is e an ath rud.

Ceum 4 — Cuir stoidhle air

Sgrìobh CSS an aghaidh nan crochaidhean:

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

No leum thairis air sgrìobhadh CSS gu tur — ceangail fear dhe na 45 ùrlar deiseil agus lasaidh an aon mharcachadh: 

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

Ceum 5 — Rannsaich nas fhaide

  • Bidh deuchainnean an stòir a’ ruith ann am fìor bhrabhsairean: pnpm install && pnpm test (WebDriverIO).
  • Storybook airson gach co-phàirt: pnpm run storybook.
  • Tha an tagradh eisimpleir HTML+CSS+JS a’ sealltainn nan 571 co-phàirt le stoidhle, ri an lorg agus air an taisbeanadh.

Na ceumannan a leanas

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.