Prvi koraki z Lily

Namestitev

Lily živi v enem monorepozitoriju Git, z mapo za brezglavo knjižnico, pomožne pakete in vzorčno aplikacijo vsakega ogrodja. Najhitrejši način za preizkus je klonirati monorepozitorij in odpreti brezglavo knjižnico za svoj sklad:

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

Enak vzorec deluje za druga ogrodja:

• @lilydesignsystem/html-headless — namestitev ni 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

Brezglave knjižnice so zasnovane za kloniranje ali vključitev v projekt — vzemite izvorno kodo kot vir resnice in kopirajte, kar potrebujete. pomočniki za nastavitve se dodatno dobavljajo kot namestljivi paketi s cevovodom za gradnjo in objavo (npm za ogrodja JS, NuGet za Blazor).

Uporaba brezglave komponente

Brezglave komponente dobavljajo semantični HTML, ARIA in lastnosti — a ne CSS. Tu je Button v vsakem ogrodju:

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

Uporaba stiliziranega primera

Vzorčne aplikacije vključujejo CSS, poti in popolne predstavitvene strani. Najhitrejši način za eksperimentiranje je zagnati vzorčno aplikacijo SvelteKit, Next, Nuxt, Analog ali Eleventy in si ogledati predstavitev 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

Nato odprite http://localhost:5173 in brskajte po /components.

Stiliziranje in oblikovalski žetoni

Vsaka komponenta se upodobi z enim razredom v kebab-case na svojem korenskem elementu. Na primer, <Button> se upodobi kot <button class="button">. Stilizirajte ga, kakor želite:

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

Privzeta barvna paleta Lily (uporabljena v vzorčnih aplikacijah) je:

• Primarna: #2563eb
• Nevarnost: #dc2626
• Opozorilo: #f59e0b
• Uspeh: #16a34a
• Ozadje strani: #f9fafb
• Ozadje kartice: #ffffff

To so predlogi, ne zahteve. Zamenjajte jih s paleto lastne blagovne znamke in Lily vas z veseljem spremlja.

Pripravljene teme

Ne želite pisati CSS od začetka? Lily dobavlja 57 samostojnih referenčnih tem v mapi themes/ . Vsaka je ena slogovna datoteka, ki cilja na kavlje razredov Lily — povežite jo in ste stilizirani:

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

Nabor zajema:

• Javni sektor — NHS England, NHS Scotland in NHS Wales (vsaka v različicah za bolnike in za strokovnjake), GOV.UK GDS in U.S. Web Design System.
• Navdahnjeno z dobavitelji — Adobe Spectrum, Mozilla Protocol.
• Splošna uporaba — light, dark, nord, dracula, wireframe in še trideset drugih.

Izbirniki tem uporabljajo :where(...), zato vaš lasten CSS vedno zmaga po specifičnosti. Povežite jih s pomočnikom theme-picker spodaj za preklapljanje med izvajanjem ali sledite vodiču o temah.

Pomočniki za nastavitve

Vsako ogrodje ima osem majhnih izbirnikov, vsak je ločen paket lily-design-system-{framework}-{package} (in en picker-bar , ki jih sestavi). Vsak je brezglav gumb z ikono, ki odpre pojavno okno — seznamsko polje, seznam povezav, iskalni obrazec ali (za date-time-picker) pogovorno okno za izbiro datuma — ne izvorni <select>; je varen za SSR; in ne dobavlja CSS:

• theme-picker — med izvajanjem naloži slogovne datoteke tem z zamenjavo upravljanega <link>, nastavi data-theme na dokumentu in po želji trajno shrani v localStorage.
• locale-picker — nastavi lang in dir (s samodejnim zaznavanjem RTL), da lahko vaša knjižnica i18n sledi; sam ničesar ne prevaja.
• text-size-picker — nastavi data-text-size na dokumentu; vaš CSS preslika vsako vrednost v velikost pisave.
• motion-picker — nastavi data-motion na dokumentu, izhajajoč iz obiskovalčeve nastavitve zmanjšanega gibanja; vaš CSS in skripti odločajo, kaj zatreti.
• search-picker — gumb z ikono, ki odpre iskalno polje; oddaja vodi na iskalno stran. Lasti dejanje, ne nastavitve.
• link-picker — ikona hiše, ki odpre meni povezav strani, ki jih določa vaša aplikacija (Domov, O nas, Stik, Politika zasebnosti, …). Lasti dejanje, ne nastavitve.
• share-picker — odpre izvorni list za deljenje ali seznam ciljev, ki ga priskrbi uporabnik, poleg kopiranja URL. Lasti dejanje, ne nastavitve: ničesar ne uveljavi, ničesar ne shrani.
• date-time-picker — besedilno polje poleg pogovornega okna za izbiro datuma po APG za datum, čas ali oboje. Lasti vrednost obrazca, ne nastavitve: niz ISO se pretvarja tja in nazaj v <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 kanonična referenca; vrata za React, Vue, Angular, HTML, Nunjucks, Web Components in Blazor mu ustrezajo pogodbo za pogodbo. Glejte vodič o pomočnikih.

Dostopnost

Komponente ciljajo na WCAG 2.2 AAA. Sledijo tem vzorcem:

• Semantični elementi HTML namesto splošnih <div>s.
• <label for="id"> ki povezujejo oznake z vnosi.
• aria-labelledby / aria-describedby za navzkrižna sklicevanja.
• aria-invalid + aria-errormessage za stanja napak.
• role="alert" in aria-live za dinamično vsebino.
• aria-pressed, aria-expanded, aria-current za stanje.
• Roving tabindex za mreže.

Kazalnike fokusa namerno priskrbi uporabnik — Lily nikoli ne nariše privzetega obroča fokusa, ki bi bil v nasprotju z vašim oblikovanjem. Vzorčne aplikacije ohranjajo čisto izhodišče axe-core na vseh svojih poteh.

Internacionalizacija

Vsaka oznaka, nadomestno besedilo, sporočilo o napaki in besedilo gumba je lastnost. Trdo zapisanih nizov ni. Vključite ogrodje za prevajanje po svoji izbiri — Paraglide, i18next, vue-i18n, react-intl, datoteke .resx, karkoli.

Za datume, števila in valute komponente sprejemajo vnaprej oblikovane nize: oblikujete z Intl.DateTimeFormat / Intl.NumberFormat / svojo najljubšo knjižnico in rezultat podate naprej.

Pomočnik locale-picker sporoči izbrani jezik vaši knjižnici i18n z nastavitvijo lang in dir na korenu dokumenta.

Testiranje

Vsak podprojekt ogrodja dobavlja lastne teste z njegovim idiomatskim skladom:

• HTML: WebDriverIO, ki poganja prave brskalnike.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (prek vtičnika Vite od Analog).
• Nunjucks: Vitest s pomočnikom za upodabljanje.
• Blazor: bUnit.

Testi uporabljajo samo vgrajene primerjalnike Vitest — nikoli primerjalnikov jest-dom . To ohranja skupke testov prenosljive. Vzorčne aplikacije dodajo skupke Playwright od konca do konca, izhodišča dostopnosti axe-core in pregled odzivnih okenskih pogledov.

Agenti UI

To spletno mesto objavlja llms.txt in llms.json v svojem korenu — urejen zemljevid svojih najpomembnejših strani, za vsako orodje, ki sledi konvenciji llms.txt.

Kanonični monorepozitorij dodatno dobavlja dve Claude Skills: lily-design-system-skill: splošno znanje, ki pokriva pojme, terminologijo in vzorce sestavljanja Lily za vsakogar, ki gradi s sistemom, in lily-design-system-maintainer-skill, tehnično znanje, ki pokriva postavitev obveznih datotek in orodja monorepozitorija za vsakogar, ki dela na njem. Obe sta v korenu kanoničnega monorepozitorija.

Odpravljanje težav

Prispevanje

Lily je mlad in pozdravlja sodelovanje. Najkoristnejši prispevki zdaj so:

• Nove komponente (zlasti vzorci iz uveljavljenih oblikovalskih sistemov).
• Nove teme — vsaka je ena samostojna slogovna datoteka, dobro omejen prvi PR.
• Boljše stiliziranje primerov — pokažite, kaj je mogoče.
• Prevodi nizov vzorčnih aplikacij.
• Poročila o napakah z minimalno ponovitvijo.
• Revizije dostopnosti z bralniki zaslona in podpornimi tehnologijami.

Odpirajte issue in PR na github.com/LilyDesignSystem/lily-design-system.

Skupnost in podpora

• Vprašanja in poročila o napakah — odprite issue na github.com/LilyDesignSystem/lily-design-system.
• E-pošta — vzdrževalec bere joel@joelparkerhenderson.com in pozdravlja sodelovanje, usmeritve in povratne informacije.
• Zrcala — Lily se potisne tudi na Codeberg in GitLab, da lahko sodelujete iz foruma, ki ga imate raje.
• Vedenje — projekt sledi standardnemu kodeksu ravnanja; bodite prijazni, predpostavljajte dobro voljo.

Pogosta vprašanja