Lily Design System™

HTML ट्युटोरियल

सर्वात सोपी सुरुवात: Lily च्या क्लास हुकसह अर्थपूर्ण HTML कॉपी करा, एक स्टाइलशीट जोडा, प्रकाशित करा. साध्या फाइल्स ज्या HTML चालते तिथे सर्वत्र चालतात.

तुम्ही काय बनवाल

एक छोटा संपर्क फॉर्म — लेबल असलेली क्षेत्रे, एक सबमिट बटण, खरे कीबोर्ड आणि स्क्रीन-रीडर वर्तन — आधी साधा, मग शैलीबद्ध, सुमारे १० मिनिटांत.

सुरू करण्यापूर्वी

तुम्हाला एक ब्राउझर आणि एक टेक्स्ट एडिटर लागेल. बस. (git घटक फाइल्स मिळवायला मदत करतो, पण तुम्ही त्या ब्राउझरमध्ये GitHub वरूनही कॉपी करू शकता.)

पायरी १ — कोड मिळवा

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 टॅग, क्लास हुक, कीबोर्ड वर्तन आणि सुलभता करार नोंदवते. फाइल्स याच लायब्ररी आहेत — हवे ते कॉपी करा आणि निघा.

पायरी २ — तुमचा पहिला घटक

उघडा components/button.html, किंवा फक्त मार्कअप लिहा — क्लास हुक हाच करार आहे:

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

कारण तो खरा <button>आहे, कीबोर्ड फोकस, Enter आणि Space ने सक्रिय करणे, आणि अप्रत्यक्ष बटण भूमिका आधीच बरोबर आहेत.

पायरी ३ — एक छोटा फॉर्म बनवा

<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: फोकस प्रत्येक नियंत्रणातून जातो, लेबले जाहीर होतात आणि सबमिट चालते. वर्तन पूर्ण आहे; देखावा तुमचा आहे आणि पुढची पायरी आहे.

पायरी ४ — त्याला शैली द्या

हुकविरुद्ध 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" />

पायरी ५ — पुढे शोधा

  • रेपोच्या चाचण्या खऱ्या ब्राउझरमध्ये चालतात: pnpm install && pnpm test (WebDriverIO).
  • प्रत्येक घटकासाठी Storybook: pnpm run storybook.
  • HTML+CSS+JS उदाहरण अॅप सर्व 571 घटक शैलीबद्ध, शोधण्यायोग्य आणि प्रात्यक्षिकासह दाखवते.

पुढील पायऱ्या

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.