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 घटक शैली, खोज योग्य और प्रदर्शन के साथ दिखाता है।

अगले चरण

रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।