Koyarwar HTML — Lily Design System

Abin da za ka gina

Ƙaramin fom na tuntuɓa — filaye masu lakabi, maɓallin aikawa, ainihin halayyar maɓallan rubutu da na'urar karanta allo — da farko ba tare da tsari ba, sannan da tsari, cikin kusan mintuna 10.

Kafin ka fara

Kana buƙatar mai bincike da editan rubutu. Shi ke nan. (git yana taimakawa wajen samun fayilolin abubuwan, amma za ka iya kwafar su daga GitHub a cikin mai bincike ma.)

Mataki na 1 — Ɗauki lambar

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

Kowane abu fayil ne mai cin gashin kansa a cikin components/ — button.html, text-input.htmlda sauransu — tare da sharhin kai da ke bayyana tambarin HTML ɗinsa, ƙugiyar aji, halayyar maɓallan rubutu da yarjejeniyar sauƙin isa. Fayilolin su ne ɗakin karatun — kwafi abin da kake buƙata ka tafi.

Mataki na 2 — Abu na farko naka

Buɗe components/button.html, ko kawai rubuta alamar rubutun — ƙugiyar aji ita ce yarjejeniya:

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

Saboda ainihin <button>ne, mayar da hankali na maɓallan rubutu, kunnawa da Enter da Space, da matsayin maɓalli mai ma'ana duk sun riga sun daidaita.

Mataki na 3 — Haɗa ƙaramin fom

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

Lura da tsarin: kowane abin sarrafawa yana haɗa <label for>nasa, yana amfani da nau'in input mafi ƙayyadewa kuma yana ɗauke da ƙugiyar aji ta kebab-case guda ɗaya daidai.

Duba aikinka: buɗe shafin a cikin mai bincike. Yana kama da maras tsari — daidai kamar yadda aka nufa: tsarin yana nan gaba. Danna Tab: mayar da hankali yana ratsa kowane abin sarrafawa, ana sanar da lakabi, kuma aikawa yana aiki. An gama halayyar; kamannin naka ne kuma shi ne mataki na gaba.

Mataki na 4 — Ba shi tsari

Rubuta CSS a kan ƙugiyoyin:

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

Ko ka tsallake rubuta CSS da hannu gaba ɗaya — haɗa ɗaya daga cikin jigogi 45 da aka shirya kuma alamar rubutu iri ɗaya tana haskakawa:

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

Mataki na 5 — Bincika gaba

Gwaje-gwajen ma'ajiyar suna gudana a masu bincike na gaske: pnpm install && pnpm test (WebDriverIO).
Storybook ga kowane abu: pnpm run storybook.
App ɗin misali na HTML+CSS+JS yana nuna dukan abubuwa 571 da tsari, masu bincikuwa da nuni.

Matakai na gaba

Jigogi — sauya jigo lokacin aiki da theme-picker.
Masu taimakon abubuwan so — harshe da girman rubutu.
Kundin abubuwa — cikakken bayani.

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.