Lily Design System™

Lieft Lily, Schrëtt fir Schrëtt

Wëllkomm! All Tutorial fänkt bei Null un a baut dat selwecht klengt Ding — e zougängleche, gestylte Formulaire — an ongeféier 10 Minutten, sou datt Dir Frameworken op gläichem Niveau vergläiche kënnt. Dann gitt méi déif mat Themen a Benotzerastellungen.

Ier Dir ufänkt

Dir braucht iwwerraschend wéineg:

  • Fir den HTML-Tutorial — just e Browser an en Texteditor. Dat ass de ganze Geschirkoffer.
  • Fir Svelte, React, Vue, Angular oder Nunjucks — git, Node 26 a pnpm 10 oder méi nei.
  • Fir Blazor — git an d’ .NET SDK 8 oder méi nei.

Nei bei Headless-Komponenten? Dir sidd um richtege Plaz — all Tutorial erkläert, wat geschitt, an all Schrëtt weist de genauen Code zum Kopéieren.

Véier Schrëtt vun Null bis zur Verëffentlechung

  1. Är éischt Komponent (~5 Minutten) — wielt ënnen Äre Framework, hëlt de Code a rendert e Button.
  2. Kompoyéieren a stylen (~5 Minutten) — baut e Formulaire mat Etiketten a stylt en no de Klassenhaken a Kebab-Case (Deel vun all Framework-Tutorial).
  3. Gitt him en Thema (~15 Minutten) — ersetzt Äre handgeschriwwene CSS duerch ee vun de 57 fäerdegen Themen, dann loosst Benotzer während der Lafzäit wiesselen: Themen-Tutorial.
  4. Respektéiert Astellungen (~15 Minutten) — füügt mat den Astellungshelfer d’Wiel vu Sprooch an Textgréisst derbäi: Helfer-Tutorial.

Wielt Äre Framework

HTML

Kopéiert semantescht HTML mat de Klassenhaken a leet lass — e Browser an en Editeur sinn alles, wat et brauch.

~10 Minutten · einfachsten Ufank

Svelte

Svelte-5-Runen, Snippets an Zweewee-Bindung mat bind:value .

~10 Minutten

React

Funktiounskomponenten mat value + onChange an Verbreedung vun de Rest-Eegenschaften.

~10 Minutten

Vue

Vue-3-Eenzelfichier-Komponenten mat Ënnerstëtzung fir v-model .

~10 Minutten

Angular

Standalone-Angular-Komponenten mat Signal-Inputen an [(value)].

~10 Minutten

Blazor

Razor-Komponenten mat Parameteren, ChildContentan bUnit-Tester.

~10 Minutten

Nunjucks

Server-gerenderte Makroen fir Eleventy an all Node-Template-Pipeline.

~10 Minutten

Zerräissen tëscht hinnen? Fänkt mat HTML un — et léiert de Klassenhaken-Kontrakt, deen all aner Framework deelt, a leeft direkt aus enger Datei.

Gitt méi déif

Themen

Verlénkt ee vun de 57 fäerdegen Themen — NHS, GOV.UK, USWDS, hell, donkel a méi — iwwerschreift en mat Ärem eegene CSS a füügt Themewiessel während der Lafzäit mam theme-picker-Helfer derbäi.

~15 Minutten

Astellungshelfer

Gitt de Benotzer Kontroll iwwer Thema, Sprooch, Textgréisst, Bewegung, Sich, Säitelénken, Deelen an Datum-/Zäiteingab mat theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker an date-time-picker: Headless-Kontrollen mat Persistenz, SSR-Sécherheet an automatescher RTL-Erkennung.

~15 Minutten

No den Tutorialen

  • Duerchstéiert de Komponentekatalog — all Komponent dokumentéiert hir Eegenschaften, hire ARIA-Kontrakt a hiert Tastaturverhalen.
  • Klonéiert eng Beispillapplikatioun , fir all 571 Komponenten gestylt a zesumme schaffend ze gesinn — de CSS zielt op déiselwecht Klassenhaken, déi Dir grad benotzt hutt, also kopéiert iergendeen Deel dovunner an Äre Projet a passt en un, wéi Dir wëllt.
  • Froen? Op der Hëllefssäit fannt Dir Äntwerten, eng FAQ a Weeër, e frëndleche Mënsch z’erreechen. An wann en Tutorial méi kloer kéint sinn, sot et eis — mir verbessere en gär.