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

अगिला कदम

रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।