Lily Design System™

Lily के साथे शुरुआत

एगो फ्रेमवर्क चुनीं, मोनोरेपो क्लोन करीं आ एकर हेडलेस लाइब्रेरी भा उदाहरण ऐप खोलीं, आ आपन पन्ना बनावल शुरू करीं। मार्गदर्शित रास्ता पसंद बा? एकरा से शुरू करीं ट्यूटोरियल.

इंस्टॉल

Lily एगो Git मोनोरेपो में रहेला, जवना में हर फ्रेमवर्क के हेडलेस लाइब्रेरी, सहायक पैकेज आ उदाहरण ऐप खातिर डायरेक्टरी बा। एकरा के आजमावे के सबसे तेज रास्ता मोनोरेपो क्लोन कइल आ आपन स्टैक खातिर हेडलेस लाइब्रेरी खोलल ह: 

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

उहे पैटर्न बाकी फ्रेमवर्क खातिर काम करेला:

  • @lilydesignsystem/html-headless — इंस्टॉल के जरूरत ना; कॉपी करीं .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

हेडलेस लाइब्रेरी क्लोन भा वेंडर करे खातिर बनल बाड़ी — स्रोत के सच के स्रोत मानीं आ जवन चाहीं कॉपी करीं। पसंद सहायक अउर बिल्ड आ प्रकाशन पाइपलाइन (JS फ्रेमवर्क खातिर npm, Blazor खातिर NuGet) वाला इंस्टॉल करे लायक पैकेज के रूप में आवेलें।

हेडलेस घटक प्रयोग करीं

हेडलेस घटक सेमांटिक HTML, ARIA आ प्रॉप देलें — बाकिर CSS ना। हर फ्रेमवर्क में Button इहाँ बा:

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

शैली वाला उदाहरण प्रयोग करीं

उदाहरण ऐप में CSS, रूट आ पूरा डेमो पन्ना शामिल बा। प्रयोग करे के सबसे तेज रास्ता SvelteKit, Next, Nuxt, Analog भा Eleventy उदाहरण ऐप चालू कइल आ इहाँ डेमो देखल ह /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

फेर खोलीं http://localhost:5173 आ इहाँ ब्राउज़ करीं /components.

शैली आ डिजाइन टोकन

हर घटक आपन रूट तत्व पर एगो केबाब-केस क्लास के साथे रेंडर होला। उदाहरण खातिर, <Button> एह तरी रेंडर होला <button class="button">। जइसे चाहीं शैली दीं: 

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

Lily के डिफ़ॉल्ट रंग पैलेट (उदाहरण ऐप में प्रयोग भइल) ई ह:

  • प्राथमिक: #2563eb
  • खतरा: #dc2626
  • चेतावनी: #f59e0b
  • सफलता: #16a34a
  • पन्ना पृष्ठभूमि: #f9fafb
  • कार्ड पृष्ठभूमि: #ffffff

ई सुझाव बा, जरूरत ना। एकरा के आपन ब्रांड पैलेट से बदलीं आ Lily खुशी से साथ आ जाला।

तैयार थीम

CSS शून्य से ना लिखे के चाहत बा? Lily देला 57 स्वतंत्र संदर्भ थीम एह डायरेक्टरी में themes/ । हर एक एगो स्टाइलशीट ह जे Lily क्लास हुक के निशाना बनावेला — एकरा के जोड़ीं आ रउआ शैली वाला हो गइनी: 

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

सेट कवर करेला:

  • सार्वजनिक क्षेत्र — NHS England, NHS Scotland आ NHS Wales (हर एक मरीज-केंद्रित आ पेशेवर-केंद्रित रूप में), GOV.UK GDS, आ U.S. Web Design System।
  • विक्रेता से प्रेरित — Adobe Spectrum, Mozilla Protocol।
  • सामान्य उद्देश्य — light, dark, nord, dracula, wireframe, आ तीसेक अउर।

थीम चयनकर्ता प्रयोग करेलें :where(...), एहसे रउआ के आपन CSS हमेशा विशिष्टता में जीतेला। रनटाइम बदलाव खातिर उनहन के नीचे के theme-picker सहायक के साथे जोड़ीं, भा पालन करीं थीमिंग ट्यूटोरियल.

पसंद सहायक

हर फ्रेमवर्क में आठ छोट चुनवइया बाड़ें, हर एक आपन lily-design-system-{framework}-{package} पैकेज (आ उनहन के जोड़े वाला एगो picker-bar )। हर एक हेडलेस आइकन बटन ह जे पॉपअप खोलेला — लिस्टबॉक्स, लिंक के सूची, खोज फॉर्म, भा (date-time-picker खातिर) तारीख-चयन डायलॉग — मूल <select>ना; SSR-सुरक्षित बा; आ CSS ना भेजेला:

  • theme-picker — प्रबंधित <link>के बदल के रनटाइम पर थीम स्टाइलशीट लोड करेला, दस्तावेज पर data-theme सेट करेला, आ वैकल्पिक रूप से एहमें टिकाऊ रूप से सहेजेला localStorage.
  • locale-picker — सेट करेला lang आ dir (स्वचालित RTL पहचान के साथे) ताकि रउआ के i18n लाइब्रेरी पीछे चल सके; खुद कुछ अनुवाद ना करेला।
  • text-size-picker — सेट करेला data-text-size दस्तावेज पर; रउआ के CSS हर मान के फॉन्ट आकार से जोड़ेला।
  • motion-picker — सेट करेला data-motion दस्तावेज पर, आगंतुक के कम-गति सेटिंग से शुरू करके; रउआ के CSS आ स्क्रिप्ट तय करेलें कि का दबावल जाव।
  • search-picker — एगो आइकन बटन जे खोज क्षेत्र खोलेला; जमा कइला पर खोज पन्ना पर जाला। एगो कार्रवाई के मालिक ह, पसंद के ना।
  • link-picker — एगो घर के आइकन जे रउआ के ऐप से परिभाषित पन्ना लिंक (होम, हमनी के बारे में, संपर्क करीं, गोपनीयता नीति, …) के मेनू खोलेला। एगो कार्रवाई के मालिक ह, पसंद के ना।
  • share-picker — मूल साझा करे वाला शीट भा उपभोक्ता के देल गंतव्य सूची खोलेला, संगे URL कॉपी। एगो कार्रवाई के मालिक ह, पसंद के ना: कुछ लागू ना करेला, कुछ सहेजेला ना।
  • date-time-picker — तारीख, समय, भा दूनो खातिर टेक्स्ट क्षेत्र आ APG तारीख-चयन डायलॉग। एगो फॉर्म मान के मालिक ह, पसंद के ना: ISO स्ट्रिंग एहमें आ एहसे बदलत रहेला <input type="date">. 
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

Svelte कैटलॉग मानक संदर्भ ह; React, Vue, Angular, HTML, Nunjucks, Web Components आ Blazor पोर्ट एकरा से करार-दर-करार मेल खालें। देखीं सहायक ट्यूटोरियल.

सुलभता

घटक निशाना बनावेलें WCAG 2.2 AAA। ऊ ई पैटर्न के पालन करेलें:

  • सामान्य <div>s.
  • <label for="id"> के बदले सेमांटिक HTML तत्व, लेबल के इनपुट से जोड़े वाला।
  • aria-labelledby / aria-describedby आपसी संदर्भ खातिर।
  • aria-invalid + aria-errormessage गलती स्थिति खातिर।
  • role="alert" आ aria-live गतिशील सामग्री खातिर।
  • aria-pressed, aria-expanded, aria-current स्थिति खातिर।
  • ग्रिड खातिर रोविंग tabindex ।

फोकस संकेतक जानबूझ के उपभोक्ता से दिहल जालें — Lily कबो रउआ के डिजाइन से टकराए वाला डिफ़ॉल्ट फोकस रिंग ना बनावेला। उदाहरण ऐप आपन सब रूट पर साफ axe-core बेसलाइन रखेलें।

अंतरराष्ट्रीयकरण

हर लेबल, प्लेसहोल्डर, गलती संदेश आ बटन टेक्स्ट एगो प्रॉप ह। पक्का लिखल स्ट्रिंग ना बा। आपन पसंद के अनुवाद फ्रेमवर्क जोड़ीं — Paraglide, i18next, vue-i18n, react-intl, .resx फाइल, कुछुओ।

तारीख, संख्या आ मुद्रा खातिर, घटक पहिले से प्रारूपित स्ट्रिंग लेलें: रउआ एकरा से प्रारूपित करीले Intl.DateTimeFormat / Intl.NumberFormat / आपन पसंदीदा लाइब्रेरी आ नतीजा आगे बढ़ा दीले।

locale-picker सहायक चुनल लोकेल के रउआ के i18n लाइब्रेरी के एह तरी सेट करके बतावेला lang आ dir दस्तावेज रूट पर।

परीक्षण

हर फ्रेमवर्क उप-परियोजना आपन परंपरागत स्टैक के प्रयोग करके आपन परीक्षण भेजेला:

  • HTML: असली ब्राउज़र चलावे वाला WebDriverIO।
  • Svelte: Vitest + @testing-library/svelte.
  • React: Vitest + @testing-library/react.
  • Vue: Vitest + @testing-library/vue.
  • Angular: Vitest + TestBed (Analog Vite प्लगइन के जरिए)।
  • Nunjucks: रेंडर सहायक के साथे Vitest।
  • Blazor: bUnit।

परीक्षण प्रयोग करेलें खाली Vitest के भीतर बनल मैचर — कबो ना jest-dom मैचर। ई परीक्षण सूट के पोर्टेबल रखेला। उदाहरण ऐप Playwright एंड-टू-एंड सूट, axe-core सुलभता बेसलाइन आ उत्तरदायी व्यूपोर्ट स्वीप जोड़ेलें।

AI एजेंट

ई साइट आपन रूट पर प्रकाशित करेला llms.txt आ llms.json — आपन सबसे महत्वपूर्ण पन्ना के चुनल नक्शा, कवनो उपकरण खातिर जे पालन करेला llms.txt परंपरा के.

मानक मोनोरेपो अउर दू गो भेजेला Claude Skills: lily-design-system-skill: प्रणाली के साथे बनावे वाला हर केहू खातिर Lily के अवधारणा, शब्दावली आ रचना पैटर्न के कवर करे वाला सामान्य-उद्देश्य कौशल, आ lily-design-system-maintainer-skill, एह पर काम करे वाला हर केहू खातिर मोनोरेपो के जरूरी-फाइल लेआउट आ उपकरण के कवर करे वाला तकनीकी कौशल। दूनो एकरा रूट पर बाड़ें मानक मोनोरेपो.

समस्या निवारण

घटक रेंडर होला बाकिर बिना शैली के लागेला

ई हेडलेस इरादा के मोताबिक काम कर रहल बा — घटक के साथे कवनो CSS ना आवेला। भा त घटक के केबाब-केस क्लास खातिर CSS लिखीं (हर कैटलॉग पन्ना पर देखावल)भा एहमें से एगो जोड़ीं 57 तैयार थीम.

हमार CSS थीम के ऊपर लागू होत ना लउकेला

होखे के चाहीं — थीम चयनकर्ता एहमें लपेटल बाड़ें :where(...), जेकर विशिष्टता शून्य ह। अगर नियम तबो हारे, त जाँचीं कि रउआ के स्टाइलशीट थीम के <link> के बाद लोड होत बा आ चयनकर्ता सचमुच घटक के क्लास हुक से मेल खात बा।

pnpm install पीयर भा संस्करण गलती के साथे फेल हो जाला

मौजूदा pnpm (v10+) आ Node 22+ प्रयोग करीं। हर उप-परियोजना आपन फ्रेमवर्क संस्करण अपना package.jsonमें पिन करेला; अगर रउआ के वैश्विक टूलचेन पुरान बा, त pnpm env use --global lts सबसे तेज उपाय ह।

स्क्रीन रीडर नियंत्रण के गलत नाम घोषित करेला

घटक के जरूरी label प्रॉप जाँचीं — बिना दिखे वाला टेक्स्ट वाला घटक के एगो चाहीं, आ उपभोक्ता के देल aria-label / aria-labelledby जे rest-props के जरिए पास कइल जाला, जानबूझ के भीतर बनल वायरिंग पर जीतेला। हर कैटलॉग पन्ना घटक के ARIA करार के दस्तावेज करेला।

theme-picker सहायक स्टाइलशीट ना बदलेला

पक्का करीं कि themesUrl ऊ डायरेक्टरी के ओर इशारा करेला जे ब्राउज़र ले आ सके ( themes/ फाइल के स्थैतिक संपत्ति के रूप में परोसीं) आ रउआ के themes प्रॉप में थीम स्लग फाइल नाम से मेल खात बाड़ें। सहायक बदलेला href एगो प्रबंधित <link data-lily-theme-picker> के — माँगल जा रहल URL देखे खातिर devtools में जाँचीं।

कुछ अउर टूटल बा

कम से कम पुनरुत्पादन के साथे इहाँ issue खोलीं github.com/LilyDesignSystem/lily-design-system — भा देखीं समुदाय आ समर्थन.

योगदान

Lily जवान ह आ सहयोग के स्वागत करेला। अबहीं के सबसे उपयोगी योगदान ई बाड़ें:

  • नया घटक (खास करके स्थापित डिजाइन प्रणाली के पैटर्न)।
  • नया थीम — हर एक एगो स्वतंत्र स्टाइलशीट, ठीक से सीमित पहिला PR।
  • बेहतर उदाहरण शैली — देखाईं कि का संभव बा।
  • उदाहरण ऐप स्ट्रिंग के अनुवाद।
  • कम से कम पुनरुत्पादन के साथे बग रिपोर्ट।
  • स्क्रीन रीडर आ सहायक तकनीक के साथे सुलभता ऑडिट।

इहाँ issue आ PR खोलीं github.com/LilyDesignSystem/lily-design-system.

समुदाय आ समर्थन

  • सवाल आ बग रिपोर्ट — इहाँ issue खोलीं github.com/LilyDesignSystem/lily-design-system.
  • ईमेल — अनुरक्षक पढ़ेला joel@joelparkerhenderson.com आ सहयोग, मार्गदर्शन आ प्रतिक्रिया के स्वागत करेला।
  • मिरर — Lily इहाँ भी पुश कइल जाला Codeberg आ GitLab, ताकि रउआ आपन पसंदीदा फोर्ज से हिस्सा ले सकीं।
  • आचरण — परियोजना एगो मानक आचार संहिता के पालन करेला; दयालु रहीं, नेक नीयत मानीं।

FAQ

शैली वाला के बदले हेडलेस काहें?

पहिले से शैली वाला घटक सुविधाजनक बाड़ें — जब तक ऊ रउआ के ब्रांड से ना मिलें। हेडलेस घटक में शुरू में तनि अउर मेहनत लागेला बाकिर दृश्य डिजाइन पर पूरा नियंत्रण मिलेला। उदाहरण ऐप आ 57 थीम उनहन के शैली देवे के तरीका देखावेलें; रउआ उनहन के ले सकीले भा पूरा बदल सकीले। लमहर तर्क इहाँ बा Lily काहें.

एतना घटक काहें?

Lily के मकसद ऊ पैटर्न कवर कइल ह जे अधिकतर ऐप के चाहीं, रउआ के उनहन के शून्य से बनावे खातिर मजबूर कइले बिना — राष्ट्रीय पहचानकर्ता इनपुट आ संपादकीय scrollytelling जइसन गहिरा चीज समेत। कैटलॉग दर्जन भर स्थापित डिजाइन प्रणाली आ मौलिक काम से लेला — देखीं के बारे में.

का हम Lily के Tailwind के साथे प्रयोग कर सकीले?

हँ। हर घटक एगो केबाब-केस रूट क्लास आ उपभोक्ता के देल className / classखोलेला। Tailwind यूटिलिटी के जइसे चाहीं ऊपर चढ़ाईं।

का हम Lily के DaisyUI जइसन सेमांटिक CSS फ्रेमवर्क के साथे प्रयोग कर सकीले?

हँ। रूट तत्व पर केबाब-केस क्लास नाम सेमांटिक CSS हुक के रूप में काम करेलें। Lily के सेमांटिक फ्रेमवर्क से जोड़ीं आ रउआ के पहिले से शैली वाला घटक मिली जे तबो ARIA आ i18n के आदर करेलें।

का कवनो npm पैकेज बा?

पसंद सहायक npm/NuGet प्रकाशन पाइपलाइन के साथे पैकेज के रूप में आवेलें। हेडलेस घटक लाइब्रेरी क्लोन भा वेंडर करे खातिर बनल बाड़ी — स्रोत ही डिलीवरेबल ह, एहसे रउआ जवन शिप करीले ठीक ऊहे पढ़, छाँट आ अपना मिल्कियत में रख सकीले। हेडलेस लाइब्रेरी के रजिस्ट्री में प्रकाशन अबहीं रोडमैप पर बा।

बहु-लाइसेंस काहें?

अलग-अलग परियोजना के लाइसेंस जरूरत अलग होला। BSD आ MIT उदार बाड़ें, Apache-2.0 में पेटेंट अनुदान बा, आ GPL विकल्प कॉपीलेफ्ट के समर्थन करेलें। जवन रउआ के हालत में फिट बइठे ऊ चुनीं।

हम बग के रिपोर्ट भा सुविधा के अनुरोध कइसे करीं?

GitHub रिपॉजिटरी में issue खोलीं, भा ईमेल करीं joel@joelparkerhenderson.com.