دليل 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.

الخطوة 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 كلها منسَّقة وقابلة للبحث ومعروضة.

الخطوات التالية

• السمات — تبديل السمة أثناء التشغيل بـ theme-picker.
• مساعدات التفضيلات — اللغة وحجم النص.
• فهرس المكوّنات — المرجع الكامل.

أسئلة في الطريق؟ صفحة المساعدة مليئة بالإجابات — وإن أمكن توضيح خطوة أكثر، أخبرنا وسنحسّن الدليل بكل سرور.