Cómo se organiza LUZ

Límites entre paquetes

Cada paquete depende de los que aparecen por encima en esta lista, nunca de los que aparecen por debajo.

El nombre significa Light, Usable & Zero-dependency: ligero (CSS sin procesar y módulos ES, sin nada que compilar para quienes lo usan), usable por todo el mundo (HTML nativo, tres modos de color y pruebas de accesibilidad) y sin dependencias en tiempo de ejecución.

@luz-ds/tokens   -> primitive and semantic tokens (standalone)
      ↓ required by
@luz-ds/core     -> components, objects, bare-element styles, optional JS
      ↓ required by
@luz-ds/catalog     -> search, cookie-consent, theme-time, lang-switch, submenu, announcement, and the patterns of a landing page, a blog or newspaper, a web application and a documentation site

• El catálogo necesita core y tokens; core necesita tokens; tokens no necesita nada.
• Tokens, core y catalog comparten versión. No hay paquetes para un tipo de sitio: los patrones de una landing page, un blog, una aplicación o un sitio de documentación son componentes del catálogo, un archivo cada uno.
• Los paquetes lo declaran como dependencias peer. Los scripts de core y catalog avisan en la consola si falta una capa.

La documentación sigue a los paquetes, con un área más: Tipos de sitio reúne, para cada tipo, el prompt para un LLM y las recetas de sus partes, hechas con los paquetes de arriba y con los patrones de ese tipo en el catálogo.

Qué necesita cada paquete

Busca la pieza que quieres y instala el paquete de su fila y los que aparecen debajo.

• Dos formas de maquetar una página, ambas de core. .o-shell con .o-main: una columna lateral junto al área principal. .o-page: cabecera, contenido y pie en una columna. Elige una para la estructura de la página: la primera si tiene barra lateral y la segunda si no. Las cabeceras y los pies de landing o CMS funcionan con ambas; esta documentación usa .o-shell.
• El catálogo necesita core, y core necesita tokens, así que cada paquete necesita también todos los paquetes de debajo. Los patrones de una landing page, un blog, una app y una web de documentación son componentes de catalog, así que también necesitan core y tokens.

Capas CSS

El CSS de core usa capas de cascada nativas (@layer), en el orden ITCSS y dentro de una capa contenedora llamada luz. Las seis de abajo contienen sus reglas; la página sobre capas las enumera todas, junto con tokens, catálogo e impresión.

Una capa posterior prevalece sobre una anterior, y cualquier CSS tuyo que no esté en una capa prevalece sobre todo LUZ, sin !important. Cómo ordenarlas y sobrescribirlas.

packages/core/src/
  settings/_settings.css      luz.settings    z-index, layout widths, field text
  generic/_reset.css          luz.generic     the reset
  elements/*.css              luz.elements    bare HTML elements, zero specificity
  objects/_objects.css        luz.objects     layout: .o-*
  components/*.css            luz.components  the components: .luz-*
  utilities/_utilities.css    luz.utilities   single-purpose helpers: .u-*

• La capa de componentes contiene 29 componentes.
• dist/luz.css contiene estas seis capas y luz.print. Tokens está en luz.tokens, catalog, con la barra de navegación, la barra lateral, el terminal, la línea de tiempo y los patrones de un tipo de sitio, en luz.catalog; luz.themes está vacía, reservada para un tema propio. Si una página solo necesita unos pocos componentes, carga dist/base.css (ajustes, restablecimiento y elementos) y luego dist/components/<name>.css para cada uno.
• Las reglas de los elementos sin clase están dentro de :where(), así que cualquier clase prevalece sobre ellas.

El script

Un único punto de entrada opcional, luz.js, inicia todos los comportamientos de la página: modo de color, botones para copiar, diálogos, resaltado, reproductores y pestañas.

<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>

Para cargar menos código, importa un módulo y llama a su función init. Consulta Módulos de JavaScript.

Página mínima

<!doctype html>
<html lang="en" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sign up – Acme</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">
</head>
<body>
  <main class="o-container">
    <h1>Sign up</h1>
    <form action="/signup/" method="post">
      <div class="luz-field">
        <label class="luz-field__label" for="email">Email</label>
        <input class="luz-input" id="email" name="email" type="email" autocomplete="email" required>
      </div>
      <button class="luz-btn luz-btn--primary" type="submit">Create account</button>
    </form>
  </main>
</body>
</html>