Τα επιχειρήματα υπέρ του Lily
Το Lily αναλαμβάνει τα δύσκολα μέρη — σημασιολογία, προσβασιμότητα, συμπεριφορά πληκτρολογίου, διεθνοποίηση — και αφήνει την εμφάνιση εξ ολοκλήρου, με χαρά, σε σένα.
Ξεκίνα από τον δικό σου σχεδιασμό
Η ομάδα σου ξέρει ήδη πώς πρέπει να δείχνει το προϊόν σου. Το Lily ξεκινά ακριβώς από εκεί: προσφέρει τα μέρη που είναι πραγματικά δύσκολο να γίνουν σωστά και δαπανηρό να ξαναγίνουν — το σωστό σημασιολογικό στοιχείο, τις καταστάσεις ARIA, το συμβόλαιο πληκτρολογίου, τη διαχείριση εστίασης — και αφήνει κάθε οπτική απόφαση εξ ολοκλήρου, με χαρά, δική σου. Το CSS σου είναι η εμφάνιση του συστήματος σχεδίασης από την πρώτη μέρα.
Επειδή κάθε στοιχείο φέρει ένα σταθερό αγκίστρι κλάσης και καθαρή δομή, η μορφοποίησή σου παραμένει καθαρά δική σου σε κάθε αναβάθμιση — και η προσβασιμότητα από κάτω συνεχίζει να λειτουργεί, έκδοση μετά την έκδοση.
Τι δεσμεύεται να κάνει το Lily
- Προσβάσιμο από προεπιλογή. Το WCAG 2.2 AAA είναι ο στόχος για κάθε στοιχείο. Τα μοτίβα ακολουθούν τις WAI-ARIA Authoring Practices· κάθε διαδραστικό στοιχείο λειτουργεί με πληκτρολόγιο βάσει τεκμηριωμένου συμβολαίου· οι εφαρμογές-παραδείγματα διατηρούν καθαρή βάση axe-core.
-
Διεθνοποιήσιμο εκ κατασκευής. Κάθε ορατή στον χρήστη συμβολοσειρά — κάθε ετικέτα, σφάλμα και ανακοίνωση — είναι ιδιότητα με σταθερά ονόματα σε όλα τα πλαίσια, ώστε η μετάφραση να ρέει φυσικά. Το RTL και το αμφίδρομο κείμενο κληρονομούν από το
dirσου. Τα στοιχεία που γνωρίζουν την τοπική ρύθμιση λαμβάνουν τη γλώσσα ως ιδιότητα, πάντα ρητά. - Ένας κατάλογος, οκτώ πλαίσια. Τα ίδια 571 στοιχεία (536 ως εγγενή Web Components) με τα ίδια αγκίστρια κλάσεων και τις ίδιες συμβάσεις ιδιοτήτων σε HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks και Web Components. Το CSS σου και οι γνώσεις της ομάδας σου μεταφέρονται ανάμεσα σε στοίβες τεχνολογιών.
- Ανεξάρτητο από στρατηγική CSS. Μία σταθερή κλάση kebab-case ανά ρίζα στοιχείου. Σημασιολογικό CSS, βοηθητικές κλάσεις Tailwind, CSS-in-JS ή ένα από τα 57 έτοιμα θέματα — το Lily τα καλωσορίζει όλα και παραμερίζει χαριτωμένα.
- Δωρεάν, για πάντα, με τους δικούς σου όρους. Ανοιχτός κώδικας με άδεια της επιλογής σου: BSD, MIT, Apache-2.0, GPL-2.0 ή GPL-3.0. Χωρίς pro επίπεδο, χωρίς άδειες ανά θέση, χωρίς τηλεμετρία.
Βάθος εκεί που μετράει
Πέρα από τα συνηθισμένα κουμπιά και διαλόγους, ο κατάλογος φτάνει πιο μακριά από τους περισσότερους:
- Μοτίβα δημόσιου τομέα που μελετήθηκαν από τα συστήματα σχεδίασης των NHS UK, GOV.UK, USWDS και ONS — περιλήψεις σφαλμάτων, πλαίσια προειδοποίησης, λίστες περίληψης, πανό φάσης, σύνδεσμοι παράκαμψης.
- 140 στοιχεία εθνικών προσωπικών αναγνωριστικών που καλύπτουν αναγνωριστικά υγείας, ταυτότητας, φορολογίας και διαβατηρίου σε πάνω από 50 χώρες, καθένα με τεκμηριωμένη μορφή και αλγόριθμο επικύρωσης.
- Βασικά στοιχεία για συντακτικό περιεχόμενο και scrollytelling προσαρμοσμένα από το Reuters Graphics — διατάξεις άρθρων, scrollers, χρονολόγια, χάρτες πλακιδίων.
-
Βοηθοί επιλογέων — μικρά πακέτα που κατέχουν μία αλληλεπίδραση από άκρη σε άκρη: εναλλαγή θέματος (με φόρτωση φύλλου στυλ κατά την εκτέλεση), γλώσσα, μέγεθος κειμένου, μειωμένη κίνηση, αναζήτηση, σύνδεσμοι σελίδων, κοινοποίηση και εισαγωγή ημερομηνίας και ώρας. Καθένας είναι ένα κεφαλοχωρίς κουμπί εικονιδίου που ανοίγει αναδυόμενο παράθυρο — όχι εγγενές
<select>— με ενσωματωμένη διατήρηση και ασφάλεια SSR.
Θέματα για τον δημόσιο τομέα, έτοιμα προς χρήση
Το Lily περιλαμβάνει 57 αυτόνομα θέματα αναφοράς που στοχεύουν απευθείας τα αγκίστρια κλάσεών του: NHS England, NHS Scotland και NHS Wales (το καθένα σε παραλλαγές για ασθενείς και για επαγγελματίες), GOV.UK, USWDS, παλέτες εμπνευσμένες από τα Adobe Spectrum και Mozilla Protocol, και ένα σύνολο γενικών φωτεινών και σκούρων θεμάτων. Σύνδεσε ένα φύλλο στυλ και μια εμφάνιση κυβερνητικού επιπέδου ενεργοποιείται· ο βοηθός theme-picker τα εναλλάσσει κατά την εκτέλεση.
Πώς συγκρίνεται το Lily
Τηρούμε μια ειλικρινή, στοιχείο προς στοιχείο σύγκριση με άλλα συστήματα σχεδίασης — μορφοποιημένα και κεφαλοχωρίς, εμπορικά και δημόσιου τομέα. Όπου μια άλλη βιβλιοθήκη σου ταιριάζει καλύτερα, η σύγκριση θα το δείξει· το Lily μαθαίνει από όλα και αναφέρει ανοιχτά τις πηγές έμπνευσής του.
Ποιος βρίσκεται πίσω του
Το Lily είναι ένα νεαρό, ανεξάρτητο έργο ανοιχτού κώδικα που καλωσορίζει τη συνεργασία, την καθοδήγηση και τα σχόλια — δες τη σελίδα Σχετικά για την ιστορία και τις πηγές έμπνευσης. Τα πάντα — η προδιαγραφή, οι δοκιμές, ο οδικός χάρτης, ακόμη και τα εργαλεία ελέγχου — είναι ανοιχτά στο github.com/LilyDesignSystem.
Βοήθησε το Lily να μεγαλώσει
Αν το Lily σου είναι χρήσιμο, τα πιο πολύτιμα πράγματα που μπορείς να κάνεις:
- Δώσε αστέρι και μοιράσου το. Δώσε αστέρι στο κύριο αποθετήριο και δείξε σε έναν συνάδελφο τον κατάλογο — η αναγνωρισιμότητα είναι ο πιο σπάνιος πόρος ενός νεαρού έργου.
- Φτιάξε κάτι και πες μας. Οι αναφορές πραγματικής χρήσης — τι δούλεψε, τι θα μπορούσε να είναι πιο ομαλό — διαμορφώνουν τον οδικό χάρτη περισσότερο από οτιδήποτε άλλο.
- Έλεγξε την προσβασιμότητα. Οι διελεύσεις με αναγνώστες οθόνης (VoiceOver, NVDA, JAWS) στις εφαρμογές-παραδείγματα αξίζουν χρυσάφι· κατάθεσε ό,τι βρεις.
- Συνεισέφερε ένα θέμα ή μια μετάφραση. Και τα δύο είναι αυτόνομες, καλά οριοθετημένες πρώτες συνεισφορές.
- Μοιράσου ό,τι βρεις, με ελάχιστη αναπαραγωγή, στο αποθετήριο GitHub ή στείλε email στο joel@joelparkerhenderson.com.