Lily का ह?
सुलभता के पहिले रखे वाली मुफ्त, ओपन-सोर्स डिजाइन प्रणाली, जे रउआ जहाँ कोड लिखीले उहाँ मिलेला — आ जब जरूरत ना होखे त रास्ता से हट जाला।
छोट में
Lily वेब घटक के एगो कैटलॉग ह, जवना में हर घटक आठ हेडलेस रूप (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks आ Web Components) में बनल बा, संगे पूरा उदाहरण ऐप के सेट जे देखावेला कि उनहन के शैली कइसे दिहल जाला।
हेडलेस संस्करण आवेला शून्य CSS के साथे। ई रउआ के सेमांटिक HTML, ARIA भूमिका आ स्थिति, कीबोर्ड समर्थन आ अंतरराष्ट्रीयकरण के अनुकूल प्रॉप देला। दृश्य डिजाइन रउआ ले आईं।
डिजाइन सिद्धांत
सुलभ
हर घटक सेमांटिक HTML से शुरू होला। ARIA खाली ओहिजा जोड़ल जाला जहाँ HTML अकेले पैटर्न के ना कह सके। घटक निशाना बनावेला: WCAG 2.2 AAA — रंग, दूरी, फोकस आ कीबोर्ड नेविगेशन सब पर ध्यान दिहल जाला।
जोड़े लायक
Lily छोट, एक-मकसद वाला घटक पसंद करेला जे एक दोसरा में बइठेलें। संयुक्त पैटर्न बार-बार आवेलें:
Nav → List → ListItem— ब्रेडक्रंब, सामग्री सूची, अकॉर्डियन मेनू, ट्री मेनू आ पन्ना बाँटे खातिरForm → Field → Input— लेबल, संकेत आ गलती वाला कवनो फॉर्म लेआउट खातिरTable → Head/Body/Foot → Row → Data— तालिका, कैलेंडर, गैंट चार्ट आ कानबन बोर्ड खातिरBar → BarButton— टूल बार, टैब बार, टास्क बार, एक्शन बार आ मेनू बार खातिरPicker → PickerButton— रंग चुनवइया, रेटिंग चुनवइया, थीम चुनवइया खातिर
अंतरराष्ट्रीयकरण लायक
प्रयोगकर्ता के लउके वाला एको स्ट्रिंग कोड में पक्का नइखे लिखल। लेबल, प्लेसहोल्डर, गलती संदेश, बटन टेक्स्ट — सब पैरामीटर बा। आपन अनुवाद प्रणाली जोड़ीं आ रउआ जवन भाषा बोलीले ऊ Lily बोली।
हेडलेस
हेडलेस घटक में CSS ना होला, कवनो
<style> ब्लॉक ना, रउआ ना चुनल कवनो डिजाइन टोकन ना। ऊ हर रूट तत्व पर एगो केबाब-केस क्लास नाम खोलेलें ताकि रउआ उनहन के जइसे चाहीं निशाना बना सकीं — सेमांटिक CSS, Tailwind, CSS-in-JS, रउआ के मर्जी।
पूरा उदाहरण
उदाहरण ऐप देखावेलें कि असली इस्तेमाल खातिर घटक के शैली कइसे दिहल जाला — कवन डिजाइन टोकन सेट कइल जाव, कवन रूप जोड़ल जाव, पन्ना कइसे बनावल जाव। ई पूरा SvelteKit, Next.js, Nuxt, Blazor आ Eleventy ऐप बाड़ें, खाली सैंडबॉक्स ना।
प्रेरणा के स्रोत
Lily जानबूझ के चुनल चौड़ा डिजाइन प्रणाली के सेट से पैटर्न आ भाषा लेला:
- NHS UK Design System
- GOV.UK Design System
- U.S. Web Design System (USWDS)
- ONSdigital design system
- Design System AU (Australian Government)
- Mozilla Protocol
- Adobe Spectrum
- Ant Design
- Wonderflow Wanda
- DaisyUI
- shadcn/ui
- Reuters graphics components
लाइसेंस
Lily बहु-लाइसेंस वाला ह: BSD, MIT, Apache-2.0, GPL-2.0, भा GPL-3.0। जवन रउआ के परियोजना के सूट करे ऊ चुनीं। अगर कुछ ना चले त हमनी से संपर्क करीं।
संपर्क
परियोजना प्रमुख: Joel Parker Henderson — joel@joelparkerhenderson.com.
बग मिलल, कवनो विचार बा, घटक जोड़े के चाहत बा? इहाँ issue भा pull request खोलीं: GitHub.
स्थिति: Lily एकदम नया काम ह आ हमनी सहयोग, मार्गदर्शन आ प्रतिक्रिया के स्वागत करीले। चीज बदली आ विकसित होई।