Какво е Lily?

Накратко

Lily е каталог от уеб компоненти, всеки реализиран в осем безглави варианта (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks и Web Components), плюс набор от готови примерни приложения, които показват как да се стилизират.

Безглавите версии се доставят с нула 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 говори всеки език, който говорите и вие.

Безглав

Безглавите компоненти имат нула CSS, никакви блокове <style> , никакви дизайн токени, които не сте избрали. Те излагат едно име на клас в kebab-case на всеки коренов елемент, за да ги насочвате както желаете — семантичен CSS, Tailwind, CSS-in-JS, вие решавате.

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

Примерните приложения показват как да стилизирате компонентите за реална употреба — какви дизайн токени да зададете, какви варианти да добавите, как да съставяте страници. Те са пълни приложения със SvelteKit, Next.js, Nuxt, Blazor и Eleventy, не просто пясъчници.

Източници на вдъхновение

Lily черпи шаблони и език от умишлено широк набор от дизайн системи:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

Лиценз

Lily е с множество лицензи: BSD, MIT, Apache-2.0, GPL-2.0 или GPL-3.0. Изберете този, който подхожда на проекта ви. Ако нито един не става, свържете се с нас.

Контакт

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

Открихте грешка, имате идея, искате да допринесете с компонент? Отворете issue или pull request в GitHub.