Δες το Lily σε πραγματικές εφαρμογές
Επτά πλήρη έργα-παραδείγματα δείχνουν πώς να πάρεις τα κεφαλοχωρίς στοιχεία, να προσθέσεις μορφοποίηση και να δημοσιεύσεις έναν πραγματικό ιστότοπο. Διάλεξε το πλαίσιο που χρησιμοποιείς.
Εφαρμογές επίδειξης με πλήρες CSS και δρομολόγηση
HTML JavaScript
Απλές σελίδες HTML, καθαρή JavaScript, χωρίς εργαλεία δόμησης. Χωράει σε οποιονδήποτε στατικό διακομιστή — ιδανικό για μικρούς ιστότοπους και προοδευτική βελτίωση.
Svelte + SvelteKit
Εφαρμογή SvelteKit 3 με runes του Svelte 5. Διαδρομές στοιχείων, δρομολόγηση βάσει αρχείων και μορφοποιημένο storybook για κάθε στοιχείο.
React + Next.js
Εφαρμογή Next.js 16 που δείχνει κάθε στοιχείο στο πλαίσιό του, με TypeScript παντού και σελίδες επίδειξης για σύνθετα μοτίβα.
Vue + Nuxt.js
Εφαρμογή Nuxt 4. <script setup> και το Composition API σε κάθε διαδρομή επίδειξης.
Angular + Analog
Εφαρμογή Angular 22 + Analog.js. Δρομολόγηση βάσει αρχείων, signals, ανίχνευση αλλαγών χωρίς zones και πλήρης προαπόδοση SSG.
Blazor Web
Εφαρμογή Blazor Web με στοιχεία Razor. Φιλική προς τον διακομιστή και το WebAssembly, με βάση το .NET 10.
Nunjucks + Eleventy
Ιστότοπος Eleventy με μακροεντολές Nunjucks. Ιδανικός για στατικούς ιστότοπους με πολύ περιεχόμενο που θέλουν παρ' όλα αυτά ένα πραγματικό σύστημα στοιχείων.
Κάθε εφαρμογή-παράδειγμα έχει το ίδιο σχήμα
Για να μοιάζει οικείο το πέρασμα από πλαίσιο σε πλαίσιο, κάθε εφαρμογή-παράδειγμα παρέχει:
- Μια διαδρομή καλωσορίσματος στο
/που παρουσιάζει το έργο. - Ένα ευρετήριο στοιχείων στο
/componentsπου απαριθμεί κάθε στοιχείο. - Μια σελίδα επίδειξης για κάθε στοιχείο στο
/components/<component>. - Πραγματικό CSS — όχι αφηρημένα design tokens — ώστε να δανείζεσαι στυλ απευθείας.
- Λειτουργική πλοήγηση με πληκτρολόγιο και διαχείριση εστίασης αμέσως.
Χρειάζεσαι να δεις πώς μορφοποιείται ένα μεμονωμένο στοιχείο;
Άνοιξε την αντίστοιχη εφαρμογή-παράδειγμα, πήγαινε στο
/components/<name>και αντίγραψε το markup και το CSS στο δικό σου έργο. Οι εφαρμογές-παραδείγματα χρησιμοποιούν σκόπιμα απλό (ή σχεδόν απλό) CSS ώστε να τις προσαρμόσεις σε όποιο σύστημα προτιμάς.
Προτιμάς κεφαλοχωρίς;
Συνδύασε οποιαδήποτε εφαρμογή-παράδειγμα με το αντίστοιχο κεφαλοχωρίς πακέτο — αυτά δημοσιεύουν τα ίδια στοιχεία χωρίς κανένα CSS, έτοιμα για τα δικά σου design tokens.