Что такое Lily?

Коротко

Lily — это каталог веб-компонентов, каждый из которых реализован в восьми headless-вариантах (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks и Web Components), а также набор готовых примеров приложений, показывающих, как их оформлять.

Headless-версии поставляются совсем без CSS. Они дают вам семантический HTML, роли и состояния ARIA, поддержку клавиатуры и свойства, удобные для интернационализации. Визуальное оформление — за вами.

Принципы проектирования

Доступность

Каждый компонент начинается с семантического HTML. ARIA добавляется только там, где одного HTML недостаточно, чтобы выразить паттерн. Компоненты нацелены на WCAG 2.2 AAA: учитываются цвета, отступы, фокус и навигация с клавиатуры.

Компонуемость

Lily отдаёт предпочтение небольшим компонентам с одной задачей, которые собираются друг с другом. Составные паттерны встречаются снова и снова:

• Nav → List → ListItem — для «хлебных крошек», оглавлений, меню-аккордеонов, древовидных меню и постраничной навигации
• Form → Field → Input — для любой компоновки формы с подписями, подсказками и ошибками
• Table → Head/Body/Foot → Row → Data — для таблиц, календарей, диаграмм Ганта и канбан-досок
• Bar → BarButton — для панелей инструментов, вкладок, задач, действий и меню
• Picker → PickerButton — для выбора цвета, оценки и темы

Интернационализация

Ни одна строка, видимая пользователю, не зашита в код. Подписи, подсказки в полях, сообщения об ошибках, тексты кнопок — всё это параметры. Подключите собственную систему перевода, и Lily заговорит на любом языке, на котором говорите вы.

Headless

У headless-компонентов нет CSS, нет блоков <style>, нет дизайн-токенов, которые вы не выбирали. Они предоставляют одно имя класса в kebab-case на каждом корневом элементе, чтобы вы могли обращаться к ним как угодно: семантический CSS, Tailwind, CSS-in-JS — на ваше усмотрение.

Готовые примеры

Примеры приложений показывают, как оформлять компоненты для реального использования: какие дизайн-токены задать, какие варианты добавить, как собирать страницы. Это полноценные приложения на SvelteKit, Next.js, Nuxt, Blazor и Eleventy, а не просто песочницы.

Источники вдохновения

Lily заимствует паттерны и язык у намеренно широкого набора дизайн-систем:

• Дизайн-система NHS UK
• Дизайн-система GOV.UK
• Веб-дизайн-система США (USWDS)
• Дизайн-система ONSdigital
• Design System AU (правительство Австралии)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Графические компоненты Reuters

Лицензия

Lily распространяется по нескольким лицензиям: BSD, MIT, Apache-2.0, GPL-2.0 или GPL-3.0. Выберите ту, что подходит вашему проекту. Если ни одна не подходит, свяжитесь с нами.

Контакты

Руководитель проекта: Joel Parker Henderson — joel@joelparkerhenderson.com.

Нашли ошибку, есть идея, хотите предложить компонент? Откройте обращение (issue) или запрос на слияние (pull request) на GitHub.