Lily Design System™

Tutorial sa HTML

Ang pinakasimpleng simula: kopyahin ang semantic HTML na may mga class hook ng Lily, magdagdag ng isang stylesheet, i-ship. Mga payak na file na gumagana kahit saan gumagana ang HTML.

Ang bubuuin mo

Isang maliit na contact form — mga input na may label, submit button, tunay na gawi ng keyboard at screen reader — una ay hubad, pagkatapos ay may istilo, sa humigit-kumulang 10 minuto.

Bago ka magsimula

Kailangan mo ng browser at text editor. Iyon lang. (Nakakatulong ang git sa pagkuha ng mga file ng component, pero maaari mo rin silang kopyahin mula sa GitHub sa browser.)

Hakbang 1 — Kunin ang code

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

Bawat component ay standalone na file sa components/ — button.html, text-input.html, at iba pa — na may header comment na nagdodokumento ng HTML tag, class hook, gawi ng keyboard, at kontrata ng accessibility nito. Ang mga file ay ang library — kopyahin ang kailangan mo at umandar na.

Hakbang 2 — Ang una mong component

Buksan ang components/button.html, o isulat na lang ang markup — ang class hook ang kontrata:

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

Dahil totoong <button>ito, tama na ang keyboard focus, Enter at Space na activation, at ang implicit na role ng button.

Hakbang 3 — Bumuo ng maliit na form

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

Pansinin ang pattern: iniuugnay ng bawat kontrol ang <label for>nito, ginagamit ang pinakaespesipikong uri ng input, at may eksaktong isang kebab-case na class hook.

Suriin ang gawa mo: buksan ang pahina sa browser. Mukhang payak ito — eksakto ayon sa layunin: ang istilo ay nasa unahan pa. Pindutin ang Tab: gumagalaw ang focus sa bawat kontrol, naba-balita ang mga label, at gumagana ang pagsumite. Tapos na ang gawi; sa iyo ang hitsura at iyon ang susunod.

Hakbang 4 — Bigyan ng istilo

Magsulat ng CSS laban sa mga hook:

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

O laktawan na ang pagsusulat ng CSS nang mano-mano — mag-link ng isa sa 45 handa nang tema at magliliwanag ang parehong markup: 

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

Hakbang 5 — Tuklasin pa

  • Tumatakbo ang mga pagsusuri ng repo sa tunay na mga browser: pnpm install && pnpm test (WebDriverIO).
  • Storybook para sa bawat component: pnpm run storybook.
  • Ang HTML+CSS+JS na halimbawang app ay nagpapakita ng lahat ng 571 component na may istilo, mahahanap, at may demo.

Mga susunod na hakbang

May mga tanong habang nasa daan? Ang pahina ng tulong ay puno ng mga sagot — at kung maaaring maging mas malinaw ang isang hakbang, sabihin sa amin at masaya naming pagbubutihin ang tutorial.