Začínáme s Lily

Instalace

Lily žije v jednom monorepozitáři Gitu, s adresářem pro bezhlavou knihovnu, balíčky pomocníků a ukázkovou aplikaci každého frameworku. Nejrychlejší způsob, jak to vyzkoušet, je naklonovat monorepozitář a otevřít bezhlavou knihovnu pro váš stack:

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

Stejný postup funguje pro ostatní frameworky:

• @lilydesignsystem/html-headless — instalace není potřeba; zkopírujte soubory .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é knihovny jsou navrženy tak, aby se klonovaly nebo vendorovaly — berte zdrojový kód jako zdroj pravdy a kopírujte, co potřebujete. pomocníci pro předvolby jsou navíc dodáváni jako instalovatelné balíčky s řetězcem sestavení a publikace (npm pro frameworky JS, NuGet pro Blazor).

Použití bezhlavé komponenty

Bezhlavé komponenty dodávají sémantické HTML, ARIA a vlastnosti — ale žádné CSS. Zde je Button v každém 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žití nastylovaného příkladu

Ukázkové aplikace obsahují CSS, trasy a plné ukázkové stránky. Nejrychlejší způsob experimentování je spustit ukázkovou aplikaci SvelteKit, Next, Nuxt, Analog nebo Eleventy a prohlédnout si ukázku 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

Pak otevřete http://localhost:5173 a procházejte /components.

Stylování a návrhové tokeny

Každá komponenta se vykresluje s jedinou třídou v kebab-case na svém kořenovém prvku. Například <Button> se vykreslí jako <button class="button">. Nastylujte ji, jak chcete:

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

Výchozí barevná paleta Lily (používaná v ukázkových aplikacích) je:

• Primární: #2563eb
• Nebezpečí: #dc2626
• Varování: #f59e0b
• Úspěch: #16a34a
• Pozadí stránky: #f9fafb
• Pozadí karty: #ffffff

Jsou to návrhy, ne požadavky. Nahraďte je paletou vlastní značky a Lily se rád přizpůsobí.

Hotové motivy

Nechcete psát CSS od nuly? Lily dodává 57 samostatných referenčních motivů v adresáři themes/ . Každý je jeden stylopis cílící na háčky tříd Lily — odkažte ho a jste nastylováni:

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

Sada zahrnuje:

• Veřejný sektor — NHS England, NHS Scotland a NHS Wales (každý ve variantách pro pacienty a pro odborníky), GOV.UK GDS a U.S. Web Design System.
• Inspirované dodavateli — Adobe Spectrum, Mozilla Protocol.
• Obecné použití — light, dark, nord, dracula, wireframe a dalších třicet.

Selektory motivů používají :where(...), takže vaše vlastní CSS vždy vyhrává ve specifičnosti. Spárujte je s pomocníkem theme-picker níže pro přepínání za běhu, nebo se řiďte návodem k motivům.

Pomocníci pro předvolby

Každý framework má osm malých výběrů, každý je samostatný balíček lily-design-system-{framework}-{package} (a picker-bar , který je sestavuje). Každý je bezhlavé tlačítko s ikonou, které otevírá vyskakovací okno — seznam, seznam odkazů, vyhledávací formulář nebo (u date-time-picker) dialog výběru data — ne nativní <select>; je bezpečný pro SSR; a nedodává žádné CSS:

• theme-picker — načítá stylopisy motivů za běhu výměnou spravovaného <link>, nastavuje data-theme na dokumentu a volitelně ukládá do localStorage.
• locale-picker — nastavuje lang a dir (s automatickou detekcí RTL), aby ho mohla následovat vaše knihovna i18n; sám nic nepřekládá.
• text-size-picker — nastavuje data-text-size na dokumentu; vaše CSS mapuje každou hodnotu na velikost písma.
• motion-picker — nastavuje data-motion na dokumentu, vychází z nastavení omezeného pohybu návštěvníka; vaše CSS a skripty rozhodují, co potlačit.
• search-picker — tlačítko s ikonou, které otevírá vyhledávací pole; odeslání přejde na stránku hledání. Vlastní akci, ne předvolbu.
• link-picker — ikona domu, která otevírá nabídku odkazů na stránky, které vaše aplikace definuje (Domů, O nás, Kontakt, Zásady ochrany soukromí, …). Vlastní akci, ne předvolbu.
• share-picker — otevírá nativní sdílecí list nebo seznam cílů dodaný konzumentem, plus kopírování URL. Vlastní akci, ne předvolbu: nic neaplikuje, nic neukládá.
• date-time-picker — textové pole plus dialog výběru data podle APG pro datum, čas nebo obojí. Vlastní hodnotu formuláře, ne předvolbu: řetězec ISO se převádí tam a zpět na <input type="date">.

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

Katalog Svelte je kanonická reference; porty pro React, Vue, Angular, HTML, Nunjucks, Web Components a Blazor mu odpovídají smlouvu po smlouvě. Viz návod k pomocníkům.

Přístupnost

Komponenty míří na WCAG 2.2 AAA. Řídí se těmito vzory:

• Sémantické prvky HTML místo obecných <div>s.
• <label for="id"> propojující štítky se vstupy.
• aria-labelledby / aria-describedby pro křížové odkazy.
• aria-invalid + aria-errormessage pro chybové stavy.
• role="alert" a aria-live pro dynamický obsah.
• aria-pressed, aria-expanded, aria-current pro stav.
• Roving tabindex pro mřížky.

Indikátory fokusu záměrně dodává konzument — Lily nikdy nevykresluje výchozí fokusový kroužek, který by kolidoval s vaším návrhem. Ukázkové aplikace udržují čistý základ axe-core na všech svých trasách.

Internacionalizace

Každý štítek, zástupný text, chybová zpráva a text tlačítka je vlastnost. Žádné řetězce zapsané napevno. Zapojte překladový framework dle vlastní volby — Paraglide, i18next, vue-i18n, react-intl, soubory .resx, cokoli.

Pro data, čísla a měny komponenty přijímají předformátované řetězce: formátujete pomocí Intl.DateTimeFormat / Intl.NumberFormat / své oblíbené knihovny a výsledek předáte.

Pomocník locale-picker signalizuje zvolené národní prostředí vaší knihovně i18n nastavením lang a dir na kořeni dokumentu.

Testování

Každý podprojekt frameworku dodává vlastní testy využívající jeho idiomatický stack:

• HTML: WebDriverIO spouštějící skutečné prohlížeče.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (přes plugin Vite od Analogu).
• Nunjucks: Vitest s pomocníkem pro vykreslování.
• Blazor: bUnit.

Testy používají pouze vestavěné matchery Vitestu — nikdy matchery jest-dom . To udržuje sady testů přenosné. Ukázkové aplikace přidávají sady Playwright end-to-end, základy přístupnosti axe-core a průchod responzivními viewporty.

Agenti AI

Tento web publikuje llms.txt a llms.json ve svém kořeni — kurátorskou mapu svých nejdůležitějších stránek, pro jakýkoli nástroj, který se řídí konvencí llms.txt.

Kanonický monorepozitář navíc dodává dvě Claude Skills: lily-design-system-skill: univerzální dovednost pokrývající pojmy, terminologii a vzory skládání Lily pro každého, kdo se systémem staví, a lily-design-system-maintainer-skill, technickou dovednost pokrývající rozvržení povinných souborů a nástroje monorepozitáře pro každého, kdo na něm pracuje. Obě leží v kořeni kanonického monorepozitáře.

Řešení potíží

Přispívání

Lily je mladý a vítá spolupráci. Nejužitečnější příspěvky právě teď jsou:

• Nové komponenty (zejména vzory z zavedených návrhových systémů).
• Nové motivy — každý je jeden samostatný stylopis, dobře vymezený první PR.
• Lepší stylování příkladů — ukažte, co je možné.
• Překlady řetězců ukázkových aplikací.
• Hlášení chyb s minimální reprodukcí.
• Audity přístupnosti se čtečkami obrazovky a asistivními technologiemi.

Otevírejte issue a PR na github.com/LilyDesignSystem/lily-design-system.

Komunita a podpora

• Otázky a hlášení chyb — otevřete issue na github.com/LilyDesignSystem/lily-design-system.
• E-mail — správce čte joel@joelparkerhenderson.com a vítá spolupráci, vedení a zpětnou vazbu.
• Zrcadla — Lily je také odesílán na Codeberg a GitLab, takže se můžete účastnit z forge, který preferujete.
• Chování — projekt se řídí standardním kodexem chování; buďte laskaví, předpokládejte dobrou víru.

FAQ