Аргументите за Lily

Lily поема трудните части — семантика, достъпност, поведение на клавиатурата, интернационализация — и оставя външния вид изцяло, с удоволствие, на вас.

Започнете от своя дизайн

Вашият екип вече знае как трябва да изглежда продуктът. Lily започва точно оттам: осигурява частите, които са наистина трудни за правилно изпълнение и скъпи за преправяне — правилния семантичен елемент, състоянията на ARIA, договора за клавиатурата, управлението на фокуса — и оставя всяко визуално решение изцяло, с радост, ваше. Вашият CSS е изгледът на дизайн системата от първия ден.

Тъй като всеки компонент носи стабилна кука за клас и чиста структура, вашата стилизация остава чисто ваша при всяка актуализация — а достъпността отдолу продължава да работи, версия след версия.

За какво се ангажира Lily

  • Достъпен по подразбиране. WCAG 2.2 AAA е целта за всеки компонент. Шаблоните следват WAI-ARIA Authoring Practices; всеки интерактивен компонент се управлява с клавиатура по документиран договор; примерните приложения поддържат чиста база axe-core.
  • Интернационализируем по конструкция. Всеки низ, видим за потребителя — всеки етикет, грешка и съобщение — е свойство със стабилни имена във всички фреймуърци, така че преводът тече естествено. RTL и двупосочният текст наследяват от вашия dir. Компонентите, съобразени с локала, приемат локала като свойство, винаги изрично.
  • Един каталог, осем фреймуърка. Същите 571 компонента (536 като родни Web Components) със същите куки за клас и конвенции за свойства в HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks и Web Components. Вашият CSS и знанията на екипа се пренасят между технологичните стекове.
  • Независим от CSS стратегията. Един стабилен клас в kebab-case на корен на компонент. Семантичен CSS, помощни класове на Tailwind, CSS-in-JS или една от 57-те готови теми — Lily ги приветства всички и грациозно се отдръпва.
  • Безплатен, завинаги, на ваши условия. Отворен код при избран от вас лиценз: BSD, MIT, Apache-2.0, GPL-2.0 или GPL-3.0. Без про ниво, без лицензи на място, без телеметрия.

Дълбочина там, където има значение

Отвъд обичайните бутони и диалози, каталогът стига по-далеч от повечето:

  • Шаблони за публичния сектор проучени от дизайн системите на NHS UK, GOV.UK, USWDS и ONS — обобщения на грешки, предупредителни кутии, обобщаващи списъци, банери за фаза, връзки за прескачане.
  • 140 компонента за национални лични идентификатори които обхващат идентификатори за здравеопазване, национални документи за самоличност, данъци и паспорти в над 50 държави, всеки с документиран формат и алгоритъм за валидиране.
  • Основни елементи за редакционно съдържание и scrollytelling адаптирани от Reuters Graphics — оформления на статии, скролъри, времеви линии, плочкови карти.
  • Помощници за избор — малки пакети, които притежават едно взаимодействие от край до край: смяна на тема (със зареждане на стилов лист по време на изпълнение), език, размер на текста, намалено движение, търсене, връзки към страници, споделяне и въвеждане на дата и час. Всеки е безглав бутон с икона, който отваря изскачащ прозорец — не родно <select> — с вградена устойчивост и безопасност за SSR.

Теми за публичния сектор, готови веднага

Lily се доставя с 57 самостоятелни референтни теми, които са насочени директно към неговите куки за клас: NHS England, NHS Scotland и NHS Wales (всяка във варианти за пациенти и за практикуващи), GOV.UK, USWDS, палитри, вдъхновени от Adobe Spectrum и Mozilla Protocol, и набор от универсални светли и тъмни теми. Свържете един стилов лист и изглед на правителствено ниво е включен; помощникът theme-picker ги сменя по време на изпълнение.

Как се сравнява Lily

Поддържаме честно, компонент по компонент сравнение с други дизайн системи — стилизирани и безглави, търговски и за публичния сектор. Където друга библиотека ви подхожда повече, сравнението ще го покаже; Lily се учи от всички и открито посочва източниците си на вдъхновение.

Кой стои зад него

Lily е млад, независим проект с отворен код, който приветства сътрудничество, насоки и обратна връзка — вижте За проекта за историята и източниците на вдъхновение. Всичко — спецификацията, тестовете, пътната карта, дори инструментите за одит — е отворено на github.com/LilyDesignSystem.

Помогнете на Lily да расте

Ако Lily ви е полезен, най-ценните неща, които можете да направите:

  • Дайте звезда и споделете. Дайте звезда на основното хранилище и покажете на колега каталога — осведомеността е най-оскъдният ресурс на младия проект.
  • Изградете нещо и ни кажете. Докладите за реална употреба — какво е проработило, какво може да е по-гладко — оформят пътната карта повече от всичко останало.
  • Одитирайте достъпността. Прегледите с екранни четци (VoiceOver, NVDA, JAWS) на примерните приложения са злато; съобщете какво откриете.
  • Допринесете с тема или превод. И двете са самостоятелни, добре очертани първи приноси.
  • Споделете какво откривате, с минимално възпроизвеждане, в хранилището на GitHub или пишете на joel@joelparkerhenderson.com.