מדריך 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>שלו, משתמש בסוג הקלט הספציפי ביותר ונושא בדיוק וו מחלקה אחד בסגנון 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.
• עוזרי העדפות — שפה וגודל טקסט.
• קטלוג הרכיבים — ההפניה המלאה.

שאלות בדרך? עמוד העזרה מלא בתשובות — ואם שלב יכול להיות ברור יותר, ספרו לנו ונשמח לשפר את המדריך.