Lily Design System™

Hướng dẫn HTML

Cách bắt đầu đơn giản nhất: sao chép HTML ngữ nghĩa với class hook của Lily, thêm một bảng kiểu, xuất bản. Các tệp thuần chạy ở bất cứ đâu HTML chạy được.

Bạn sẽ xây dựng gì

Một biểu mẫu liên hệ nhỏ — các ô nhập có nhãn, nút gửi, hành vi bàn phím và trình đọc màn hình thật — lúc đầu để trơn, sau đó thêm kiểu dáng, trong khoảng 10 phút.

Trước khi bắt đầu

Bạn chỉ cần một trình duyệt và một trình soạn thảo văn bản. Vậy là đủ. (git giúp lấy các tệp thành phần tiện hơn, nhưng bạn cũng có thể sao chép chúng từ GitHub ngay trong trình duyệt.)

Bước 1 — Lấy mã

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

Mỗi thành phần là một tệp độc lập trong components/ — button.html, text-input.html, v.v. — với chú thích đầu tệp ghi rõ thẻ HTML, class hook, hành vi bàn phím và hợp đồng tiếp cận của nó. Các tệp chính là thư viện — sao chép thứ bạn cần rồi đi tiếp.

Bước 2 — Thành phần đầu tiên của bạn

Mở components/button.html, hoặc cứ viết phần đánh dấu — class hook là hợp đồng:

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

Vì đó là <button>thật, tiêu điểm bàn phím, kích hoạt bằng Enter và Space, và vai trò nút ngầm định đều đã đúng.

Bước 3 — Ghép một biểu mẫu nhỏ

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

Chú ý mẫu này: mỗi điều khiển liên kết với <label for>của nó, dùng kiểu input cụ thể nhất và mang đúng một class hook kiểu kebab-case.

Kiểm tra kết quả: mở trang trong trình duyệt. Nó trông trơ — đúng như dự định: kiểu dáng còn ở phía trước. Nhấn Tab: tiêu điểm di chuyển qua mọi điều khiển, nhãn được đọc lên và việc gửi hoạt động. Hành vi đã xong; diện mạo là của bạn và là bước tiếp theo.

Bước 4 — Tạo kiểu dáng

Viết CSS dựa trên các hook:

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

Hoặc bỏ hẳn việc tự viết CSS — liên kết một trong 45 chủ đề dựng sẵn và cùng phần đánh dấu đó sẽ sáng lên: 

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

Bước 5 — Khám phá thêm

  • Các bài kiểm thử của kho mã chạy trên trình duyệt thật: pnpm install && pnpm test (WebDriverIO).
  • Storybook cho mọi thành phần: pnpm run storybook.
  • Ứng dụng ví dụ HTML+CSS+JS hiển thị tất cả 571 thành phần có kiểu dáng, tìm kiếm được và có bản demo.

Các bước tiếp theo

Có thắc mắc trên đường đi? Trang trợ giúp có đầy câu trả lời — và nếu một bước có thể rõ ràng hơn, hãy cho chúng tôi biết và chúng tôi sẽ vui lòng cải thiện hướng dẫn.