Ufänke mat Lily

Installatioun

Lily lieft an enger eenzeger Git-Monorepo, mat engem Verzeechnes fir d’Headless-Bibliothéik, d’Helferpakéiten an d’Beispillapplikatioun vun all Framework. Dee schnellste Wee fir et auszeprobéieren ass, d’Monorepo ze klonen an d’Headless-Bibliothéik fir Äre Stack opzemaachen:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install

Dat selwecht Muster funktionéiert fir déi aner Frameworken:

• @lilydesignsystem/html-headless — keng Installatioun néideg; kopéiert d’ .html -Dateien
• @lilydesignsystem/svelte-headless — pnpm install
• @lilydesignsystem/react-headless — pnpm install
• @lilydesignsystem/vue-headless — pnpm install
• @lilydesignsystem/angular-headless — pnpm install
• @lilydesignsystem/nunjucks-headless — pnpm install
• lily-design-system-blazor-headless — dotnet build

D’Headless-Bibliothéike sinn dofir geduecht, gekloont oder agebonnen ze ginn — behandelt de Quellcode als Quell vun der Wourecht a kopéiert, wat Dir braucht. Astellungshelfer ginn zousätzlech als installéierbar Pakéite mat Build- a Verëffentlechungspipeline geliwwert (npm fir d’JS-Frameworken, NuGet fir Blazor).

Eng Headless-Komponent benotzen

Headless-Komponenten liwwere semantescht HTML, ARIA an Eegenschaften — awer kee CSS. Hei ass e Button a jidder Framework:

HTML

<button class="button" type="button" aria-label="Save">
  Save
</button>

Svelte

<script>
  import Button from "lily-design-system-svelte-headless/components/Button/Button.svelte";
</script>

<Button onclick={save}>Save</Button>

React

import Button from "lily-design-system-react-headless/components/Button";

<Button onClick={save}>Save</Button>

Vue

<script setup>
  import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<Button @click="save">Save</Button>

Angular

import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})

Blazor

<Button OnClick="Save">Save</Button>

Nunjucks

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

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

E gestylt Beispill benotzen

D’Beispillapplikatioune enthalen CSS, Routen a voll Demosäiten. Dee schnellste Wee fir ze experimentéieren ass, d’SvelteKit-, Next-, Nuxt-, Analog- oder Eleventy-Beispillapplikatioun ze starten an d’Demo ze kucken op /components.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install
pnpm run dev

Dann maacht http://localhost:5173 op a stéiert duerch /components.

Stylung an Design-Tokens

All Komponent gëtt mat enger eenzeger Kebab-Case-Klass op hirem Wuerzelelement gerendert. Zum Beispill gëtt <Button> gerendert als <button class="button">. Stylt et, wéi Dir wëllt:

.button {
  background: var(--my-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.button:hover { background: var(--my-primary-hover); }

Dem Lily seng Standardfaarfpalette (a Beispillapplikatiounen benotzt) ass:

• Primär: #2563eb
• Gefor: #dc2626
• Warnung: #f59e0b
• Erfolleg: #16a34a
• Säitenhannergrond: #f9fafb
• Kaartenhannergrond: #ffffff

Dat sinn Virschléi, keng Viraussetzungen. Ersetzt se duerch Är eege Markepalette a Lily kënnt gär mat.

Fäerdeg Themen

Wëllt Dir CSS net vun Null un schreiwen? Lily liwwert 57 eegestänneg Referenzthemen am Verzeechnes themes/ . All ass e Stylesheet, dat op d’Klassenhake vu Lily zielt — verlénkt et an Dir sidd gestylt:

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

De Set deckt of:

• Ëffentleche Secteur — NHS England, NHS Scotland an NHS Wales (all a Patienten- a Fachpersounevarianten), GOV.UK GDS an d’U.S. Web Design System.
• Vun Ubidder inspiréiert — Adobe Spectrum, Mozilla Protocol.
• Allgemengen Zweck — light, dark, nord, dracula, wireframe an nach drësseg anerer.

Thema-Selektore benotzen :where(...), sou dass Äre eegene CSS ëmmer an der Spezifizitéit gewënnt. Kombinéiert se mam Helfer theme-picker ënnen fir Wiessel während der Lafzäit, oder follegt dem Themen-Tutorial.

Astellungshelfer

All Framework huet aacht kleng Wieler, jiddereen e Pakéit lily-design-system-{framework}-{package} fir sech (an e picker-bar , dee se zesummebaut). All ass en Headless-Ikonknäppchen, dat e Popup opmécht — eng Lëscht, eng Linklëscht, e Sichformulaire oder (bei date-time-picker) en Datumsauswiel-Dialog — net e native <select>; ass SSR-sécher; a liwwert kee CSS:

• theme-picker — lued Thema-Stylesheets während der Lafzäit, andeems en en geréierte <link>austauscht, setzt data-theme um Dokument an späichert optional persistent an localStorage.
• locale-picker — setzt lang an dir (mat automatescher RTL-Erkennung), sou dass Är i18n-Bibliothéik nokënnt; iwwersetzt selwer näischt.
• text-size-picker — setzt data-text-size um Dokument; Äre CSS bilt all Wäert op eng Schrëftgréisst of.
• motion-picker — setzt data-motion um Dokument, ausgoend vun der Astellung vum Besucher fir reduzéiert Bewegung; Äre CSS an Är Skripte entscheeden, wat ënnerdréckt gëtt.
• search-picker — e Ikonknäppchen, dat e Sichfeld opmécht; d’Aschécken navigéiert op eng Sichsäit. Besëtzt eng Aktioun, keng Astellung.
• link-picker — eng Haus-Ikon, déi e Menü mat de Säitelénken opmécht, déi Är Applikatioun definéiert (Startsäit, Iwwer eis, Kontaktéiert eis, Dateschutzrichtlinn, …). Besëtzt eng Aktioun, keng Astellung.
• share-picker — mécht d’native Deelen-Blat oder eng vum Konsument geliwwert Zillëscht op, plus URL kopéieren. Besëtzt eng Aktioun, keng Astellung: wend näischt un, späichert näischt.
• date-time-picker — en Textfeld plus en APG-Datumsauswiel-Dialog fir en Datum, eng Zäit oder béides. Besëtzt e Formulairewäert, keng Astellung: de ISO-String gëtt hin an hier ëmgewandelt an <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

De Svelte-Katalog ass d’kanonesch Referenz; d’Ports fir React, Vue, Angular, HTML, Nunjucks, Web Components a Blazor entspriechen him Kontrakt fir Kontrakt. Kuckt den Helfer-Tutorial.

Zougänglechkeet

D’Komponente ziilen op WCAG 2.2 AAA. Si follegen dëse Mustere:

• Semantesch HTML-Elementer amplaz generesch <div>s.
• <label for="id"> -Elementer, déi Etiketten mat Inputen verbannen.
• aria-labelledby / aria-describedby fir Quervirweiser.
• aria-invalid + aria-errormessage fir Feelerzoustänn.
• role="alert" an aria-live fir dynamesch Inhalter.
• aria-pressed, aria-expanded, aria-current fir den Zoustand.
• Roving tabindex fir Gitter.

Fokusindikatore ginn bewosst vum Konsument geliwwert — Lily zeechent ni e Standard-Fokusring, deen mat Ärem Design kollidéiert. D’Beispillapplikatioune halen eng propper axe-core-Basislinn op all hire Routen.

Internationaliséierung

All Etikett, Platzhalter, Feelermeldung an Knäppertext ass eng Eegenschaft. Et ginn keng fest geschriwwe Zeechefolgen. Verbannt de Iwwersetzungs-Framework Ärer Wiel — Paraglide, i18next, vue-i18n, react-intl, .resx-Dateien, alles.

Fir Datumer, Zuelen a Währunge huelen d’Komponenten virformatéiert Zeechefolgen un: Dir formatéiert mat Intl.DateTimeFormat / Intl.NumberFormat / Ärer léifste Bibliothéik a gitt d’Resultat weider.

Den locale-picker -Helfer signaliséiert d’gewielt Lokal un Är i18n-Bibliothéik, andeems en lang an dir op der Dokumentwuerzel setzt.

Testen

All Framework-Ënnerprojet liwwert seng eege Tester mat sengem idiomateschen Stack:

• HTML: WebDriverIO, dat richteg Browser lafe léisst.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (iwwer de Analog-Vite-Plugin).
• Nunjucks: Vitest mat engem Render-Helfer.
• Blazor: bUnit.

D’Tester benotzen just déi agebaute Matcher vu Vitest — ni jest-dom -Matcher. Dat hält d’Test-Suiten portabel. D’Beispillapplikatioune füügen Playwright-End-to-End-Suiten, axe-core-Zougänglechkeetsbasislinnen an e Sweep duerch responsiv Viewports derbäi.

KI-Agenten

Dës Säit verëffentlecht llms.txt an llms.json op senger Wuerzel — eng kuratéiert Kaart vu senge wichtegste Säiten, fir all Geschir, dat der llms.txt-Konventioun.

follegt. Déi kanonesch Monorepo liwwert zousätzlech zwou Claude Skills: lily-design-system-skill: eng allgemeng Fäegkeet, déi dem Lily seng Konzepter, Terminologie a Kompositiounsmuster fir jiddereen ofdeckt, deen mam System baut, an lily-design-system-maintainer-skill, eng technesch Fäegkeet, déi dem Monorepo säi Layout vun néidegen Dateien a Geschirer fir jiddereen ofdeckt, deen drun schafft. Béid leie op der Wuerzel vun der kanonescher Monorepo.

Feelersich

Matmaachen

Lily ass jonk a begréisst Zesummenaarbecht. Déi nëtzlechst Bäiträg am Moment sinn:

• Nei Komponenten (besonnesch Muster aus etabléierten Designsystemer).
• Nei Themen — all ass ee selbstänneg Stylesheet, en gutt ofgegrenzte éischte PR.
• Besser Beispillstylung — weist, wat méiglech ass.
• Iwwersetzunge vun de Zeechefolge vun de Beispillapplikatiounen.
• Feelerberichter mat enger minimaler Reproduktioun.
• Zougänglechkeetsauditen mat Écran-Lieser an assistive Technologie.

Maacht Issues a PRs op github.com/LilyDesignSystem/lily-design-system.

Gemeinschaft an Ënnerstëtzung

• Froen a Feelerberichter — maacht en Issue op github.com/LilyDesignSystem/lily-design-system.
• E-Mail — de Maintainer liest joel@joelparkerhenderson.com a begréisst Zesummenaarbecht, Orientéierung a Feedback.
• Spigelen — Lily gëtt och op Codeberg an GitLabgepusht, sou dass Dir vum Forge aus matmaache kënnt, dee Dir léiwer hutt.
• Verhalen — de Projet follegt engem Standard-Verhaltenskodex; sidd frëndlech, gitt vu gudde Wëlle aus.

FAQ