Lily Design System™

Tutorial de HTML

El comienzo más simple posible: copia HTML semántico con los ganchos de clase de Lily, añade una hoja de estilos y publica. Archivos sencillos que funcionan en cualquier lugar donde funcione HTML.

Qué vas a construir

Un pequeño formulario de contacto: campos con etiquetas, un botón de envío, comportamiento real de teclado y lector de pantalla; primero desnudo, luego con estilo, en unos 10 minutos.

Antes de empezar

Necesitas un navegador y un editor de texto. Eso es todo. (git ayuda a obtener los archivos de los componentes, pero también puedes copiarlos desde GitHub en el navegador.)

Paso 1: Obtén el código

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

Cada componente es un archivo independiente en components/ — button.html, text-input.htmly así sucesivamente, con un comentario de cabecera que documenta su etiqueta HTML, su gancho de clase, su comportamiento de teclado y su contrato de accesibilidad. Los archivos son la biblioteca: copia lo que necesites y adelante.

Paso 2: Tu primer componente

Abre components/button.html, o simplemente escribe el marcado: el gancho de clase es el contrato:

<button class="button" type="button">
  Save
</button>

Como es un <button>real, el foco de teclado, la activación con Intro y Espacio y el rol implícito de botón ya son correctos.

Paso 3: Compón un formulario pequeño

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

Fíjate en el patrón: cada control enlaza su propio <label for>, usa el tipo de input más específico y lleva exactamente un gancho de clase en kebab-case.

Comprueba tu trabajo: abre la página en un navegador. Se ve sencilla, tal como se pretendía: el estilo aún está por venir. Pulsa Tab: el foco recorre cada control, se anuncian las etiquetas y el envío funciona. El comportamiento está hecho; el aspecto es tuyo y es el siguiente paso.

Paso 4: Dale estilo

Escribe CSS contra los ganchos:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

O salta por completo el escribir CSS a mano: enlaza uno de los 45 temas ya hechos y el mismo marcado se ilumina: 

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

Paso 5: Explora más

  • Las pruebas del repositorio se ejecutan en navegadores reales: pnpm install && pnpm test (WebDriverIO).
  • Storybook para cada componente: pnpm run storybook.
  • La aplicación de ejemplo HTML+CSS+JS muestra los 571 componentes con estilo, con búsqueda y demostrados.

Próximos pasos

¿Dudas por el camino? La página de ayuda está llena de respuestas, y si algún paso puede ser más claro, cuéntanoslo y con gusto mejoraremos el tutorial.