Kuanza na Lily

Sakinisha

Lily iko kwenye hifadhi kuu moja ya Git, yenye saraka kwa kila maktaba isiyo na mwonekano ya mfumo wa kazi, vifurushi vya visaidizi na programu ya mifano. Njia ya haraka zaidi ya kujaribu ni kunakili hifadhi kuu na kufungua maktaba isiyo na mwonekano ya mfumo wako:

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

Mchoro uleule unafanya kazi kwa mifumo mingine ya kazi:

• @lilydesignsystem/html-headless — hakuna usakinishaji unaohitajika; nakili .html faili
• @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

Maktaba zisizo na mwonekano zimeundwa ziigwe au zichukuliwe moja kwa moja — chukulia msimbo chanzo kama chanzo cha ukweli na nakili unachohitaji. visaidizi vya mapendeleo pia hutolewa kama vifurushi vinavyoweza kusakinishwa vyenye mfumo wa ujenzi na uchapishaji (npm kwa mifumo ya JS, NuGet kwa Blazor).

Tumia kipengele kisicho na mwonekano

Vipengele visivyo na mwonekano hutoa HTML ya kisemantiki, ARIA, na sifa — lakini hakuna CSS. Hii hapa Button katika kila mfumo wa kazi:

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

Tumia mfano wenye mapambo

Programu za mifano zinajumuisha CSS, njia, na kurasa kamili za maonyesho. Njia ya haraka zaidi ya kujaribu ni kuanzisha programu ya mifano ya SvelteKit, Next, Nuxt, Analog, au Eleventy na kutazama onyesho kwenye /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

Kisha fungua http://localhost:5173 na pitia /components.

Mapambo na tokeni za usanifu

Kila kipengele huonyeshwa kwa darasa moja la herufi ndogo zilizotenganishwa kwa kistari kwenye kipengele chake cha mzizi. Kwa mfano, <Button> huonyesha <button class="button">. Pamba upendavyo:

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

Paleti chaguo-msingi ya rangi ya Lily (inayotumika kwenye programu za mifano) ni:

• Msingi: #2563eb
• Hatari: #dc2626
• Onyo: #f59e0b
• Mafanikio: #16a34a
• Mandharinyuma ya ukurasa: #f9fafb
• Mandharinyuma ya kadi: #ffffff

Haya ni mapendekezo, si masharti. Yabadilishe na paleti ya chapa yako mwenyewe na Lily itaenda nawe kwa furaha.

Mandhari yaliyo tayari

Hutaki kuandika CSS tangu mwanzo? Lily inakuja na mandhari 57 huru ya marejeo kwenye saraka ya themes/ . Kila moja ni karatasi moja ya mitindo inayolenga vishikio vya darasa vya Lily — iunganishe na umepambwa:

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

Seti hii inahusu:

• Sekta ya umma — NHS England, NHS Scotland, na NHS Wales (matoleo ya wagonjwa na ya watendaji kwa kila moja), GOV.UK GDS, na U.S. Web Design System.
• Yaliyochochewa na wauzaji — Adobe Spectrum, Mozilla Protocol.
• Matumizi ya jumla — light, dark, nord, dracula, wireframe, na zaidi ya thelathini mengine.

Vichaguzi vya mandhari hutumia :where(...), hivyo CSS yako mwenyewe daima hushinda kwa umaalum. Viunganishe na kisaidizi cha theme-picker hapa chini kwa kubadili wakati wa utekelezaji, au fuata somo la mandhari.

Visaidizi vya mapendeleo

Kila mfumo wa kazi una vichaguzi vidogo vinane, kila kimoja kikiwa na lily-design-system-{framework}-{package} chake (na picker-bar inayovikusanya). Kila kimoja ni kitufe cha ikoni kisicho na mwonekano kinachofungua dirisha ibukizi — kisanduku cha orodha, orodha ya viungo, fomu ya utafutaji, au (kwa date-time-picker) kisanduku cha mazungumzo cha kuchagua tarehe — si <select>asilia; ni salama kwa SSR; na hakina CSS:

• theme-picker — hupakia karatasi za mitindo za mandhari wakati wa utekelezaji kwa kubadilisha <link>inayosimamiwa, huweka data-theme kwenye hati, na hiari huhifadhi kwenye localStorage.
• locale-picker — huweka lang na dir (pamoja na utambuzi wa kiotomatiki wa RTL) ili maktaba yako ya i18n iweze kufuata; haifanyi tafsiri yenyewe.
• text-size-picker — huweka data-text-size kwenye hati; CSS yako huunganisha kila thamani na ukubwa wa fonti.
• motion-picker — huweka data-motion kwenye hati, ikianzia kwenye mpangilio wa mwendo uliopunguzwa wa mgeni; CSS na hati zako huamua cha kuzuia.
• search-picker — kitufe cha ikoni kinachofungua sehemu ya utafutaji; kuwasilisha huenda kwenye ukurasa wa utafutaji. Kinamiliki kitendo, si pendeleo.
• link-picker — ikoni ya nyumbani inayofungua menyu ya viungo vya kurasa ambavyo programu yako inavifafanua (Mwanzo, Kutuhusu, Wasiliana Nasi, Sera ya Faragha, …). Inamiliki kitendo, si pendeleo.
• share-picker — hufungua karatasi asilia ya kushiriki au orodha ya maeneo iliyotolewa na mtumiaji wa maktaba, pamoja na kunakili URL. Inamiliki kitendo, si pendeleo: haitumii chochote, haihifadhi chochote.
• date-time-picker — sehemu ya maandishi pamoja na kisanduku cha mazungumzo cha APG cha kuchagua tarehe, saa, au vyote viwili. Inamiliki thamani ya fomu, si pendeleo: mfuatano wa ISO hubadilishana na <input type="date">.

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

Orodha ya Svelte ndiyo marejeo rasmi; matoleo ya React, Vue, Angular, HTML, Nunjucks, Web Components, na Blazor yanalingana nayo mkataba kwa mkataba. Tazama somo la visaidizi.

Ufikivu

Vipengele vinalenga WCAG 2.2 AAA. Vinafuata michoro hii:

• Vipengele vya HTML vya kisemantiki badala ya <div>s.
• <label for="id"> inayounganisha lebo na pembejeo.
• aria-labelledby / aria-describedby kwa marejeleo mtambuka.
• aria-invalid + aria-errormessage kwa hali za makosa.
• role="alert" na aria-live kwa maudhui yanayobadilika.
• aria-pressed, aria-expanded, aria-current kwa hali.
• Roving tabindex kwa gridi.

Viashiria vya umakini kwa makusudi vinatolewa na mtumiaji wa maktaba — Lily haichori kamwe kielekezi cha umakini chaguo-msingi kinachogongana na usanifu wako. Programu za mifano zinadumisha msingi safi wa axe-core kwenye njia zake zote.

Tafsiri kwa lugha nyingi

Kila lebo, kishikilia nafasi, ujumbe wa kosa, na maandishi ya kitufe ni sifa. Hakuna maandishi yaliyowekwa moja kwa moja kwenye msimbo. Weka mfumo wa tafsiri unaoupenda — Paraglide, i18next, vue-i18n, react-intl, faili za .resx, chochote.

Kwa tarehe, nambari, na sarafu, vipengele hupokea maandishi yaliyopangwa tayari: wewe hupanga kwa Intl.DateTimeFormat / Intl.NumberFormat / maktaba unayoipendelea na kupitisha matokeo.

Kisaidizi cha locale-picker huashiria lugha na eneo lililochaguliwa kwa maktaba yako ya i18n kwa kuweka lang na dir kwenye mzizi wa hati.

Majaribio

Kila mradi mdogo wa mfumo wa kazi una majaribio yake kwa kutumia mpangilio unaofaa mfumo huo:

• HTML: WebDriverIO inayoendesha vivinjari halisi.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (kupitia programu jalizi ya Analog Vite).
• Nunjucks: Vitest na kisaidizi cha kuonyesha.
• Blazor: bUnit.

Majaribio hutumia vilinganishi vilivyojengewa ndani vya Vitest pekee — kamwe jest-dom vilinganishi. Hii huweka seti za majaribio zinazobebeka. Programu za mifano huongeza seti za Playwright za mwanzo hadi mwisho, misingi ya ufikivu ya axe-core, na ukaguzi wa mionekano inayojirekebisha.

Mawakala wa AI

Tovuti hii huchapisha llms.txt na llms.json kwenye mzizi wake — ramani iliyochaguliwa ya kurasa zake muhimu zaidi, kwa zana yoyote inayofuata mkataba wa llms.txt.

Hifadhi kuu rasmi pia ina Claude Skills: lily-design-system-skillmbili: skili ya matumizi ya jumla inayoshughulikia dhana, istilahi, na michoro ya mchanganyiko ya Lily kwa yeyote anayejenga kwa mfumo huu, na lily-design-system-maintainer-skill, skili ya kiufundi inayoshughulikia mpangilio wa faili zinazohitajika wa hifadhi kuu na zana kwa yeyote anayeifanyia kazi. Zote mbili ziko kwenye mzizi wa hifadhi kuu rasmi.

Utatuzi wa matatizo

Kuchangia

Lily ni changa na inakaribisha ushirikiano. Michango yenye manufaa zaidi kwa sasa ni:

• Vipengele vipya (hasa michoro kutoka mifumo ya usanifu iliyoimarika).
• Mandhari mapya — kila moja ni karatasi moja huru ya mitindo, ombi la kwanza lenye wigo mzuri.
• Mapambo bora ya mifano — onyesha kinachowezekana.
• Tafsiri za maandishi ya programu za mifano.
• Ripoti za hitilafu zenye hatua ndogo za kuzirudia.
• Ukaguzi wa ufikivu kwa visomaji skrini na teknolojia saidizi.

Fungua masuala na maombi ya kuvuta kwenye github.com/LilyDesignSystem/lily-design-system.

Jumuiya na msaada

• Maswali na ripoti za hitilafu — fungua suala kwenye github.com/LilyDesignSystem/lily-design-system.
• Barua pepe — mtunzaji husoma joel@joelparkerhenderson.com na hukaribisha ushirikiano, mwongozo, na maoni.
• Vioo — Lily pia husukumwa kwenye Codeberg na GitLab, ili uweze kushiriki kutoka kwenye jukwaa unalopendelea.
• Maadili — mradi unafuata kanuni za kawaida za maadili; kuwa mwema, chukulia nia njema.

Maswali yanayoulizwa mara kwa mara