Lily Design System™

HTML টিউটোরিয়াল

সবচেয়ে সহজ শুরু: Lily-র ক্লাস হুকসহ অর্থবোধক HTML কপি করুন, একটি স্টাইলশিট যোগ করুন, প্রকাশ করুন। সাধারণ ফাইল যা HTML যেখানে চলে সেখানেই চলে।

আপনি কী তৈরি করবেন

একটি ছোট যোগাযোগ ফর্ম — লেবেলসহ ক্ষেত্র, একটি জমা দেওয়ার বোতাম, প্রকৃত কিবোর্ড ও স্ক্রিন-রিডার আচরণ — প্রথমে সাদামাটা, তারপর স্টাইলসহ, প্রায় ১০ মিনিটে।

শুরু করার আগে

আপনার একটি ব্রাউজার ও একটি টেক্সট এডিটর লাগবে। ব্যস। (কম্পোনেন্ট ফাইল আনতে git সাহায্য করে, তবে ব্রাউজারে GitHub থেকেও কপি করতে পারেন।)

ধাপ ১ — কোড নিন

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

প্রতিটি কম্পোনেন্ট এখানে একটি স্বতন্ত্র ফাইল: components/ — button.html, text-input.htmlইত্যাদি — একটি হেডার মন্তব্যসহ যা তার HTML ট্যাগ, ক্লাস হুক, কিবোর্ড আচরণ ও সহজগম্যতা চুক্তি নথিভুক্ত করে। ফাইলগুলোই সেই লাইব্রেরি — যা দরকার কপি করে চলুন।

ধাপ ২ — আপনার প্রথম কম্পোনেন্ট

খুলুন components/button.html, বা শুধু মার্কআপ লিখুন — ক্লাস হুকই চুক্তি:

<button class="button" type="button">
  Save
</button>

কারণ এটি প্রকৃত <button>, কিবোর্ড ফোকাস, Enter ও Space দিয়ে সক্রিয়করণ এবং অন্তর্নিহিত বোতাম ভূমিকা আগে থেকেই সঠিক।

ধাপ ৩ — একটি ছোট ফর্ম তৈরি করুন

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

প্যাটার্নটি লক্ষ্য করুন: প্রতিটি নিয়ন্ত্রণ নিজের <label for>জোড়ে, সবচেয়ে নির্দিষ্ট input ধরন ব্যবহার করে এবং ঠিক একটি kebab-case ক্লাস হুক বহন করে।

আপনার কাজ পরীক্ষা করুন: পাতাটি ব্রাউজারে খুলুন। এটি সাদামাটা দেখায় — ঠিক যেমন উদ্দেশ্য ছিল: স্টাইলিং এখনো সামনে। চাপুন Tab: ফোকাস প্রতিটি নিয়ন্ত্রণের মধ্য দিয়ে যায়, লেবেল ঘোষিত হয় এবং জমা দেওয়া কাজ করে। আচরণ সম্পূর্ণ; চেহারা আপনার, আর সেটাই পরবর্তী ধাপ।

ধাপ ৪ — স্টাইল দিন

হুকের বিরুদ্ধে CSS লিখুন:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

অথবা হাতে CSS লেখা পুরোপুরি বাদ দিন — ৪৫টি তৈরি থিমের একটি লিংক করুন আর একই মার্কআপ জ্বলে ওঠে: 

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

ধাপ ৫ — আরও অন্বেষণ করুন

  • রিপোর পরীক্ষা প্রকৃত ব্রাউজারে চলে: pnpm install && pnpm test (WebDriverIO)।
  • প্রতিটি কম্পোনেন্টের জন্য Storybook: pnpm run storybook.
  • HTML+CSS+JS উদাহরণ অ্যাপ সব ৫৭১টি কম্পোনেন্ট স্টাইল করা, অনুসন্ধানযোগ্য ও প্রদর্শনসহ দেখায়।

পরবর্তী ধাপ

পথে প্রশ্ন আছে? সহায়তা পাতা উত্তরে ভরা — আর কোনো ধাপ আরও পরিষ্কার হতে পারলে, আমাদের জানান আর আমরা খুশি মনে টিউটোরিয়াল উন্নত করব।