Dyskans HTML — Lily Design System

Pyth a wrewgh drehevel

Furv kestava byghan — mewnosow gans lavellow, botton danvon, hwedhel klavyer ha skrin-redyer gwir — kynsa noeth, ena stylys, yn a-dro dhe 10 mynysenn.

Kyns dalleth

Ty a'n jeves othom a wiaskodhor ha golyoryer tekst. Henna yw oll. (git a weres dhe gafos restrennow an darn, mes ty a yll aga hopia dhiworth GitHub y'n gwiaskodhor ynwedh.)

Kamm 1 — Kevewgh an koodh

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

Pub darn yw restren dre-honan yn components/ — button.html, text-input.html, ha mar pella — gans kampol-lavar a ddisplet y dag HTML, krok klass, hwedhel klavyer, ha kevambos hedhesadewder. An restrennow yw an lyverva — kopiewgh an pyth a'n jeves othom ha ewgh.

Kamm 2 — Dha dharn kynsa

Igorewgh components/button.html, po skrifewgh an markup hepken — an krok klass yw an kevambos:

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

Drefen yw <button>gwir, fokus klavyer, aktivans Enter ha Space, ha rol botton kudhys yw ewn seulajys.

Kamm 3 — Kesstrewewgh furv byghan

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

Merkewgh an patrom: pub kontroll a gevrew y <label for>, a wra devnydh a'n par mewnos moyha arbennik, ha dhe dhon ewn unn krok klass kebab-case.

Hwithrewgh dha oberenn: igorewgh an folen yn gwiaskodhor. Hi a hevel plen — yn ewn herwydh bryntyans: an stylyans yw hwath a-rag. Gwaskewgh Tab: fokus a wayn dres pub kontroll, an lavellow yw displetys, ha'n danvon a ober. An hwedhel yw gwrys; an semlant yw dhiso ha henna yw nessa.

Kamm 4 — Stylyewgh

Skrifewgh CSS orth an krogow:

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

Po omholyewgh a skrifa CSS dre leuv yn tien — kevrewgh onan a'n 45 tebel parys ha'n keth markup a wra golowi:

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

Kamm 5 — Whelewgh pella

Previow an gwithva a gerdh yn gwiaskodhoryon gwir: pnpm install && pnpm test (WebDriverIO).
Storybook rag pub darn: pnpm run storybook.
An App ensampel HTML+CSS+JS a dhyskwedh oll an 571 darn stylys, hwelasadow, ha displetys.

Kammow nessa

Tebelyow — chanj tebel y'n termyn-dyrghas gans theme-picker.
Gweresoryon dewisyow — yeth ha myns an skrif.
Rolyans darnow — an dhogynnans kowl.

Govynnow war an fordh? An folen skoodhya yw leun a worthebow — ha mar pe kamm moy splann, leverewgh dhyn ha ni a wellha an dyskans yn lowen.