Lilyga alustamine

Paigaldamine

Lily elab ühes Giti monorepos, kus on iga raamistiku päisteta teegi, abipakettide ja näiterakenduse kataloog. Kiireim viis proovida on monorepo kloonida ja avada oma tehnoloogiapaketi päisteta teek:

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

Sama muster töötab teiste raamistike puhul:

• @lilydesignsystem/html-headless – paigaldamist pole vaja; kopeeri .html -failid
• @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

Päisteta teegid on mõeldud kloonimiseks või projekti kaasamiseks – käsitle lähtekoodi tõeallikana ja kopeeri, mida vaja. eelistuste abilised tarnitakse lisaks paigaldatavate pakettidena koos ehitus- ja avaldamistorustikuga (npm JS-raamistikele, NuGet Blazorile).

Päisteta komponendi kasutamine

Päisteta komponendid sisaldavad semantilist HTML-i, ARIA-t ja atribuute – kuid mitte CSS-i. Siin on Button igas raamistikus:

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

Kujundatud näite kasutamine

Näiterakendused sisaldavad CSS-i, marsruute ja täielikke demolehti. Kiireim viis katsetada on käivitada SvelteKit'i, Nexti, Nuxti, Analogi või Eleventy näiterakendus ja vaadata demot aadressil /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

Seejärel ava http://localhost:5173 ja sirvi /components.

Kujundus ja disainitunnused

Iga komponent renderdatakse ühe kebab-case klassiga oma juurelemendil. Näiteks renderdab <Button> elemendi <button class="button">. Kujunda see, nagu soovid:

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

Lily vaikevärvipalett (kasutusel näiterakendustes) on:

• Põhi: #2563eb
• Oht: #dc2626
• Hoiatus: #f59e0b
• Edu: #16a34a
• Lehe taust: #f9fafb
• Kaardi taust: #ffffff

Need on soovitused, mitte nõuded. Asenda need oma brändipaletiga ja Lily kaasneb rõõmuga.

Valmisteemad

Ei taha CSS-i nullist kirjutada? Lily tarnib 57 iseseisvat viiteteemat kataloogis themes/ . Igaüks on üks stiilifail, mis sihib Lily klassihaake – lingi see ja oledki kujundatud:

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

Komplekt hõlmab:

• Avalik sektor – NHS England, NHS Scotland ja NHS Wales (igaüks patsiendi- ja praktiseerija-variandis), GOV.UK GDS ja U.S. Web Design System.
• Müüjatest inspireeritud – Adobe Spectrum, Mozilla Protocol.
• Üldotstarbeline – light, dark, nord, dracula, wireframe ja veel kolmkümmend.

Teemaselektorid kasutavad :where(...), seega võidab sinu enda CSS alati spetsiifilisuses. Seo need allpool oleva theme-picker -abilisega töö ajal vahetamiseks või järgi teemaõpetust.

Eelistuste abilised

Igal raamistikul on kaheksa väikest valijat, millest igaüks on eraldi lily-design-system-{framework}-{package} -pakett (ja picker-bar , mis need kokku paneb). Iga neist on päisteta ikoonnupp, mis avab hüpikakna – loendikasti, linkide loendi, otsinguvormi või (date-time-pickeri puhul) kuupäevavaliku dialoogi – mitte natiivne <select>; on SSR-turvaline; ja ei sisalda CSS-i:

• theme-picker – laeb teema stiilifaile töö ajal, vahetades hallatavat <link>-i, seab data-theme dokumendil ja soovi korral salvestab püsivalt localStorage.
• locale-picker – seab lang ja dir (automaatse RTL-tuvastusega), et sinu i18n-teek saaks järgneda; ei tõlgi ise midagi.
• text-size-picker – seab data-text-size dokumendil; sinu CSS seostab iga väärtuse fondisuurusega.
• motion-picker – seab data-motion dokumendil, lähtudes külastaja vähendatud liikumise seadest; sinu CSS ja skriptid otsustavad, mida alla suruda.
• search-picker – ikoonnupp, mis avab otsinguvälja; esitamine suunab otsingulehele. Haldab toimingut, mitte eelistust.
• link-picker – kodu ikoon, mis avab menüü lehelinkidega, mille sinu rakendus määrab (Avaleht, Meist, Võta ühendust, Privaatsuspoliitika, …). Haldab toimingut, mitte eelistust.
• share-picker – avab natiivse jagamislehe või tarbija antud sihtkohtade loendi, pluss URL-i kopeerimise. Haldab toimingut, mitte eelistust: ei rakenda midagi, ei salvesta midagi.
• date-time-picker – tekstiväli pluss APG kuupäevavaliku dialoog kuupäeva, kellaaja või mõlema jaoks. Haldab vormiväärtust, mitte eelistust: ISO-string teisendub edasi-tagasi <input type="date">.

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

Svelte'i kataloog on kanooniline viide; React, Vue, Angular, HTML, Nunjucks, Web Components ja Blazori pordid vastavad sellele leping lepingu haaval. Vaata abiliste õpetust.

Juurdepääsetavus

Komponendid taotlevad WCAG 2.2 AAAtaset. Nad järgivad neid mustreid:

• Semantilised HTML-elemendid üldiste <div>s.
• <label for="id"> -ide asemel, mis seovad sildid sisenditega.
• aria-labelledby / aria-describedby ristviidete jaoks.
• aria-invalid + aria-errormessage veaolekute jaoks.
• role="alert" ja aria-live dünaamilise sisu jaoks.
• aria-pressed, aria-expanded, aria-current oleku jaoks.
• Liikuv tabindex ruudustike jaoks.

Fookusnäidikud on tahtlikult tarbija antud – Lily ei joonista kunagi vaikefookusrõngast, mis läheks vastuollu sinu disainiga. Näiterakendused hoiavad kõigil marsruutidel puhast axe-core'i baasjoont.

Rahvusvahelistamine

Iga silt, kohatäide, veateade ja nupu tekst on atribuut. Koodi kirjutatud stringe pole. Ühenda oma valitud tõlkeraamistik – Paraglide, i18next, vue-i18n, react-intl, .resx-failid, mis tahes.

Kuupäevade, arvude ja valuutade puhul võtavad komponendid vastu eelvormindatud stringe: vorminda ise Intl.DateTimeFormat / Intl.NumberFormat / oma eelistatud teegiga ja anna tulemus edasi.

Abiline locale-picker annab valitud keele sinu i18n-teegile teada, seades lang ja dir dokumendi juurel.

Testimine

Iga raamistiku alamprojekt tarnib oma teste, kasutades oma idiomaatilist tehnoloogiapaketti:

• HTML: WebDriverIO, mis käivitab päris brausereid.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (Analog Vite'i plugina kaudu).
• Nunjucks: Vitest koos renderdusabilisega.
• Blazor: bUnit.

Testid kasutavad ainult Vitesti sisseehitatud sobitajaid – mitte kunagi jest-dom sobitajaid. See hoiab testikomplektid teisaldatavatena. Näiterakendused lisavad Playwrighti otsast lõpuni komplektid, axe-core'i juurdepääsetavuse baasjooned ja reageeriva vaateakna läbivaatuse.

AI-agendid

See sait avaldab llms.txt ja llms.json oma juurel – kureeritud kaardi oma kõige olulisematest lehtedest, igale tööriistale, mis järgib llms.txt kokkulepet.

Kanooniline monorepo tarnib lisaks kaks Claude Skills: lily-design-system-skill: üldotstarbeline oskus, mis hõlmab Lily mõisteid, terminoloogiat ja koostemustreid kõigile, kes süsteemiga ehitavad, ning lily-design-system-maintainer-skill, tehniline oskus, mis hõlmab monorepo nõutavate failide paigutust ja tööriistu kõigile, kes sellega töötavad. Mõlemad asuvad kanoonilise monorepo juurkataloogis.

Tõrkeotsing

Panustamine

Lily on noor ja tervitab koostööd. Kõige kasulikumad panused praegu on:

• Uued komponendid (eriti mustrid väljakujunenud disainisüsteemidest).
• Uued teemad – iga neist on üks iseseisev stiilifail, hästi piiritletud esimene PR.
• Parem näidete kujundus – näita, mis on võimalik.
• Näiterakenduse stringide tõlked.
• Veaaruanded minimaalse taasesitusega.
• Juurdepääsetavuse auditid ekraanilugejate ja abitehnoloogiaga.

Ava teemad ja PR-id aadressil github.com/LilyDesignSystem/lily-design-system.

Kogukond ja tugi

• Küsimused ja veaaruanded – ava teema aadressil github.com/LilyDesignSystem/lily-design-system.
• E-post – haldaja loeb joel@joelparkerhenderson.com ja tervitab koostööd, juhiseid ja tagasisidet.
• Peeglid – Lily lükatakse ka Codeberg ja GitLabhoidlasse, et saaksid osaleda oma eelistatud forgest.
• Käitumine – projekt järgib tavalist käitumisjuhendit; ole lahke, eelda head usku.

KKK