Lily Design System™

Tutorial de HTML

O início mais simples possível: copie HTML semântico com os ganchos de classe da Lily, adicione uma folha de estilos, publique. Ficheiros simples que funcionam em qualquer lugar onde o HTML funcione.

O que vai construir

Um pequeno formulário de contacto — campos com etiquetas, um botão de envio, comportamento real de teclado e leitor de ecrã — primeiro simples, depois estilizado, em cerca de 10 minutos.

Antes de começar

Precisa de um navegador e de um editor de texto. É tudo. (O git ajuda a obter os ficheiros dos componentes, mas também os pode copiar do GitHub no navegador.)

Passo 1 — Obter o código

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

Cada componente é um ficheiro autónomo em components/ — button.html, text-input.htmle assim por diante — com um comentário de cabeçalho que documenta a sua etiqueta HTML, o gancho de classe, o comportamento de teclado e o contrato de acessibilidade. Os ficheiros são a biblioteca — copie o que precisar e siga.

Passo 2 — O seu primeiro componente

Abra components/button.html, ou escreva simplesmente a marcação — o gancho de classe é o contrato:

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

Como é um <button>real, o foco de teclado, a ativação com Enter e Espaço e a função implícita de botão já estão corretos.

Passo 3 — Componha um pequeno formulário

<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>

Repare no padrão: cada controlo liga o seu próprio <label for>, usa o tipo de input mais específico e leva exatamente um gancho de classe em kebab-case.

Verifique o seu trabalho: abra a página num navegador. Parece simples — exatamente como pretendido: o estilo ainda está por vir. Prima Tab: o foco percorre cada controlo, as etiquetas são anunciadas e o envio funciona. O comportamento está feito; o aspeto é seu e é o passo seguinte.

Passo 4 — Estilize-o

Escreva CSS contra os 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; }

Ou salte por completo a escrita de CSS à mão — ligue um dos 45 temas prontos e a mesma marcação ilumina-se: 

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

Passo 5 — Explore mais

  • Os testes do repositório correm em navegadores reais: pnpm install && pnpm test (WebDriverIO).
  • Storybook para cada componente: pnpm run storybook.
  • A aplicação de exemplo HTML+CSS+JS mostra os 571 componentes estilizados, pesquisáveis e demonstrados.

Passos seguintes

Dúvidas pelo caminho? A página de ajuda está cheia de respostas — e se algum passo puder ser mais claro, diga-nos e melhoraremos o tutorial com todo o gosto.