Οδηγός HTML — Lily Design System

Τι θα φτιάξετε

Μια μικρή φόρμα επικοινωνίας — πεδία με ετικέτες, ένα κουμπί υποβολής, πραγματική συμπεριφορά πληκτρολογίου και προγράμματος ανάγνωσης οθόνης — πρώτα γυμνή, μετά μορφοποιημένη, σε περίπου 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 στοιχεία μορφοποιημένα, αναζητήσιμα και επιδεδειγμένα.

Επόμενα βήματα

Θέματα — εναλλαγή θέματος κατά την εκτέλεση με το theme-picker.
Βοηθοί προτιμήσεων — γλώσσα και μέγεθος κειμένου.
Κατάλογος στοιχείων — ο πλήρης οδηγός αναφοράς.

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.