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, त्यावर काम करणाऱ्या प्रत्येकासाठी मोनोरेपोची आवश्यक-फाइल मांडणी आणि साधने यांचा समावेश करणारे तांत्रिक कौशल्य. दोन्ही याच्या मुळावर आहेत प्रमाणित मोनोरेपो.

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

योगदान

Lily तरुण आहे आणि सहकार्याचे स्वागत करतो. सध्याची सर्वात उपयुक्त योगदाने:

• नवीन घटक (विशेषतः प्रस्थापित डिझाइन प्रणालींमधील नमुने).
• नवीन थीम — प्रत्येक एक स्वतंत्र स्टाइलशीट, नीट मर्यादित पहिले PR.
• चांगली उदाहरण शैली — काय शक्य आहे ते दाखवा.
• उदाहरण अॅप स्ट्रिंगची भाषांतरे.
• किमान पुनरुत्पादनासह बग अहवाल.
• स्क्रीन रीडर आणि सहाय्यक तंत्रज्ञानासह सुलभता ऑडिट.

येथे issue आणि PR उघडा github.com/LilyDesignSystem/lily-design-system.

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

• प्रश्न आणि बग अहवाल — येथे issue उघडा github.com/LilyDesignSystem/lily-design-system.
• ईमेल — देखभालकर्ता वाचतो joel@joelparkerhenderson.com आणि सहकार्य, मार्गदर्शन आणि अभिप्रायाचे स्वागत करतो.
• मिरर — Lily येथेही पुश केले जाते Codeberg आणि GitLab, म्हणजे तुम्ही तुमच्या पसंतीच्या फोर्जवरून सहभागी होऊ शकता.
• आचरण — प्रकल्प मानक आचारसंहितेचे अनुसरण करतो; दयाळू राहा, सद्भावना गृहीत धरा.

FAQ