Lily Design System™

Tiwtorial HTML

Y dechrau symlaf posibl: copïwch HTML semantig gyda bachau dosbarth Lily, ychwanegwch un daflen arddull, cyhoeddwch. Ffeiliau syml sy'n gweithio ble bynnag y mae HTML yn gweithio.

Beth fyddwch chi'n ei adeiladu

Ffurflen gyswllt fach — meysydd â labeli, botwm cyflwyno, ymddygiad bysellfwrdd a darllenydd sgrin go iawn — yn noeth yn gyntaf, yna wedi'i steilio, mewn tua 10 munud.

Cyn i chi ddechrau

Mae arnoch angen porwr a golygydd testun. Dyna i gyd. (Mae git yn helpu i gael y ffeiliau cydrannau, ond gallwch eu copïo o GitHub yn y porwr hefyd.)

Cam 1 — Cael y cod

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

Mae pob cydran yn ffeil annibynnol yn components/ — button.html, text-input.htmlac yn y blaen — gyda sylw pennawd sy'n cofnodi ei dag HTML, ei fachyn dosbarth, ei ymddygiad bysellfwrdd a'i gontract hygyrchedd. Y ffeiliau yw'r llyfrgell — copïwch yr hyn sydd ei angen arnoch a ewch.

Cam 2 — Eich cydran gyntaf

Agorwch components/button.html, neu ysgrifennwch y marcio — y bachyn dosbarth yw'r contract:

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

Gan ei fod yn <button>go iawn, mae ffocws bysellfwrdd, actifadu gydag Enter a Space, a'r rôl botwm ymhlyg eisoes yn gywir.

Cam 3 — Cyfansoddi ffurflen fach

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

Sylwch ar y patrwm: mae pob rheolydd yn cysylltu ei <label for>ei hun, yn defnyddio'r math input mwyaf penodol ac yn cario un bachyn dosbarth kebab-case yn union.

Gwiriwch eich gwaith: agorwch y dudalen mewn porwr. Mae'n edrych yn noeth — yn union fel y bwriadwyd: mae'r steilio eto i ddod. Pwyswch Tab: mae ffocws yn symud trwy bob rheolydd, caiff y labeli eu cyhoeddi ac mae cyflwyno'n gweithio. Mae'r ymddygiad wedi'i orffen; eich un chi yw'r olwg a dyma'r cam nesaf.

Cam 4 — Ei steilio

Ysgrifennwch CSS yn erbyn y bachau:

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

Neu hepgorwch ysgrifennu CSS â llaw yn gyfan gwbl — cysylltwch un o'r 45 thema barod ac mae'r un marcio yn goleuo: 

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

Cam 5 — Archwilio ymhellach

  • Mae profion y gadwrfa yn rhedeg mewn porwyr go iawn: pnpm install && pnpm test (WebDriverIO).
  • Storybook ar gyfer pob cydran: pnpm run storybook.
  • Ap enghreifftiol HTML+CSS+JS yn dangos pob un o'r 571 cydran wedi'u steilio, yn chwiliadwy ac wedi'u dangos.

Y camau nesaf

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.