Lily क्या है?
एक निःशुल्क, ओपन-सोर्स, पहुँचनीयता-प्रथम डिज़ाइन सिस्टम जो आपसे वहीं मिलता है जहाँ आप कोड लिखते हैं — और जब आपको उसकी ज़रूरत न हो तो रास्ते से हट जाता है।
संक्षिप्त रूप
Lily वेब कंपोनेंट का एक कैटलॉग है, जिनमें से हर एक आठ headless रूपों में लागू है (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks और Web Components), साथ ही पूरे उदाहरण ऐप्स का एक संग्रह है जो दिखाता है कि उन्हें कैसे स्टाइल किया जाए।
headless संस्करणों में बिल्कुल 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 वही भाषा बोलेगा जो आप बोलते हैं।
Headless
headless कंपोनेंट में कोई CSS नहीं होती, कोई <style> ब्लॉक नहीं, कोई डिज़ाइन टोकन नहीं जिसे आपने न चुना हो। वे हर रूट एलिमेंट पर kebab-case में एक ही क्लास नाम उपलब्ध कराते हैं ताकि आप उन्हें जैसे चाहें लक्षित करें — अर्थपूर्ण CSS, Tailwind, CSS-in-JS, आपकी मर्ज़ी।
पूरे उदाहरण
उदाहरण ऐप्स दिखाते हैं कि कंपोनेंट को वास्तविक उपयोग के लिए कैसे स्टाइल करें — कौन से डिज़ाइन टोकन तय करें, कौन-से रूपांतर जोड़ें, पृष्ठ कैसे बनाएँ। ये पूर्ण SvelteKit, Next.js, Nuxt, Blazor और Eleventy ऐप्स हैं, केवल सैंडबॉक्स नहीं।
प्रेरणाएँ
Lily पैटर्न और भाषा डिज़ाइन सिस्टमों के एक जान-बूझकर व्यापक समूह से लेता है:
- NHS UK डिज़ाइन सिस्टम
- GOV.UK डिज़ाइन सिस्टम
- अमेरिकी वेब डिज़ाइन सिस्टम (USWDS)
- ONSdigital डिज़ाइन सिस्टम
- Design System AU (ऑस्ट्रेलियाई सरकार)
- Mozilla Protocol
- Adobe Spectrum
- Ant Design
- Wonderflow Wanda
- DaisyUI
- shadcn/ui
- रॉयटर्स के ग्राफ़िक्स कंपोनेंट
लाइसेंस
Lily कई लाइसेंसों के अंतर्गत है: BSD, MIT, Apache-2.0, GPL-2.0 या GPL-3.0। जो लाइसेंस आपके प्रोजेक्ट के अनुकूल हो उसे चुनें। यदि इनमें से कोई भी उपयुक्त न हो तो हमसे संपर्क करें।
संपर्क
प्रोजेक्ट प्रमुख: Joel Parker Henderson — joel@joelparkerhenderson.com।
कोई बग मिला, कोई विचार है, या कोई कंपोनेंट योगदान करना चाहते हैं? GitHub पर एक इश्यू या पुल रिक्वेस्ट खोलें।
स्थिति: Lily बिल्कुल नया काम है और हम सहयोग, मार्गदर्शन और प्रतिक्रिया का स्वागत करते हैं। चीज़ें बदलेंगी और विकसित होंगी।