Ikusi Lily benetako aplikazioetan
Zazpi adibide-proiektu landuk erakusten dute osagai buru gabeak hartu, estiloa gehitu eta benetako webgune bat argitaratzen. Aukeratu erabiltzen duzun framework-a.
Demo-aplikazioak CSS osoarekin eta bideratzearekin
HTML JavaScript
HTML orri soilak, JavaScript hutsa, eraikitze-tresnarik gabe. Edozein ostatatze estatikotan sartzen da — webgune txikietarako eta hobekuntza progresiborako ezin hobea.
Svelte + SvelteKit
Svelte 5 runes erabiltzen dituen SvelteKit 3 aplikazioa. Osagai-ibilbideak, fitxategietan oinarritutako bideratzea eta osagai bakoitzaren storybook estilatua.
React + Next.js
Next.js 16 aplikazioa, osagai bakoitza testuinguruan erakusten duena, TypeScript osoan zehar eta patroi konposatuen demo-orriekin.
Vue + Nuxt.js
Nuxt 4 aplikazioa. <script setup> eta Composition API demo-ibilbide guztietan.
Angular + Analog
Angular 22 + Analog.js aplikazioa. Fitxategietan oinarritutako bideratzea, seinaleak, zonarik gabeko aldaketa-detekzioa eta SSG aurre-errendatze osoa.
Blazor Web
Blazor Web aplikazioa Razor osagaiekin. Zerbitzari eta WebAssembly lagunkoia, .NET 10 oinarriarekin.
Nunjucks + Eleventy
Nunjucks makroak erabiltzen dituen Eleventy gunea. Eduki askoko gune estatikoetarako ezin hobea, osagai-sistema erreal bat nahi dutenentzat.
Adibide-aplikazio guztiek forma bera dute
Framework batetik bestera jauzi egitea ezaguna senti dadin, adibide-aplikazio bakoitzak hauek eskaintzen ditu:
- Ongi etorri-ibilbide bat hemen:
/proiektua aurkezten duena. - Osagai-indize bat hemen:
/componentsosagai guztiak zerrendatzen dituena. - Osagai bakoitzaren demo-orri bat hemen:
/components/<component>. - CSS erreala — diseinu-token abstraktuak ez — estiloak zuzenean kopiatu ahal izateko.
- Teklatu-nabigazioa eta fokuaren kudeaketa kutxatik ateratzen den bezala.
Osagai bakar bat nola estilatzen den ikusi behar duzu?
Ireki dagokion adibide-aplikazioa, joan hona:
/components/<name>, eta kopiatu markaketa eta CSSa zure proiektura. Adibide-aplikazioek nahita CSS soila (edo ia soila) erabiltzen dute, nahi duzun edozein sistemarako egokitu ahal izateko.
Buru gabeko bertsioa nahiago?
Parekatu edozein adibide-aplikazio dagokion buru gabeko paketearekin — osagai berberak argitaratzen dituzte CSSrik gabe, zure diseinu-tokenetarako prest.