Nunjucks-Tutorial — Lily Design System

Wat Dir bauen wäert

E klengt serversäiteg gerendert Kontaktformulaire — Feld mat Etikett, Schécken-Knäppchen, null JavaScript-Last — fir d'éischt nackeg, duerno gestalt, an ongeféier 10 Minutten.

Ier Dir ufänkt

Dir braucht git, Node 22 oder méi nei a pnpm 10 oder méi nei. All Nunjucks-Pipeline funktionéiert — Eleventy, Express oder einfachen Nunjucks.

Schrëtt 1 — D'Code kréien

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

All Komponent ass e Verzeechnes am components/ mat engem macro.njk, hirem Test a hirer Dokumentatioun — zum Beispill components/button/macro.njk. Léisst Äre Nunjucks-Loader op components/ weisen (an Eleventy füügt et dem Include-Wee derbäi) an importéiert, wat Dir braucht.

Schrëtt 2 — Är éischt Komponent

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

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

Rendert <button class="button" type="submit">Save</button>. Makroe huele ee Params-Objet: text (escaped) oder html (roh), type, label fir en aria-labelan en Klassen-Hook-Unhänker.

Schrëtt 3 — E klengt Formulaire zesummestellen

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

Well alles um Server gerendert gëtt, kritt de Browser purt semantescht HTML mat de Klassen-Hooks — eng JavaScript-Last vun null Bytes.

Kontrolléiert Är Aarbecht: luet d'Säit an d'Formulaire gesäit nackeg aus — genee wéi geduecht: d'Gestaltung kënnt nach. Dréckt Tab: de Fokus geet duerch all Kontroll, d'Etikett gëtt ugekënnegt an d'Schécken funktionéiert. D'Verhalen ass fäerdeg; d'Ausgesi ass Är a kënnt als Nächst.

Schrëtt 4 — Gestalt et

Gestalt d'Hooks — .button, .text-input, .label, .field — an Ärem Stylesheet, oder verlinkt e fäerdegt Thema an Ärem Basis-Layout:

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

Schrëtt 5 — Alles am Aktioun gesinn

Nunjucks + Eleventy Beispill-App baut de ganze Katalog als statesch Websäit mat Demosäiten pro Komponent:

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

Nächst Schrëtt

Themen — abegraff dem Eleventy-Cookie-Muster fir flackerfräie SSR-Themewiessel.
Astellungs-Helperen — Sprooch a Textgréisst.
Komponentekatalog — Eegeschaften, ARIA an Tastatur pro Komponent.

Froen ënnerwee? D'Hëllefsäit ass voller Äntwerten — a wann e Schrëtt méi kloer kéint sinn, soot et eis a mir verbesseren den Tutorial gär.