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 একদম নতুন কাজ এবং আমরা সহযোগিতা, দিকনির্দেশনা ও প্রতিক্রিয়াকে স্বাগত জানাই। অনেক কিছু বদলাবে ও বিকশিত হবে।