Lily Design System™

Вивчайте Lily крок за кроком

Ласкаво просимо! Кожен посібник починається з нуля й будує одне й те саме невелике — доступну стилізовану форму — приблизно за 10 хвилин, щоб ви могли порівнювати фреймворки в рівних умовах. Потім заглибтеся в теми та налаштування користувача.

Перш ніж почати

Вам потрібно напрочуд мало:

  • Для посібника з HTML — лише браузер і текстовий редактор. Це весь інструментарій.
  • Для Svelte, React, Vue, Angular або Nunjucks — git, Node 26 і pnpm 10 або новіший.
  • Для Blazor — git і .NET SDK 8 або новіший.

Новачок у «безголових» компонентах? Ви в потрібному місці — кожен посібник пояснює, що відбувається, а кожен крок показує точний код для копіювання.

Чотири кроки від нуля до випуску

  1. Ваш перший компонент (~5 хвилин) — оберіть свій фреймворк нижче, отримайте код і відрендеріть Button.
  2. Складіть і стилізуйте (~5 хвилин) — побудуйте форму з мітками й стилізуйте її за клас-гачками kebab-case (частина кожного посібника з фреймворку).
  3. Додайте тему (~15 хвилин) — замініть написаний вручну CSS однією з 57 готових тем, а потім дозвольте користувачам перемикати її під час виконання: посібник із тем.
  4. Поважайте налаштування (~15 хвилин) — додайте вибір мови та розміру тексту за допомогою допоміжних засобів налаштувань: посібник із допоміжних засобів.

Оберіть свій фреймворк

HTML

Скопіюйте семантичний HTML з клас-гачками й рушайте — потрібні лише браузер і редактор.

~10 хвилин · найпростіший старт

Svelte

Runes Svelte 5, snippets і bind:value двостороннє зв’язування.

~10 хвилин

React

Функціональні компоненти з value + onChange і розповсюдженням rest-prop.

~10 хвилин

Vue

Однофайлові компоненти Vue 3 з підтримкою v-model .

~10 хвилин

Angular

Автономні компоненти Angular із сигнальними входами та [(value)].

~10 хвилин

Blazor

Компоненти Razor з параметрами, ChildContent, і тестами bUnit.

~10 хвилин

Nunjucks

Серверно-рендерені макроси для Eleventy та будь-якого конвеєра шаблонів Node.

~10 хвилин

Вагаєтеся? Почніть із HTML — він навчає контракту клас-гачків, спільного для всіх інших фреймворків, і запускається прямо з файлу.

Заглибтеся

Теми

Підключіть одну з 57 готових тем — NHS, GOV.UK, USWDS, світла, темна та інші — перевизначте її власним CSS і додайте перемикання теми під час виконання за допомогою theme-picker.

~15 хвилин

Допоміжні засоби налаштувань

Дайте користувачам керування темою, мовою, розміром тексту, рухом, пошуком, посиланнями на сторінки, поширенням і введенням дати/часу за допомогою theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker і date-time-picker: «безголові» елементи керування зі стійкістю, безпекою SSR і автоматичним визначенням RTL.

~15 хвилин

Після посібників

  • Перегляньте каталог компонентів — кожен компонент документує свої властивості, контракт ARIA та поведінку клавіатури.
  • Клонуйте приклад застосунку щоб побачити всі 571 компонентів стилізованими й такими, що працюють разом — CSS націлений на ті самі клас-гачки, які ви щойно використовували, тож скопіюйте будь-яку його частину до свого проєкту й змінюйте як завгодно.
  • Питання? сторінка допомоги містить відповіді, поширені запитання та способи зв’язатися з доброзичливою людиною. А якщо посібник може бути зрозумілішим, повідомте нам — ми із задоволенням його покращимо.