Prvi koraci s Lilyjem

Instalacija

Lily živi u jednom Git monorepozitoriju, s direktorijem za bezglavu biblioteku, pomoćne pakete i primjernu aplikaciju svakog frameworka. Najbrži način da ga isprobate je klonirati monorepozitorij i otvoriti bezglavu biblioteku za vaš stack:

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

Isti obrazac radi za ostale frameworke:

• @lilydesignsystem/html-headless — instalacija nije potrebna; kopirajte datoteke .html
• @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

Bezglave biblioteke dizajnirane su da se kloniraju ili ugrađuju — izvorni kod smatrajte izvorom istine i kopirajte što vam treba. pomoćnici za postavke dodatno se isporučuju kao instalabilni paketi s cjevovodom za izgradnju i objavu (npm za JS frameworke, NuGet za Blazor).

Upotreba bezglave komponente

Bezglave komponente isporučuju semantički HTML, ARIA i svojstva — ali ne i CSS. Evo Buttona u svakom frameworku:

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" }) }}

Upotreba stiliziranog primjera

Primjerne aplikacije uključuju CSS, rute i potpune demo stranice. Najbrži način eksperimentiranja je pokrenuti primjernu aplikaciju za SvelteKit, Next, Nuxt, Analog ili Eleventy i pogledati demo na /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

Zatim otvorite http://localhost:5173 i pregledavajte /components.

Stiliziranje i dizajnerski tokeni

Svaka se komponenta renderira s jednom klasom u kebab-caseu na svom korijenskom elementu. Na primjer, <Button> se renderira kao <button class="button">. Stilizirajte ga kako želite:

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

Zadana paleta boja Lilyja (korištena u primjernim aplikacijama) je:

• Primarna: #2563eb
• Opasnost: #dc2626
• Upozorenje: #f59e0b
• Uspjeh: #16a34a
• Pozadina stranice: #f9fafb
• Pozadina kartice: #ffffff

To su prijedlozi, a ne zahtjevi. Zamijenite ih paletom vlastitog brenda i Lily rado slijedi.

Gotove teme

Ne želite pisati CSS od nule? Lily isporučuje 57 samostalnih referentnih tema u direktoriju themes/ . Svaka je jedan stilski list koji cilja kuke klasa Lilyja — povežite ga i stilizirani ste:

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

Skup obuhvaća:

• Javni sektor — NHS England, NHS Scotland i NHS Wales (svaka u varijantama za pacijente i za praktičare), GOV.UK GDS i U.S. Web Design System.
• Nadahnuto dobavljačima — Adobe Spectrum, Mozilla Protocol.
• Opća namjena — light, dark, nord, dracula, wireframe i tridesetak drugih.

Selektori tema koriste :where(...), pa vaš vlastiti CSS uvijek pobjeđuje u specifičnosti. Uparite ih s pomoćnikom theme-picker u nastavku za promjenu tijekom izvođenja ili slijedite vodič o temama.

Pomoćnici za postavke

Svaki framework ima osam malih birača, svaki je zaseban paket lily-design-system-{framework}-{package} (i jedan picker-bar koji ih sastavlja). Svaki je bezglavi gumb s ikonom koji otvara skočni prozor — popis, popis poveznica, obrazac za pretraživanje ili (za date-time-picker) dijalog za odabir datuma — ne nativni <select>; siguran je za SSR; i ne isporučuje CSS:

• theme-picker — učitava stilske listove tema tijekom izvođenja zamjenom upravljanog <link>, postavlja data-theme na dokumentu i po želji trajno sprema u localStorage.
• locale-picker — postavlja lang i dir (s automatskim otkrivanjem RTL-a) da vaša i18n biblioteka može pratiti; sam ništa ne prevodi.
• text-size-picker — postavlja data-text-size na dokumentu; vaš CSS preslikava svaku vrijednost na veličinu fonta.
• motion-picker — postavlja data-motion na dokumentu, polazeći od posjetiteljeve postavke smanjenog kretanja; vaš CSS i skripte odlučuju što potisnuti.
• search-picker — gumb s ikonom koji otvara polje za pretraživanje; slanje vodi na stranicu pretraživanja. Posjeduje radnju, a ne postavku.
• link-picker — ikona kuće koja otvara izbornik poveznica stranica koje definira vaša aplikacija (Početna, O nama, Kontakt, Pravila privatnosti, …). Posjeduje radnju, a ne postavku.
• share-picker — otvara nativni list za dijeljenje ili popis odredišta koji daje potrošač, plus kopiranje URL-a. Posjeduje radnju, a ne postavku: ništa ne primjenjuje, ništa ne sprema.
• date-time-picker — tekstno polje plus APG dijalog za odabir datuma za datum, vrijeme ili oboje. Posjeduje vrijednost obrasca, a ne postavku: ISO niz pretvara se naprijed-natrag u <input type="date">.

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

Svelte katalog je kanonska referenca; portovi za React, Vue, Angular, HTML, Nunjucks, Web Components i Blazor odgovaraju mu ugovor po ugovor. Pogledajte vodič o pomoćnicima.

Pristupačnost

Komponente ciljaju na WCAG 2.2 AAA. Slijede ove obrasce:

• Semantički HTML elementi umjesto općih <div>s.
• <label for="id"> koji povezuju oznake s ulazima.
• aria-labelledby / aria-describedby za unakrsne reference.
• aria-invalid + aria-errormessage za stanja pogreške.
• role="alert" i aria-live za dinamički sadržaj.
• aria-pressed, aria-expanded, aria-current za stanje.
• Roving tabindex za rešetke.

Pokazatelje fokusa namjerno daje potrošač — Lily nikada ne crta zadani prsten fokusa koji bi se sukobljavao s vašim dizajnom. Primjerne aplikacije održavaju čistu axe-core osnovicu na svim svojim rutama.

Internacionalizacija

Svaka oznaka, rezervirano mjesto, poruka o pogrešci i tekst gumba svojstvo je. Nema tvrdo zapisanih nizova. Uključite framework za prevođenje po svom izboru — Paraglide, i18next, vue-i18n, react-intl, .resx datoteke, bilo što.

Za datume, brojeve i valute komponente primaju unaprijed oblikovane nizove: oblikujete pomoću Intl.DateTimeFormat / Intl.NumberFormat / svoje omiljene biblioteke i prosljeđujete rezultat.

Pomoćnik locale-picker signalizira odabrani lokal vašoj i18n biblioteci postavljanjem lang i dir na korijenu dokumenta.

Testiranje

Svaki podprojekt frameworka isporučuje vlastite testove koristeći svoj idiomatski stack:

• HTML: WebDriverIO koji pokreće stvarne preglednike.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (preko Analog Vite dodatka).
• Nunjucks: Vitest s pomoćnikom za renderiranje.
• Blazor: bUnit.

Testovi koriste samo Vitestove ugrađene matchere — nikada matchere jest-dom . To održava skupove testova prenosivima. Primjerne aplikacije dodaju Playwright end-to-end skupove, axe-core osnovice pristupačnosti i pregled responzivnih viewporta.

AI agenti

Ova stranica objavljuje llms.txt i llms.json u svom korijenu — kuriranu kartu svojih najvažnijih stranica, za bilo koji alat koji slijedi konvenciju llms.txt.

Kanonski monorepozitorij dodatno isporučuje dvije Claude Skills: lily-design-system-skill: općenamjensku vještinu koja pokriva Lilyjeve pojmove, terminologiju i obrasce slaganja za svakoga tko gradi sustavom, i lily-design-system-maintainer-skill, tehničku vještinu koja pokriva raspored obveznih datoteka i alate monorepozitorija za svakoga tko radi na njemu. Obje se nalaze u korijenu kanonskog monorepozitorija.

Rješavanje problema

Doprinos

Lily je mlad i pozdravlja suradnju. Najkorisniji doprinosi trenutno su:

• Nove komponente (osobito obrasci iz uhodanih dizajnerskih sustava).
• Nove teme — svaka je jedan samostalan stilski list, dobro ograničen prvi PR.
• Bolje stiliziranje primjera — pokažite što je moguće.
• Prijevodi nizova primjernih aplikacija.
• Prijave grešaka s minimalnom reprodukcijom.
• Revizije pristupačnosti s čitačima zaslona i pomoćnim tehnologijama.

Otvarajte issue-e i PR-ove na github.com/LilyDesignSystem/lily-design-system.

Zajednica i podrška

• Pitanja i prijave grešaka — otvorite issue na github.com/LilyDesignSystem/lily-design-system.
• E-pošta — održavatelj čita joel@joelparkerhenderson.com i pozdravlja suradnju, smjernice i povratne informacije.
• Zrcala — Lily se također šalje na Codeberg i GitLab, kako biste mogli sudjelovati s forgea koji preferirate.
• Ponašanje — projekt slijedi standardni kodeks ponašanja; budite ljubazni, pretpostavite dobru vjeru.

Česta pitanja