Τι είναι το Lily;

Εν συντομία

Το Lily είναι ένας κατάλογος στοιχείων ιστού, καθένα από τα οποία υλοποιείται σε οκτώ κεφαλοχωρίς (headless) εκδοχές (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks και Web Components), συν ένα σύνολο πλήρων εφαρμογών-παραδειγμάτων που δείχνουν πώς να τα μορφοποιήσεις.

Οι κεφαλοχωρίς εκδόσεις περιλαμβάνουν μηδενικό CSS. Σου δίνουν σημασιολογικό HTML, ρόλους και καταστάσεις ARIA, υποστήριξη πληκτρολογίου και ιδιότητες φιλικές προς τη διεθνοποίηση. Τον οπτικό σχεδιασμό τον φέρνεις εσύ.

Αρχές σχεδίασης

Προσβάσιμο

Κάθε στοιχείο ξεκινά από σημασιολογικό HTML. Το ARIA προστίθεται μόνο εκεί όπου το HTML από μόνο του δεν μπορεί να εκφράσει το μοτίβο. Τα στοιχεία στοχεύουν στο WCAG 2.2 AAA — χρώματα, αποστάσεις, εστίαση και πλοήγηση με πληκτρολόγιο λαμβάνονται όλα υπόψη.

Συνδυάσιμο

Το Lily προτιμά μικρά στοιχεία ενός σκοπού που ταιριάζουν μεταξύ τους. Τα σύνθετα μοτίβα επανέρχονται ξανά και ξανά:

• Nav → List → ListItem — για διαδρομές πλοήγησης (breadcrumbs), καταλόγους περιεχομένων, μενού ακορντεόν, μενού δέντρου και σελιδοποίηση
• Form → Field → Input — για οποιαδήποτε διάταξη φόρμας με ετικέτες, υποδείξεις και σφάλματα
• Table → Head/Body/Foot → Row → Data — για πίνακες, ημερολόγια, διαγράμματα Gantt και πίνακες kanban
• Bar → BarButton — για γραμμές εργαλείων, γραμμές καρτελών, γραμμές εργασιών, γραμμές ενεργειών και γραμμές μενού
• Picker → PickerButton — για επιλογείς χρώματος, επιλογείς βαθμολογίας, επιλογείς θέματος

Διεθνοποιήσιμο

Ούτε μία ορατή στον χρήστη συμβολοσειρά δεν είναι γραμμένη στον κώδικα. Ετικέτες, κειμενοφύλακες, μηνύματα σφάλματος, κείμενο κουμπιών — όλα είναι παράμετροι. Σύνδεσε το δικό σου σύστημα μετάφρασης και το Lily μιλά όποια γλώσσα μιλάς κι εσύ.

Κεφαλοχωρίς

Τα κεφαλοχωρίς στοιχεία έχουν μηδενικό CSS, κανένα μπλοκ <style> , κανένα design token που δεν επέλεξες. Εκθέτουν ένα μόνο όνομα κλάσης σε kebab-case σε κάθε ριζικό στοιχείο, ώστε να τα στοχεύεις όπως θέλεις — σημασιολογικό CSS, Tailwind, CSS-in-JS, εσύ αποφασίζεις.

Πλήρη παραδείγματα

Οι εφαρμογές-παραδείγματα δείχνουν πώς να μορφοποιήσεις τα στοιχεία για πραγματική χρήση — ποια design tokens να ορίσεις, ποιες παραλλαγές να προσθέσεις, πώς να συνθέσεις σελίδες. Είναι πλήρεις εφαρμογές SvelteKit, Next.js, Nuxt, Blazor και Eleventy, όχι απλώς δοκιμαστικοί χώροι.

Πηγές έμπνευσης

Το Lily αντλεί μοτίβα και γλώσσα από ένα σκόπιμα ευρύ σύνολο συστημάτων σχεδίασης:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

Άδεια χρήσης

Το Lily έχει πολλαπλές άδειες: BSD, MIT, Apache-2.0, GPL-2.0 ή GPL-3.0. Διάλεξε όποια ταιριάζει στο έργο σου. Αν καμία δεν ταιριάζει, επικοινώνησε μαζί μας.

Επικοινωνία

Επικεφαλής έργου: Joel Parker Henderson — joel@joelparkerhenderson.com.

Βρήκες σφάλμα, έχεις ιδέα, θέλεις να συνεισφέρεις ένα στοιχείο; Άνοιξε ένα issue ή ένα pull request στο GitHub.