Lily Design System™

Qu'est-ce que Lily ?

Un système de conception gratuit, open source et pensé d'abord pour l'accessibilité, qui vous rejoint là où vous codez — et s'efface quand vous n'en avez pas besoin.

La version courte

Lily est un catalogue de composants web, chacun décliné en huit versions headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks et Web Components), accompagné d'applications d'exemple complètes qui montrent comment les mettre en forme.

Les versions headless ne livrent aucun CSS. Elles vous donnent du HTML sémantique, des rôles et états ARIA, la prise en charge du clavier et des propriétés adaptées à l'internationalisation. Vous apportez le design visuel.

Principes de conception

Accessible

Chaque composant part du HTML sémantique. ARIA n'est ajouté que là où le HTML seul ne peut pas exprimer le motif. Les composants visent WCAG 2.2 AAA : couleurs, espacements, focus et navigation au clavier sont tous pris en compte.

Composable

Lily privilégie de petits composants à usage unique qui s'emboîtent. Les motifs composés reviennent sans cesse :

  • Nav → List → ListItem — pour les fils d'Ariane, les tables des matières, les menus accordéon, les menus en arborescence et la pagination
  • Form → Field → Input — pour toute mise en page de formulaire avec libellés, indications et erreurs
  • Table → Head/Body/Foot → Row → Data — pour les tableaux, calendriers, diagrammes de Gantt et tableaux kanban
  • Bar → BarButton — pour les barres d'outils, d'onglets, de tâches, d'actions et de menus
  • Picker → PickerButton — pour les sélecteurs de couleur, de notation et de thème

Internationalisable

Aucune chaîne visible par l'utilisateur n'est écrite en dur. Libellés, textes indicatifs, messages d'erreur, texte des boutons : tout est paramétrable. Branchez votre propre système de traduction et Lily parle la langue que vous parlez.

Headless

Les composants headless n'ont aucun CSS, aucun bloc <style>, aucun jeton de design que vous n'avez pas choisi. Ils exposent un seul nom de classe en kebab-case sur chaque élément racine, pour que vous puissiez les cibler comme vous le souhaitez — CSS sémantique, Tailwind, CSS-in-JS, à vous de choisir.

Des exemples complets

Les applications d'exemple montrent comment mettre en forme les composants pour un usage réel : quels jetons de design définir, quelles variantes ajouter, comment composer les pages. Ce sont de vraies applications SvelteKit, Next.js, Nuxt, Blazor et Eleventy, pas de simples bacs à sable.

Sources d'inspiration

Lily puise ses motifs et son vocabulaire dans un ensemble délibérément large de systèmes de conception :

Licence

Lily est sous licences multiples : BSD, MIT, Apache-2.0, GPL-2.0 ou GPL-3.0. Choisissez celle qui convient à votre projet. Si aucune ne vous convient, contactez-nous.

Contact

Responsable du projet : Joel Parker Henderson — joel@joelparkerhenderson.com.

Vous avez trouvé un bogue, une idée, l'envie de proposer un composant ? Ouvrez un ticket ou une demande de fusion sur GitHub.

État : Lily est un travail tout neuf et nous accueillons volontiers la collaboration, les conseils et les retours. Les choses vont bouger et évoluer.