Lily Design System™

Sinau Lily, langkah demi langkah

Sugeng rawuh! Saben tutorial diwiwiti saka nol lan mbangun bab cilik sing padha — formulir sing bisa diaksès lan digayani — ing kira-kira 10 menit, supaya sampéyan bisa mbandhingaké framework kanthi imbang. Banjur luwih jero karo tema lan preferensi pangguna.

Sadurungé miwiti

Sampéyan butuh sithik banget:

  • Kanggo tutorial HTML — mung browser lan panyunting tèks. Kuwi kabèh kothak pirantiné.
  • Kanggo Svelte, React, Vue, Angular, utawa Nunjucks — git, Node 26, lan pnpm 10 utawa luwih anyar.
  • Kanggo Blazor — git lan .NET SDK 8 utawa luwih anyar.

Anyar karo komponèn tanpa sirah? Sampéyan ana ing panggonan sing bener — saben tutorial njlèntrèhaké apa sing kelakon, lan saben langkah nuduhaké kode pas sing kudu disalin.

Papat langkah saka nol nganti dirilis

  1. Komponèn kapisan sampéyan (~5 menit) — pilih framework sampéyan ing ngisor, jupuk kodené, lan render Button.
  2. Rakit lan gaya (~5 menit) — bangun formulir kanthi labèl lan gayani nganggo pancingan kelas kebab-case (bagéan saka saben tutorial framework).
  3. Wènèhana tema (~15 menit) — ganti CSS tulisan tangan sampéyan nganggo salah siji saka 57 tema siap, banjur supaya pangguna ngganti nalika mlaku: tutorial tema.
  4. Ajènana preferensi (~15 menit) — tambahna pilihan basa lan ukuran tèks nganggo pembantu preferensi: tutorial pembantu.

Pilih framework sampéyan

HTML

Salinen HTML semantik nganggo pancingan kelas lan lanjutna — browser lan panyunting wis cukup.

~10 menit · wiwitan paling gampang

Svelte

Rune Svelte 5, snippet, lan pangiketan rong arah nganggo bind:value .

~10 menit

React

Komponèn fungsi nganggo value + onChange lan panyebaran properti sisa.

~10 menit

Vue

Komponèn siji-berkas Vue 3 kanthi dhukungan v-model .

~10 menit

Angular

Komponèn mandiri Angular nganggo input sinyal lan [(value)].

~10 menit

Blazor

Komponèn Razor nganggo parameter, ChildContentlan tés bUnit.

~10 menit

Nunjucks

Makro sing dirender ing server kanggo Eleventy lan pipeline templat Node apa waé.

~10 menit

Bingung milih? Wiwiti karo HTML — mulangaké kontrak pancingan kelas sing dienggo bareng kabèh framework liyané, lan mlaku langsung saka berkas.

Luwih jero

Tema

Sambungna salah siji saka 57 tema siap — NHS, GOV.UK, USWDS, padhang, peteng, lan liyané — timpanana nganggo CSS sampéyan dhéwé, lan tambahna ganti tema nalika mlaku nganggo pembantu theme-picker.

~15 menit

Pembantu preferensi

Wènèhana pangguna kontrol tema, basa, ukuran tèks, gerakan, panelusuran, tautan kaca, nuduhaké, lan input tanggal/wektu nganggo theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, lan date-time-picker: kontrol tanpa sirah kanthi persistensi, keamanan SSR, lan deteksi RTL otomatis.

~15 menit

Sawisé tutorial

  • Jelajahi katalog komponèn — saben komponèn ndokumentasiaké properti, kontrak ARIA, lan prilaku keyboardé.
  • Kloning aplikasi conto kanggo ndeleng kabèh 571 komponèn digayani lan makarya bebarengan — CSS nargetaké pancingan kelas sing padha karo sing lagi waé sampéyan enggo, dadi salinen bagéan apa waé menyang proyèk sampéyan lan setèlen manut kekarepan.
  • Pitakon? Kaca bantuan duwé wangsulan, FAQ, lan cara tekan manungsa sing ramah. Lan yèn tutorial bisa luwih cetha, kandhanana kita — kita bakal seneng nambahi.