Primii pași cu Lily

Instalare

Lily trăiește într-un singur monorepo Git, cu un director pentru biblioteca headless, pachetele de ajutor și aplicația-exemplu ale fiecărui framework. Cea mai rapidă cale de a-l încerca este să clonezi monorepo-ul și să deschizi biblioteca headless pentru stack-ul tău:

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

Același tipar funcționează și pentru celelalte framework-uri:

• @lilydesignsystem/html-headless — nu e nevoie de instalare; copiază fișierele .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

Bibliotecile headless sunt concepute pentru a fi clonate sau incluse în proiect — tratează sursa ca sursă a adevărului și copiază ce îți trebuie. ajutoarele pentru preferințe sunt livrate suplimentar ca pachete instalabile, cu un flux de build și publicare (npm pentru framework-urile JS, NuGet pentru Blazor).

Folosește o componentă headless

Componentele headless oferă HTML semantic, ARIA și proprietăți — dar niciun CSS. Iată un Button în fiecare 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" }) }}

Folosește un exemplu stilizat

Aplicațiile-exemplu includ CSS, rute și pagini demo complete. Cea mai rapidă cale de a experimenta este să pornești aplicația-exemplu SvelteKit, Next, Nuxt, Analog sau Eleventy și să vezi demo-ul la /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

Apoi deschide http://localhost:5173 și răsfoiește /components.

Stilizare și tokenuri de design

Fiecare componentă se randează cu o singură clasă în kebab-case pe elementul rădăcină. De exemplu, <Button> se randează ca <button class="button">. Stilizează-o cum dorești:

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

Paleta de culori implicită Lily (folosită în aplicațiile-exemplu) este:

• Primar: #2563eb
• Pericol: #dc2626
• Avertisment: #f59e0b
• Succes: #16a34a
• Fundalul paginii: #f9fafb
• Fundalul cardului: #ffffff

Acestea sunt sugestii, nu cerințe. Înlocuiește-le cu paleta propriului brand și Lily te urmează bucuros.

Teme gata făcute

Nu vrei să scrii CSS de la zero? Lily include 57 de teme de referință independente în directorul themes/ . Fiecare este o foaie de stil care țintește cârligele de clasă Lily — leag-o și ești stilizat:

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

Setul cuprinde:

• Sector public — NHS England, NHS Scotland și NHS Wales (fiecare în variante pentru pacienți și pentru practicieni), GOV.UK GDS și U.S. Web Design System.
• Inspirate de furnizori — Adobe Spectrum, Mozilla Protocol.
• Uz general — light, dark, nord, dracula, wireframe și încă vreo treizeci.

Selectorii temelor folosesc :where(...), deci propriul tău CSS câștigă mereu la specificitate. Asociază-le cu ajutorul theme-picker de mai jos pentru schimbare la rulare sau urmează tutorialul despre teme.

Ajutoare pentru preferințe

Fiecare framework are opt selectoare mici, fiecare un pachet lily-design-system-{framework}-{package} propriu (și un picker-bar care le asamblează). Fiecare este un buton-pictogramă headless care deschide o fereastră pop-up — o casetă de listă, o listă de linkuri, un formular de căutare sau (pentru date-time-picker) un dialog de selectare a datei — nu un <select>nativ; este sigur pentru SSR; și nu include CSS:

• theme-picker — încarcă foile de stil ale temelor la rulare schimbând un <link>gestionat, setează data-theme pe document și, opțional, salvează persistent în localStorage.
• locale-picker — setează lang și dir (cu detectare automată RTL) pentru ca biblioteca ta i18n să poată urma; nu traduce nimic singur.
• text-size-picker — setează data-text-size pe document; CSS-ul tău asociază fiecare valoare cu o dimensiune a fontului.
• motion-picker — setează data-motion pe document, pornind de la setarea de mișcare redusă a vizitatorului; CSS-ul și scripturile tale decid ce se suprimă.
• search-picker — un buton-pictogramă care deschide un câmp de căutare; trimiterea navighează la o pagină de căutare. Deține o acțiune, nu o preferință.
• link-picker — o pictogramă de casă care deschide un meniu cu linkurile de pagină definite de aplicația ta (Acasă, Despre noi, Contact, Politica de confidențialitate, …). Deține o acțiune, nu o preferință.
• share-picker — deschide foaia nativă de partajare sau o listă de destinații furnizată de consumator, plus copierea URL-ului. Deține o acțiune, nu o preferință: nu aplică nimic, nu salvează nimic.
• date-time-picker — un câmp de text plus un dialog APG de selectare a datei pentru o dată, o oră sau ambele. Deține o valoare de formular, nu o preferință: șirul ISO se convertește dus-întors în <input type="date">.

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

Catalogul Svelte este referința canonică; porturile React, Vue, Angular, HTML, Nunjucks, Web Components și Blazor îl respectă contract cu contract. Vezi tutorialul despre ajutoare.

Accesibilitate

Componentele țintesc WCAG 2.2 AAA. Urmează aceste modele:

• Elemente HTML semantice în loc de <div>s.
• <label for="id"> generice, care leagă etichetele de câmpuri.
• aria-labelledby / aria-describedby pentru trimiteri încrucișate.
• aria-invalid + aria-errormessage pentru stări de eroare.
• role="alert" și aria-live pentru conținut dinamic.
• aria-pressed, aria-expanded, aria-current pentru stare.
• Roving tabindex pentru grile.

Indicatorii de focalizare sunt furnizați intenționat de consumator — Lily nu desenează niciodată un inel de focalizare implicit care să intre în conflict cu designul tău. Aplicațiile-exemplu mențin o linie de bază axe-core curată pe toate rutele lor.

Internaționalizare

Fiecare etichetă, substituent, mesaj de eroare și text de buton este o proprietate. Nu există șiruri scrise direct în cod. Conectează framework-ul de traducere preferit — Paraglide, i18next, vue-i18n, react-intl, fișiere .resx, orice.

Pentru date, numere și valute, componentele acceptă șiruri preformatate: tu formatezi cu Intl.DateTimeFormat / Intl.NumberFormat / biblioteca ta preferată și transmiți rezultatul.

Ajutorul locale-picker semnalează localizarea aleasă bibliotecii tale i18n setând lang și dir pe rădăcina documentului.

Testare

Fiecare subproiect de framework livrează propriile teste, folosind stack-ul său idiomatic:

• HTML: WebDriverIO care rulează browsere reale.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (prin pluginul Vite Analog).
• Nunjucks: Vitest cu un ajutor de randare.
• Blazor: bUnit.

Testele folosesc doar potrivitorii încorporați ai Vitest — niciodată potrivitorii jest-dom . Aceasta păstrează suitele de teste portabile. Aplicațiile-exemplu adaugă suite end-to-end Playwright, linii de bază de accesibilitate axe-core și o parcurgere a viewport-urilor responsive.

Agenți AI

Acest site publică llms.txt și llms.json la rădăcina sa — o hartă selectată a celor mai importante pagini, pentru orice instrument care urmează convenția llms.txt.

Monorepo-ul canonic livrează în plus două Claude Skills: lily-design-system-skill: o competență de uz general care acoperă conceptele, terminologia și modelele de compoziție ale Lily pentru oricine construiește cu sistemul, și lily-design-system-maintainer-skill, o competență tehnică care acoperă structura fișierelor obligatorii și instrumentele monorepo-ului pentru oricine lucrează la el. Ambele se află la rădăcina monorepo-ului canonic.

Depanare

Contribuie

Lily este tânăr și primește cu drag colaborarea. Cele mai utile contribuții acum sunt:

• Componente noi (mai ales modele din sisteme de design consacrate).
• Teme noi — fiecare este o foaie de stil autonomă, un prim PR bine delimitat.
• Stilizare mai bună a exemplelor — arată ce este posibil.
• Traduceri ale șirurilor aplicațiilor-exemplu.
• Rapoarte de erori cu o reproducere minimă.
• Audituri de accesibilitate cu cititoare de ecran și tehnologii de asistență.

Deschide issue-uri și PR-uri la github.com/LilyDesignSystem/lily-design-system.

Comunitate și asistență

• Întrebări și rapoarte de erori — deschide un issue la github.com/LilyDesignSystem/lily-design-system.
• E-mail — responsabilul citește joel@joelparkerhenderson.com și primește cu drag colaborare, îndrumare și feedback.
• Oglinzi — Lily este trimis și către Codeberg și GitLab, ca să poți participa din forja preferată.
• Conduită — proiectul urmează un cod de conduită standard; fii amabil, presupune bună-credință.

FAQ