Byrjað með Lily

Uppsetning

Lily býr í einu Git-einrepói, með möppu fyrir höfuðlausa safn, hjálparpakka og dæmaforrit hvers ramma. Fljótlegasta leiðin til að prófa er að klóna einrepóið og opna höfuðlausa safnið fyrir þinn ramma:

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

Sama mynstur gildir fyrir hina rammana:

• @lilydesignsystem/html-headless — engin uppsetning nauðsynleg; afritaðu .html skrárnar
• @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

Höfuðlausu söfnin eru hönnuð til að vera klónuð eða tekin inn — líttu á upprunann sem sannleiksgjafa og afritaðu það sem þú þarft. stillingahjálpartækin koma auk þess sem uppsetjanlegir pakkar með byggingar- og útgáfuferli (npm fyrir JS-ramma, NuGet fyrir Blazor).

Notaðu höfuðlausan íhlut

Höfuðlausir íhlutir koma með merkingarfræðilegu HTML, ARIA og eiginleikum — en ekkert CSS. Hér er Button í hverjum ramma:

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

Notaðu stílað dæmi

Dæmaforritin innihalda CSS, leiðir og fullar sýnisíður. Fljótlegasta leiðin til að gera tilraunir er að ræsa SvelteKit-, Next-, Nuxt-, Analog- eða Eleventy-dæmaforritið og skoða sýnið á /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

Opnaðu svo http://localhost:5173 og skoðaðu /components.

Stílun og hönnunargildi

Hver íhlutur birtist með einum kebab-case klasa á rótarþættinum. Til dæmis <Button> birtir <button class="button">. Stílaðu hann eins og þú vilt:

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

Sjálfgefið Lily-litaspjald (notað í dæmaforritunum) er:

• Aðallitur: #2563eb
• Hætta: #dc2626
• Viðvörun: #f59e0b
• Árangur: #16a34a
• Bakgrunnur síðu: #f9fafb
• Bakgrunnur korts: #ffffff

Þetta eru tillögur, ekki kröfur. Skiptu þeim út fyrir þitt eigið vörumerkjalitaspjald og Lily fylgir með glöð.

Tilbúin þemu

Viltu ekki skrifa CSS frá grunni? Lily inniheldur 57 sjálfstæð viðmiðunarþemu í möppunni themes/ . Hvert er eitt stílblað sem miðar á Lily-klasakrókana — tengdu það og þú ert stíluð(ur):

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

Settið nær yfir:

• Opinber geiri — NHS England, NHS Scotland og NHS Wales (útgáfur fyrir sjúklinga og fagfólk hvert), GOV.UK GDS og U.S. Web Design System.
• Innblásið af söluaðilum — Adobe Spectrum, Mozilla Protocol.
• Almenn notkun — light, dark, nord, dracula, wireframe og þrjátíu til viðbótar.

Þemaveljarar nota :where(...), svo þitt eigið CSS vinnur alltaf á sértækni. Paraðu þau við hjálpartækið theme-picker hér að neðan fyrir skipti á keyrslutíma, eða fylgdu þemakennsluefni.

Stillingahjálpartæki

Hver rammi er með átta litla veljara, hver sinn eigin lily-design-system-{framework}-{package} pakka (og picker-bar sem setur þá saman). Hver er höfuðlaus táknhnappur sem opnar sprettglugga — valmöguleikalista, tengla, leitarform eða (fyrir date-time-picker) dagsetningarvalsglugga — ekki innbyggt <select>; er SSR-öruggur; og kemur án CSS:

• theme-picker — hleður þemastílblöðum á keyrslutíma með því að skipta um stýrt <link>, setur data-theme á skjalið og vistar valfrjálst í localStorage.
• locale-picker — setur lang og dir (með sjálfvirkri RTL-greiningu) svo i18n-safnið þitt geti fylgt; framkvæmir enga þýðingu sjálft.
• text-size-picker — setur data-text-size á skjalinu; CSS-ið þitt varpar hverju gildi á leturstærð.
• motion-picker — setur data-motion á skjalinu, með upphafsgildi úr stillingu gesta um minni hreyfingu; CSS og skriftur þínar ákveða hvað er bælt.
• search-picker — táknhnappur sem opnar leitarreit; innsending leiðir á leitarsíðu. Á aðgerð, ekki stillingu.
• link-picker — heimatákn sem opnar valmynd með síðutenglum sem forritið þitt skilgreinir (Heim, Um okkur, Hafðu samband, Persónuverndarstefna, …). Á aðgerð, ekki stillingu.
• share-picker — opnar innbyggðan deilingarglugga eða lista yfir áfangastaði frá notanda, auk þess að afrita vefslóð. Á aðgerð, ekki stillingu: beitir engu, vistar ekkert.
• date-time-picker — textareitur auk APG-dagsetningarvalsglugga fyrir dagsetningu, tíma eða hvort tveggja. Á formgildi, ekki stillingu: ISO-strengurinn fer fram og til baka til <input type="date">.

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

Svelte-safnið er kjarnaviðmiðið; React-, Vue-, Angular-, HTML-, Nunjucks-, Web Components- og Blazor-færslur samsvara því samningur fyrir samning. Sjá hjálpartækjakennsluefni.

Aðgengi

Íhlutir miða við WCAG 2.2 AAA. Þeir fylgja þessum mynstrum:

• Merkingarfræðilega HTML-þætti frekar en almenna <div>s.
• <label for="id"> sem tengja merkimiða við innslætti.
• aria-labelledby / aria-describedby fyrir víxlvísanir.
• aria-invalid + aria-errormessage fyrir villustöður.
• role="alert" og aria-live fyrir kvikt efni.
• aria-pressed, aria-expanded, aria-current fyrir stöðu.
• Roving tabindex fyrir ristir.

Fókusvísar eru viljandi í höndum notandans — Lily málar aldrei sjálfgefinn fókushring sem rekst á hönnun þína. Dæmaforritin halda hreinni axe-core grunnlínu á öllum leiðum sínum.

Alþjóðavæðing

Hver merkimiði, staðgengiltexti, villuskilaboð og hnappatexti er eiginleiki. Enginn textastrengur er harðkóðaður. Notaðu þýðingarrammann að eigin vali — Paraglide, i18next, vue-i18n, react-intl, .resx-skrár, hvað sem er.

Fyrir dagsetningar, tölur og gjaldmiðla taka íhlutirnir við forsniðnum strengjum: þú sniðgerir með Intl.DateTimeFormat / Intl.NumberFormat / safninu sem þú kýst og sendir niðurstöðuna.

Hjálpartækið locale-picker gefur i18n-safninu þínu til kynna valda staðfærslu með því að stilla lang og dir á rót skjalsins.

Prófanir

Hvert rammaundirverkefni sendir sín eigin próf með eigin hefðbundnu tækjum:

• HTML: WebDriverIO sem keyrir raunverulega vafra.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (í gegnum Analog Vite-viðbótina).
• Nunjucks: Vitest með birtingarhjálp.
• Blazor: bUnit.

Próf nota aðeins innbyggða samsvörun Vitest — aldrei jest-dom samsvörun. Þetta heldur prófasöfnunum færanlegum. Dæmaforritin bæta við Playwright-prófum frá enda til enda, axe-core aðgengisgrunnlínum og sjónarhornakönnun.

Gervigreindarfulltrúar

Þessi vefur gefur út llms.txt og llms.json í rótinni — vandað kort yfir mikilvægustu síður hans, fyrir hvaða tól sem fylgir llms.txt-venjunni.

Hið kanóníska einrepó sendir að auki tvö Claude-skill: lily-design-system-skill, almenn færni sem nær yfir hugtök, orðaforða og samsetningarmynstur Lily fyrir alla sem byggja með kerfinu, og lily-design-system-maintainer-skill, tæknileg færni sem nær yfir nauðsynlegt skráaskipulag og tól einrepósins fyrir alla sem vinna í því. Bæði eru í rót kanóníska einrepósins.

Bilanaleit

Að leggja til

Lily er ungt og tekur fagnandi samstarfi. Gagnlegustu framlögin núna eru:

• Nýir íhlutir (sérstaklega mynstur úr rótgrónum hönnunarkerfum).
• Ný þemu — hvert er eitt sjálfstætt stílblað, vel afmörkuð fyrsta sameiningarbeiðni.
• Betri stíll dæmaforrita — sýndu hvað er hægt.
• Þýðingar á textum dæmaforrita.
• Villuskýrslur með lágmarksendurgerð.
• Aðgengisúttektir með skjálesurum og hjálpartækni.

Opnaðu vandamál og sameiningarbeiðnir á github.com/LilyDesignSystem/lily-design-system.

Samfélag og stuðningur

• Spurningar og villuskýrslur — opnaðu vandamál á github.com/LilyDesignSystem/lily-design-system.
• Tölvupóstur — umsjónarmaðurinn les joel@joelparkerhenderson.com og tekur fagnandi samstarfi, leiðsögn og endurgjöf.
• Speglar — Lily er einnig send á Codeberg og GitLab, svo þú getir tekið þátt frá þeirri forge-þjónustu sem þú kýst.
• Hegðun — verkefnið fylgir hefðbundnum siðareglum; vertu vingjarnleg(ur), gerðu ráð fyrir góðum ásetningi.

Algengar spurningar