Lily Design System™

Що таке 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 запозичує шаблони та мову з навмисно широкого кола дизайн-систем:

Ліцензія

Lily має кілька ліцензій, зокрема BSD, MIT, Apache-2.0, GPL-2.0 або GPL-3.0. Оберіть ту, що підходить вашому проєкту. Якщо жодна не підходить — зв’яжіться з нами.

Контакти

Керівник проєкту: Joel Parker Henderson — joel@joelparkerhenderson.com.

Знайшли помилку, маєте ідею, хочете запропонувати компонент? Відкрийте issue або pull request на GitHub.

Стан: Lily — цілком нова робота, і ми вітаємо співпрацю, поради та відгуки. Усе буде рухатися й розвиватися.