Lily Design System™

Vodnik za Nunjucks

Makri, izrisani na strežniku, za Eleventy, Express ali kateri koli cevovod predlog Node — pristop v slogu GOV.UK z Lilyjinim katalogom in razrednimi kavlji.

Kaj boste ustvarili

Majhen na strežniku izrisan kontaktni obrazec — polje z oznako, gumb za pošiljanje, ničen tovor JavaScripta — najprej gol, nato oblikovan, v približno 10 minutah.

Preden začnete

Potrebujete git, Node 22 ali novejši in pnpm 10 ali novejši. Primeren je vsak cevovod Nunjucks — Eleventy, Express ali navaden Nunjucks.

Korak 1 — Pridobite kodo

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-headless
pnpm install
pnpm test        # vitest rendering every macro

Vsaka komponenta je mapa v components/ z macro.njk, njenim testom in dokumentacijo — na primer components/button/macro.njk. Usmerite svoj nalagalnik Nunjucks na components/ (v Eleventyju ga dodajte v pot includes) in uvozite, kar potrebujete.

Korak 2 — Vaša prva komponenta

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "submit" }) }}

Izriše <button class="button" type="submit">Save</button>. Makri sprejmejo en sam objekt params: text (ubežan) ali html (surov), type, label za aria-labelin dodajalnik razrednega kavlja.

Korak 3 — Sestavite majhen obrazec

{% from "components/form/macro.njk" import form %}
{% from "components/label/macro.njk" import label %}
{% from "components/text-input/macro.njk" import textInput %}
{% from "components/button/macro.njk" import button %}

<form class="form" method="post">
  <div class="field">
    {{ label({ for: "name", text: "Full name" }) }}
    {{ textInput({ id: "name", name: "name", required: true }) }}
  </div>
  {{ button({ text: "Save", type: "submit" }) }}
</form>

Ker se vse izriše na strežniku, brskalnik prejme čist semantični HTML z razrednimi kavlji — tovor JavaScripta nič bajtov.

Preverite svoje delo: naložite stran in obrazec je videti gol — natanko kot je bilo načrtovano: oblikovanje šele sledi. Pritisnite Tab: fokus gre skozi vsak kontrolnik, oznaka se izgovori in pošiljanje deluje. Vedenje je končano; videz je vaš in je naslednji korak.

Korak 4 — Oblikujte ga

Oblikujte kavlje — .button, .text-input, .label, .field — v svoji slogovni datoteki ali povežite že pripravljeno temo v osnovni postavitvi: 

<link rel="stylesheet" href="/themes/united-kingdom-government-digital-service.css" />

Korak 5 — Poglejte, kako vse deluje

Vzorčna aplikacija Nunjucks + Eleventy zgradi celoten katalog kot statično spletno mesto s predstavitvenimi stranmi za vsako komponento: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-eleventy-examples
pnpm install && pnpm run dev

Naslednji koraki

  • Teme — vključno z Eleventyjevim vzorcem piškotkov za preklapljanje teme v SSR brez utripanja.
  • Pomočniki za nastavitve — jezik in velikost besedila.
  • Katalog komponent — lastnosti, ARIA in tipkovnica za vsako komponento.

Vprašanja na poti? Stran s pomočjo je polna odgovorov — in če bi bil kakšen korak lahko jasnejši, sporočite nam in vodnik bomo z veseljem izboljšali.