Lily Design System™

HTML ٹیوٹوریل

سب سے سادہ آغاز: Lily کے کلاس ہُکس کے ساتھ معنی خیز HTML کاپی کریں، ایک اسٹائل شیٹ جوڑیں، شائع کریں۔ سادہ فائلیں جو HTML جہاں چلتا ہے وہاں چلتی ہیں۔

آپ کیا بنائیں گے

ایک چھوٹا رابطہ فارم — لیبل والے خانے، ایک جمع کرانے کا بٹن، حقیقی کی بورڈ اور اسکرین ریڈر رویہ — پہلے سادہ، پھر اسلوب کے ساتھ، تقریباً 10 منٹ میں۔

شروع کرنے سے پہلے

آپ کو ایک براؤزر اور ایک ٹیکسٹ ایڈیٹر چاہیے۔ بس۔ (git جزو فائلیں لانے میں مدد کرتا ہے، لیکن آپ انہیں براؤزر میں GitHub سے بھی کاپی کر سکتے ہیں۔)

مرحلہ 1 — کوڈ حاصل کریں

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 ٹیگ، کلاس ہُک، کی بورڈ رویہ اور رسائی کا معاہدہ درج کرتا ہے۔ فائلیں ہی ہیں لائبریری — جو چاہیے کاپی کریں اور چل پڑیں۔

مرحلہ 2 — آپ کا پہلا جزو

کھولیں components/button.html، یا بس مارک اپ لکھیں — کلاس ہُک ہی معاہدہ ہے:

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

کیونکہ یہ حقیقی <button>ہے، کی بورڈ فوکس، Enter اور Space سے فعال کرنا، اور مضمر بٹن کردار پہلے سے درست ہیں۔

مرحلہ 3 — ایک چھوٹا فارم بنائیں

<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: فوکس ہر کنٹرول سے گزرتا ہے، لیبلوں کا اعلان ہوتا ہے اور جمع کرانا کام کرتا ہے۔ رویہ مکمل ہے؛ ظاہری شکل آپ کی ہے اور اگلا قدم ہے۔

مرحلہ 4 — اسے اسلوب دیں

ہُکس کے خلاف 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 لکھنا بالکل چھوڑ دیں — 45 تیار تھیموں میں سے ایک لنک کریں اور وہی مارک اپ جگمگا اٹھتا ہے: 

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

مرحلہ 5 — مزید دریافت کریں

  • ریپو کے ٹیسٹ حقیقی براؤزروں میں چلتے ہیں: pnpm install && pnpm test (WebDriverIO)۔
  • ہر جزو کے لیے Storybook: pnpm run storybook.
  • HTML+CSS+JS مثالی ایپ تمام 571 اجزاء اسلوب، تلاش کے قابل اور نمائش کے ساتھ دکھاتی ہے۔

اگلے مراحل

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔