HTML eğitimi — Lily Design System

Ne oluşturacaksınız

Küçük bir iletişim formu — etiketli girdiler, bir gönder düğmesi, gerçek klavye ve ekran okuyucu davranışı — önce çıplak, sonra biçimlendirilmiş olarak, yaklaşık 10 dakikada.

Başlamadan önce

Bir tarayıcı ve bir metin düzenleyici yeter. Hepsi bu. (git bileşen dosyalarını almaya yardımcı olur ama bunları tarayıcıda GitHub'dan da kopyalayabilirsiniz.)

Adım 1 — Kodu edinin

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

Her bileşen şurada bağımsız bir dosyadır: components/ — button.html, text-input.htmlve benzerleri — HTML etiketini, sınıf kancasını, klavye davranışını ve erişilebilirlik sözleşmesini belgeleyen bir başlık yorumuyla. Bu dosyalar kütüphanenin kendisidir — ihtiyacınız olanı kopyalayın ve gidin.

Adım 2 — İlk bileşeniniz

Açın: components/button.htmlya da sadece işaretlemeyi yazın — sınıf kancası sözleşmedir:

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

Gerçek bir <button>olduğu için klavye odağı, Enter ve Space ile etkinleştirme ve örtük düğme rolü zaten doğrudur.

Adım 3 — Küçük bir form oluşturun

<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>

Kalıba dikkat edin: her denetim kendi <label for>öğesine bağlanır, en özel girdi türünü kullanır ve tam olarak bir kebab-case sınıf kancası taşır.

Çalışmanızı kontrol edin: sayfayı bir tarayıcıda açın. Sade görünür — tam olarak amaçlandığı gibi: biçimlendirme henüz ileride. Şuna basın: Tab: odak her denetimde ilerler, etiketler duyurulur ve gönderme çalışır. Davranış tamam; görünüm sizin ve sıradaki adım.

Adım 4 — Biçimlendirin

Kancalara karşı CSS yazın:

.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; }

Ya da CSS'i elle yazmayı tamamen atlayın — hazır 45 temadan birini bağlayın, aynı işaretleme canlanır:

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

Adım 5 — Daha fazlasını keşfedin

Deponun testleri gerçek tarayıcılarda çalışır: pnpm install && pnpm test (WebDriverIO).
Her bileşen için Storybook: pnpm run storybook.
HTML+CSS+JS örnek uygulaması 571 bileşenin hepsini biçimli, aranabilir ve demolu olarak gösterir.

Sonraki adımlar

Temalar — theme-picker ile çalışma anında tema geçişi.
Tercih yardımcıları — dil ve metin boyutu.
Bileşen kataloğu — tam başvuru.

Yol boyunca sorunuz mu var? Yardım sayfası yanıtlarla dolu — ve bir adım daha açık olabilirse, bize söyleyin ve eğitimi memnuniyetle iyileştirelim.