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 بالکل نیا کام ہے اور ہم تعاون، رہنمائی، اور آراء کا خیر مقدم کرتے ہیں۔ چیزیں بدلیں گی اور ترقی کریں گی۔