Lily म्हणजे काय?
सुलभतेला प्राधान्य देणारी, मोफत, ओपन-सोर्स डिझाइन प्रणाली जी तुम्ही जिथे कोड लिहिता तिथे तुम्हाला भेटते — आणि गरज नसताना बाजूला होते.
थोडक्यात
Lily हे वेब घटकांचे कॅटलॉग आहे, ज्यातील प्रत्येक आठ हेडलेस प्रकारांत (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks आणि Web Components) अंमलात आणला आहे, शिवाय त्यांना शैली कशी द्यायची हे दाखवणाऱ्या पूर्ण उदाहरण अॅप्सचा संच.
हेडलेस आवृत्त्यांसोबत येतो शून्य CSS। त्या तुम्हाला सेमँटिक HTML, ARIA भूमिका आणि स्थिती, कीबोर्ड समर्थन आणि आंतरराष्ट्रीयीकरणास अनुकूल प्रॉप्स देतात. दृश्य रचना तुम्ही आणता.
डिझाइन तत्त्वे
सुलभ
प्रत्येक घटक सेमँटिक HTML पासून सुरू होतो. फक्त जिथे HTML एकटा नमुना व्यक्त करू शकत नाही तिथेच ARIA जोडले जाते. घटक याचे लक्ष्य ठेवतात: 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 हे अगदी नवीन काम आहे आणि आम्ही सहकार्य, मार्गदर्शन आणि अभिप्रायाचे स्वागत करतो. गोष्टी बदलतील आणि विकसित होतील.