Lily Design System™

HTML vadovas

Paprasčiausias įmanomas pradžia: nukopijuokite semantinį HTML su „Lily“ klasių kabliais, pridėkite vieną stilių lentelę, paskelbkite. Paprastos bylos, veikiančios visur, kur veikia HTML.

Ką sukursite

Nedidelė kontaktų forma — laukai su žymomis, siuntimo mygtukas, tikras klaviatūros ir ekrano skaitytuvo elgesys — pirma plika, paskui apipavidalinta, per maždaug 10 minučių.

Prieš pradedant

Reikia naršyklės ir teksto redaktoriaus. Tai viskas. (git padeda gauti komponentų bylas, bet galite jas nukopijuoti ir iš GitHub naršyklėje.)

1 žingsnis — Gaukite kodą

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

Kiekvienas komponentas yra atskira byla aplanke components/ — button.html, text-input.htmlir pan. — su antraštės komentaru, dokumentuojančiu jo HTML žymą, klasės kablį, klaviatūros elgesį ir prieinamumo sutartį. Bylos yra biblioteka — nukopijuokite, ko reikia, ir eikite.

2 žingsnis — Jūsų pirmasis komponentas

Atidarykite components/button.htmlarba tiesiog parašykite žymėjimą — klasės kablys yra sutartis:

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

Kadangi tai tikras <button>, klaviatūros fokusas, aktyvinimas Enter ir tarpo klavišais bei numanomas mygtuko vaidmuo jau teisingi.

3 žingsnis — Sudėkite nedidelę 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>

Atkreipkite dėmesį į šabloną: kiekvienas valdiklis susieja savo <label for>, naudoja konkrečiausią įvesties tipą ir turi lygiai vieną kebab-case klasės kablį.

Patikrinkite savo darbą: atidarykite puslapį naršyklėje. Atrodo plika — kaip ir numatyta: stilius dar laukia. Paspauskite Tab: fokusas pereina per kiekvieną valdiklį, žymos paskelbiamos, o siuntimas veikia. Elgesys baigtas; išvaizda jūsų ir yra kitas žingsnis.

4 žingsnis — Apipavidalinkite

Parašykite CSS pagal kablius:

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

Arba visai praleiskite CSS rašymą rankomis — susiekite vieną iš 45 paruoštų temų ir tas pats žymėjimas sušvinta: 

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

5 žingsnis — Tyrinėkite toliau

  • Saugyklos testai vykdomi tikrose naršyklėse: pnpm install && pnpm test (WebDriverIO).
  • „Storybook“ kiekvienam komponentui: pnpm run storybook.
  • HTML+CSS+JS pavyzdinė programa rodo visus 571 komponentus apipavidalintus, ieškomus ir pademonstruotus.

Tolesni žingsniai

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.