Prvé kroky s Lily

Inštalácia

Lily žije v jednom monorepozitári Gitu, s adresárom pre bezhlavú knižnicu, balíčky pomocníkov a ukážkovú aplikáciu každého frameworku. Najrýchlejší spôsob, ako to vyskúšať, je naklonovať monorepozitár a otvoriť bezhlavú knižnicu pre váš stack:

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

Rovnaký postup funguje pre ostatné frameworky:

• @lilydesignsystem/html-headless — inštalácia nie je potrebná; skopírujte súbory .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

Bezhlavé knižnice sú navrhnuté tak, aby sa klonovali alebo vendorovali — berte zdrojový kód ako zdroj pravdy a kopírujte, čo potrebujete. pomocníci pre predvoľby sú navyše dodávaní ako inštalovateľné balíčky s reťazcom zostavenia a publikácie (npm pre frameworky JS, NuGet pre Blazor).

Použitie bezhlavého komponentu

Bezhlavé komponenty dodávajú sémantické HTML, ARIA a vlastnosti — ale žiadne CSS. Tu je Button v každom 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" }) }}

Použitie naštýlovaného príkladu

Ukážkové aplikácie obsahujú CSS, trasy a plné ukážkové stránky. Najrýchlejší spôsob experimentovania je spustiť ukážkovú aplikáciu SvelteKit, Next, Nuxt, Analog alebo Eleventy a pozrieť si ukážku 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

Potom otvorte http://localhost:5173 a prehliadajte /components.

Štýlovanie a dizajnové tokeny

Každý komponent sa vykresľuje s jedinou triedou v kebab-case na svojom koreňovom prvku. Napríklad <Button> sa vykreslí ako <button class="button">. Naštýlujte ho, ako chcete:

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

Predvolená farebná paleta Lily (používaná v ukážkových aplikáciách) je:

• Primárna: #2563eb
• Nebezpečenstvo: #dc2626
• Varovanie: #f59e0b
• Úspech: #16a34a
• Pozadie stránky: #f9fafb
• Pozadie karty: #ffffff

Sú to návrhy, nie požiadavky. Nahraďte ich paletou vlastnej značky a Lily sa rád prispôsobí.

Hotové témy

Nechcete písať CSS od nuly? Lily dodáva 57 samostatných referenčných tém v adresári themes/ . Každá je jeden štýlový hárok cieliaci na háčiky tried Lily — prepojte ho a ste naštýlovaní:

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

Sada zahŕňa:

• Verejný sektor — NHS England, NHS Scotland a NHS Wales (každý vo variantoch pre pacientov a pre odborníkov), GOV.UK GDS a U.S. Web Design System.
• Inšpirované dodávateľmi — Adobe Spectrum, Mozilla Protocol.
• Všeobecné použitie — light, dark, nord, dracula, wireframe a ďalších tridsať.

Selektory tém používajú :where(...), takže vaše vlastné CSS vždy vyhráva v špecifickosti. Spárujte ich s pomocníkom theme-picker nižšie na prepínanie za behu, alebo sa riaďte návodom k témam.

Pomocníci pre predvoľby

Každý framework má osem malých výberov, každý je samostatný balíček lily-design-system-{framework}-{package} (a picker-bar , ktorý ich zostavuje). Každý je bezhlavé tlačidlo s ikonou, ktoré otvára vyskakovacie okno — zoznam, zoznam odkazov, vyhľadávací formulár alebo (pri date-time-picker) dialóg výberu dátumu — nie natívne <select>; je bezpečný pre SSR; a nedodáva žiadne CSS:

• theme-picker — načítava štýlové hárky tém za behu výmenou spravovaného <link>, nastavuje data-theme na dokumente a voliteľne ukladá do localStorage.
• locale-picker — nastavuje lang a dir (s automatickou detekciou RTL), aby ho mohla nasledovať vaša knižnica i18n; sám nič neprekladá.
• text-size-picker — nastavuje data-text-size na dokumente; vaše CSS mapuje každú hodnotu na veľkosť písma.
• motion-picker — nastavuje data-motion na dokumente, vychádza z nastavenia obmedzeného pohybu návštevníka; vaše CSS a skripty rozhodujú, čo potlačiť.
• search-picker — tlačidlo s ikonou, ktoré otvára vyhľadávacie pole; odoslanie prejde na stránku hľadania. Vlastní akciu, nie predvoľbu.
• link-picker — ikona domu, ktorá otvára ponuku odkazov na stránky, ktoré vaša aplikácia definuje (Domov, O nás, Kontakt, Zásady ochrany osobných údajov, …). Vlastní akciu, nie predvoľbu.
• share-picker — otvára natívny zdieľací list alebo zoznam cieľov dodaný konzumentom, plus kopírovanie URL. Vlastní akciu, nie predvoľbu: nič neaplikuje, nič neukladá.
• date-time-picker — textové pole plus dialóg výberu dátumu podľa APG pre dátum, čas alebo oboje. Vlastní hodnotu formulára, nie predvoľbu: reťazec ISO sa prevádza tam a späť na <input type="date">.

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

Katalóg Svelte je kanonická referencia; porty pre React, Vue, Angular, HTML, Nunjucks, Web Components a Blazor mu zodpovedajú zmluvu po zmluve. Pozrite návod k pomocníkom.

Prístupnosť

Komponenty cielia na WCAG 2.2 AAA. Riadia sa týmito vzormi:

• Sémantické prvky HTML namiesto všeobecných <div>s.
• <label for="id"> prepájajúcich štítky so vstupmi.
• aria-labelledby / aria-describedby pre krížové odkazy.
• aria-invalid + aria-errormessage pre chybové stavy.
• role="alert" a aria-live pre dynamický obsah.
• aria-pressed, aria-expanded, aria-current pre stav.
• Roving tabindex pre mriežky.

Indikátory fokusu zámerne dodáva konzument — Lily nikdy nevykresľuje predvolený fokusový krúžok, ktorý by kolidoval s vaším dizajnom. Ukážkové aplikácie udržiavajú čistý základ axe-core na všetkých svojich trasách.

Internacionalizácia

Každý štítok, zástupný text, chybové hlásenie a text tlačidla je vlastnosť. Žiadne reťazce zapísané napevno. Zapojte prekladový framework podľa vlastného výberu — Paraglide, i18next, vue-i18n, react-intl, súbory .resx, čokoľvek.

Pre dátumy, čísla a meny komponenty prijímajú predformátované reťazce: formátujete pomocou Intl.DateTimeFormat / Intl.NumberFormat / svojej obľúbenej knižnice a výsledok odovzdáte.

Pomocník locale-picker signalizuje zvolené národné prostredie vašej knižnici i18n nastavením lang a dir na koreni dokumentu.

Testovanie

Každý podprojekt frameworku dodáva vlastné testy využívajúce jeho idiomatický stack:

• HTML: WebDriverIO spúšťajúci skutočné prehliadače.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (cez plugin Vite od Analogu).
• Nunjucks: Vitest s pomocníkom na vykresľovanie.
• Blazor: bUnit.

Testy používajú iba vstavané matchery Vitestu — nikdy matchery jest-dom . To udržiava sady testov prenosné. Ukážkové aplikácie pridávajú sady Playwright end-to-end, základy prístupnosti axe-core a prechod responzívnymi viewportmi.

Agenti AI

Tento web publikuje llms.txt a llms.json vo svojom koreni — kurátorskú mapu svojich najdôležitejších stránok, pre akýkoľvek nástroj, ktorý sa riadi konvenciou llms.txt.

Kanonický monorepozitár navyše dodáva dve Claude Skills: lily-design-system-skill: univerzálnu zručnosť pokrývajúcu pojmy, terminológiu a vzory skladania Lily pre každého, kto so systémom stavia, a lily-design-system-maintainer-skill, technickú zručnosť pokrývajúcu rozloženie povinných súborov a nástroje monorepozitára pre každého, kto na ňom pracuje. Obe ležia v koreni kanonického monorepozitára.

Riešenie problémov

Prispievanie

Lily je mladý a víta spoluprácu. Najužitočnejšie príspevky práve teraz sú:

• Nové komponenty (najmä vzory zo zavedených dizajnových systémov).
• Nové témy — každá je jeden samostatný štýlový hárok, dobre vymedzený prvý PR.
• Lepšie štýlovanie príkladov — ukážte, čo je možné.
• Preklady reťazcov ukážkových aplikácií.
• Hlásenia chýb s minimálnou reprodukciou.
• Audity prístupnosti s čítačkami obrazovky a asistenčnými technológiami.

Otvárajte issue a PR na github.com/LilyDesignSystem/lily-design-system.

Komunita a podpora

• Otázky a hlásenia chýb — otvorte issue na github.com/LilyDesignSystem/lily-design-system.
• E-mail — správca číta joel@joelparkerhenderson.com a víta spoluprácu, vedenie a spätnú väzbu.
• Zrkadlá — Lily sa tiež odosiela na Codeberg a GitLab, takže sa môžete zúčastniť z forge, ktorý uprednostňujete.
• Správanie — projekt sa riadi štandardným kódexom správania; buďte láskaví, predpokladajte dobrú vieru.

FAQ