Lily Design System™

¿Qué es Lily?

Un sistema de diseño gratuito, de código abierto y accesible desde el principio, que te encuentra donde programas y se aparta de tu camino cuando no lo necesitas.

La versión corta

Lily es un catálogo de componentes web, cada uno implementado en ocho variantes headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks y Web Components), además de un conjunto de aplicaciones de ejemplo completas que muestran cómo darles estilo.

Las versiones headless no incluyen nada de CSS. Te ofrecen HTML semántico, roles y estados ARIA, compatibilidad con el teclado y propiedades pensadas para la internacionalización. Tú aportas el diseño visual.

Principios de diseño

Accesible

Todo componente parte del HTML semántico. ARIA se añade únicamente donde el HTML por sí solo no puede expresar el patrón. Los componentes apuntan a WCAG 2.2 AAA: se tienen en cuenta los colores, el espaciado, el foco y la navegación con teclado.

Componible

Lily prefiere componentes pequeños, de un solo propósito, que encajan entre sí. Los patrones compuestos aparecen una y otra vez:

  • Nav → List → ListItem — para migas de pan, listas de contenido, menús de acordeón, menús de árbol y paginación
  • Form → Field → Input — para cualquier formulario con etiquetas, sugerencias y errores
  • Table → Head/Body/Foot → Row → Data — para tablas, calendarios, diagramas de Gantt y tableros kanban
  • Bar → BarButton — para barras de herramientas, de pestañas, de tareas, de acciones y de menús
  • Picker → PickerButton — para selectores de color, de valoración y de tema

Internacionalizable

Ni una sola cadena visible para el usuario está escrita directamente en el código. Etiquetas, marcadores de posición, mensajes de error, texto de botones: todo son parámetros. Incorpora tu propio sistema de traducción y Lily hablará el idioma que hables tú.

Headless

Los componentes headless no tienen CSS, ni bloques <style>, ni tokens de diseño que no hayas elegido. Exponen un único nombre de clase en kebab-case en cada elemento raíz, para que puedas apuntarles como prefieras: CSS semántico, Tailwind, CSS-in-JS, tú decides.

Ejemplos completos

Las aplicaciones de ejemplo muestran cómo dar estilo a los componentes en un uso real: qué tokens de diseño definir, qué variaciones añadir y cómo componer páginas. Son aplicaciones completas de SvelteKit, Next.js, Nuxt, Blazor y Eleventy, no simples entornos de pruebas.

Inspiraciones

Lily toma patrones y lenguaje de un conjunto deliberadamente amplio de sistemas de diseño:

Licencia

Lily tiene licencia múltiple: BSD, MIT, Apache-2.0, GPL-2.0 o GPL-3.0. Elige la que mejor se adapte a tu proyecto. Si ninguna te sirve, ponte en contacto con nosotros.

Contacto

Responsable del proyecto: Joel Parker Henderson — joel@joelparkerhenderson.com.

¿Has encontrado un error, tienes una idea o quieres aportar un componente? Abre una incidencia o una solicitud de cambios en GitHub.

Estado: Lily es un trabajo recién nacido y agradecemos la colaboración, la orientación y los comentarios. Las cosas cambiarán y evolucionarán.