Μάθε το Lily, βήμα προς βήμα
Καλώς όρισες! Κάθε σεμινάριο ξεκινά από το μηδέν και χτίζει το ίδιο μικρό πράγμα — μια προσβάσιμη, μορφοποιημένη φόρμα — σε περίπου 10 λεπτά, ώστε να συγκρίνεις τα πλαίσια επί ίσοις όροις. Έπειτα πήγαινε βαθύτερα με τα θέματα και τις προτιμήσεις χρήστη.
Πριν ξεκινήσεις
Χρειάζεσαι εκπληκτικά λίγα:
- Για το σεμινάριο HTML — μόνο έναν περιηγητή και έναν επεξεργαστή κειμένου. Αυτό είναι όλο το εργαλειοθήκη.
- Για Svelte, React, Vue, Angular ή Nunjucks — git, Node 26 και pnpm 10 ή νεότερο.
- Για Blazor — git και το .NET SDK 8 ή νεότερο.
Είσαι καινούργιος στα κεφαλοχωρίς στοιχεία; Βρίσκεσαι στο σωστό μέρος — κάθε σεμινάριο εξηγεί τι συμβαίνει καθώς προχωράς, και κάθε βήμα δείχνει τον ακριβή κώδικα προς αντιγραφή.
Τέσσερα βήματα από το μηδέν έως την παράδοση
- Το πρώτο σου στοιχείο (~5 λεπτά) — διάλεξε παρακάτω το πλαίσιό σου, πάρε τον κώδικα και απόδωσε ένα Button.
- Σύνθεση και μορφοποίηση (~5 λεπτά) — φτιάξε μια φόρμα με ετικέτες και μορφοποίησέ την βάσει των αγκιστριών κλάσεων kebab-case (μέρος κάθε σεμιναρίου πλαισίου).
- Δώσε της θέμα (~15 λεπτά) — αντικατέστησε το χειρόγραφο CSS σου με ένα από τα 57 έτοιμα θέματα και άφησε τους χρήστες να εναλλάσσουν κατά την εκτέλεση: σεμινάριο θεμάτων.
- Σεβάσου τις προτιμήσεις (~15 λεπτά) — πρόσθεσε επιλογή γλώσσας και μεγέθους κειμένου με τους βοηθούς προτιμήσεων: σεμινάριο βοηθών.
Διάλεξε το πλαίσιό σου
HTML
Αντίγραψε σημασιολογικό HTML με τα αγκίστρια κλάσεων και ξεκίνα — ένας περιηγητής και ένας επεξεργαστής αρκούν.
Svelte
Runes του Svelte 5, snippets και αμφίδρομη δέσμευση με bind:value .
React
Λειτουργικά στοιχεία με value + onChange και διάχυση των υπόλοιπων ιδιοτήτων.
Vue
Στοιχεία ενός αρχείου Vue 3 με υποστήριξη v-model .
Angular
Αυτόνομα στοιχεία Angular με εισόδους signal και [(value)].
Blazor
Στοιχεία Razor με παραμέτρους, ChildContentκαι δοκιμές bUnit.
Nunjucks
Μακροεντολές που αποδίδονται στον διακομιστή για το Eleventy και οποιονδήποτε αγωγό προτύπων Node.
Διστάζεις; Ξεκίνα με το HTML — διδάσκει το συμβόλαιο των αγκιστριών κλάσεων που μοιράζονται όλα τα άλλα πλαίσια και τρέχει απευθείας από αρχείο.
Πήγαινε βαθύτερα
Θέματα
Σύνδεσε ένα από τα 57 έτοιμα θέματα — NHS, GOV.UK, USWDS, φωτεινό, σκούρο και άλλα — παράκαμψέ το με το δικό σου CSS και πρόσθεσε εναλλαγή θέματος κατά την εκτέλεση με τον βοηθό theme-picker.
Βοηθοί προτιμήσεων
Δώσε στους χρήστες τον έλεγχο του θέματος, της γλώσσας, του μεγέθους κειμένου, της κίνησης, της αναζήτησης, των συνδέσμων σελίδων, της κοινοποίησης και της εισαγωγής ημερομηνίας/ώρας με τα theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker και date-time-picker: κεφαλοχωρίς στοιχεία ελέγχου με διατήρηση, ασφάλεια SSR και αυτόματη ανίχνευση RTL.
Μετά τα σεμινάρια
- Περιήγηση στον κατάλογο στοιχείων — κάθε στοιχείο τεκμηριώνει τις ιδιότητές του, το συμβόλαιο ARIA και τη συμπεριφορά πληκτρολογίου.
- Κλωνοποίησε μια εφαρμογή-παράδειγμα για να δεις και τα 571 στοιχεία μορφοποιημένα και να δουλεύουν μαζί — το CSS στοχεύει τα ίδια αγκίστρια κλάσεων που μόλις χρησιμοποίησες, οπότε αντίγραψε όποιο τμήμα του στο έργο σου και προσάρμοσέ το όπως θέλεις.
- Ερωτήσεις; Η σελίδα βοήθειας έχει απαντήσεις, συχνές ερωτήσεις και τρόπους να φτάσεις σε έναν φιλικό άνθρωπο. Και αν ένα σεμινάριο θα μπορούσε να είναι σαφέστερο, πες μας — θα το βελτιώσουμε με χαρά.