Teagasc HTML — Lily Design System

An rud a thógfaidh tú

Foirm theagmhála bheag — réimsí le lipéid, cnaipe cur isteach, fíor-iompar méarchláir agus léitheora scáileáin — nocht ar dtús, ansin stíl-chóirithe, i thart ar 10 nóiméad.

Sula dtosaíonn tú

Tá brabhsálaí agus eagarthóir téacs ag teastáil uait. Sin uile. (Cabhraíonn git le comhaid na gcomhpháirteanna a fháil, ach is féidir leat iad a chóipeáil ó GitHub sa bhrabhsálaí freisin.)

Céim 1 — Faigh an cód

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

Is comhad neamhspleách é gach comhpháirt i components/ — button.html, text-input.htmlagus mar sin de — le tuairim cheanntásc a dhoiciméadaíonn a chlib HTML, a chrúca aicme, a iompar méarchláir agus a chonradh inrochtaineachta. Is iad na comhaid an leabharlann — cóipeáil an méid atá ag teastáil uait agus téigh.

Céim 2 — Do chéad chomhpháirt

Oscail components/button.html, nó scríobh an marcáil go simplí — is é an crúca aicme an conradh:

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

Toisc gur <button>fíor atá ann, tá fócas méarchláir, gníomhachtú le Enter agus Space, agus ról intuigthe an chnaipe ceart cheana féin.

Céim 3 — Cuir foirm bheag le 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>

Tabhair faoi deara an patrún: nascann gach rialú a <label for>féin, úsáideann sé an cineál ionchuir is sainiúla agus iompraíonn sé crúca aicme kebab-case amháin go díreach.

Seiceáil d'obair: oscail an leathanach i mbrabhsálaí. Tá sé le feiceáil nocht — go díreach mar a bhí beartaithe: tá an stíliú fós le teacht. Brúigh Tab: gluaiseann an fócas trí gach rialú, fógraítear na lipéid agus oibríonn an cur isteach. Tá an t-iompar déanta; is leatsa an cuma agus is é an chéad chéim eile é.

Céim 4 — Stíligh é

Scríobh CSS i gcoinne na gcrúcaí:

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

Nó scipeáil scríobh CSS de láimh go hiomlán — nasc ceann de na 45 téama réamhdhéanta agus lasann an marcáil chéanna:

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

Céim 5 — Féach níos faide

Ritheann tástálacha an stórais i mbrabhsálaithe fíora: pnpm install && pnpm test (WebDriverIO).
Storybook do gach comhpháirt: pnpm run storybook.
App samplach HTML+CSS+JS taispeánann sé na 571 comhpháirt ar fad stíl-chóirithe, inchuardaithe agus léirithe.

Na chéad chéimeanna eile

Téamaí — malartú téama ag am rite le theme-picker.
Cúntóirí sainroghanna — teanga agus méid téacs.
Catalóg na gcomhpháirteanna — an tagairt iomlán.

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.