Tipos de sitio
Aplicación web
Una aplicación web: un prompt para un LLM y recetas para su estructura con barra lateral, su cabecera y su panel de control.
Pega el prompt en cualquier LLM. Te pregunta por tu aplicación en rondas cortas, te enseña el plan y no escribe nada hasta que dices "go".
O constrúyela tú con las recetas de abajo. Usan solo las clases de core, del catálogo y de app; Instalar LUZ indica los archivos que debes cargar. El <h1> de la vista y su acción principal están en el panel de control, nunca en la barra: la barra contiene lo que es igual en todas las vistas.
Estructura con barra lateral
La página entera: el enlace para saltar al contenido y, después, la barra lateral de catalog junto a .o-main, que contiene la cabecera y la vista. .o-shell coloca la barra lateral en una columna a partir de 769 px de ventana y, por debajo, la convierte en un cajón que abre el botón de menú, sin script. Los patrones de App van dentro.
La estructura es la página entera, así que no tiene un ejemplo dentro de esta: esta página está construida sobre ella. Estrecha la ventana por debajo de 769 px y la barra lateral pasa a ser un cajón tras el botón de menú.
El script de catalog, si lo cargas, marca el enlace actual de la barra lateral y cierra el cajón cuando se sigue un enlace.
<body>
<a class="luz-skip-link" href="#main-content">Skip to content</a>
<div class="o-shell">
<nav class="luz-sidebar" id="app-nav" aria-label="Main" popover>
<a class="luz-sidebar__brand" href="/"><span class="luz-sidebar__brand-name">Bodega</span></a>
<div class="luz-sidebar__section">
<a class="luz-sidebar__link" href="/" aria-current="page">Overview</a>
<a class="luz-sidebar__link" href="/reports/">Reports</a>
<a class="luz-sidebar__link" href="/stock/">Stock</a>
</div>
</nav>
<div class="o-main">
<header class="luz-app-bar o-sticky">…</header>
<main class="luz-dashboard" id="main-content" tabindex="-1">…</main>
</div>
</div>
</body>Cabecera
La barra de la parte superior de cada vista: el botón de menú, el nombre del producto y la cuenta. Es la cabecera de app, dentro de .o-main, junto a la barra lateral. La búsqueda es el <luz-search> del catálogo: omítela si no cargas el catálogo.
Beside a sidebar the product name is the sidebar's, so a wide bar shows the account alone; at 768 px of window and below the name shows beside the menu button, which this example leaves out, as it has no sidebar to open. The account list opens under its button: press it.
<header class="luz-app-bar o-sticky">
<div class="o-row">
<button class="luz-nav-toggle" type="button" popovertarget="app-nav" aria-label="Menu">
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></g></svg>
</button>
<p class="luz-app-bar__product">Bodega</p>
<div class="o-row luz-app-bar__actions">
<luz-search>…</luz-search>
<div class="luz-dropdown">
<button class="luz-btn luz-btn--ghost luz-app-bar__account" type="button" popovertarget="account-menu"><span class="luz-avatar luz-avatar--sm">AM</span> <span class="luz-app-bar__account-name">Ana Martín</span></button>
<div class="luz-dropdown__menu" id="account-menu" popover>
<ul class="luz-dropdown__list">
<li><a class="luz-dropdown__item" href="/account/">Account settings</a></li>
<li><a class="luz-dropdown__item" href="/logout/">Sign out</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>Panel de control
Una vista: una fila de título con el <h1> de la vista y sus acciones, y después paneles en una cuadrícula que responde al espacio de la vista, no al de la ventana. Es el panel de control, sobre el <main>. Cada panel es una tarjeta que empieza con su encabezado; el más importante puede ocupar el espacio de dos columnas.
Overview
-
Sales this month
The sales of the month so far.
Open the sales report -
Stock alerts
Three products are below their minimum.
Review stock
The title is a paragraph and the panels' titles are <h3> here, as this page has its own <h1>.
<main class="luz-dashboard" id="main-content" tabindex="-1">
<div class="luz-dashboard__head">
<h1 class="luz-dashboard__title">Overview</h1>
<div class="o-actions">
<a class="luz-btn luz-btn--primary" href="/reports/new/">New report</a>
<a class="luz-btn luz-btn--secondary" href="/export/">Export data</a>
</div>
</div>
<ul class="o-grid o-grid--auto">
<li class="luz-card luz-dashboard__panel luz-dashboard__panel--wide">
<h2 class="luz-card__title">Sales this month</h2>
<p class="luz-card__body">The sales of the month so far.</p>
<a href="/reports/sales/">Open the sales report</a>
</li>
<li class="luz-card luz-dashboard__panel">
<h2 class="luz-card__title">Stock alerts</h2>
<p class="luz-card__body">Three products are below their minimum.</p>
<a href="/stock/alerts/">Review stock</a>
</li>
</ul>
</main>Datos en un panel
Un panel que muestra datos contiene una de cinco piezas, cada una sobre un texto, una lista o una tabla nativa que se queda en la página: la lista de barras compara unos pocos valores en una escala, el gráfico de columnas compara valores que tienen un orden, la barra apilada muestra cómo se reparte un todo, el anillo muestra un valor frente a su meta y el mapa de calor muestra dónde una cuadrícula es alta o baja. Ponla en la tarjeta de un panel, después de su encabezado, y enlaza después de luz.css la hoja de estilos de cada una que uses. Los números y los títulos son tuyos.
-
Orders by channel
<ul class="o-grid o-grid--auto">
<li class="luz-card luz-dashboard__panel">
<h2 class="luz-card__title" id="by-channel">Orders by channel</h2>
<figure class="luz-bar-list" aria-labelledby="by-channel">
<ul class="luz-bar-list__rows">
<li class="luz-bar-list__row">
<span class="luz-bar-list__name">Online</span>
<span class="luz-bar-list__figure">640</span>
<meter class="luz-bar-list__meter" min="0" max="1204" value="640" aria-hidden="true">640 of 1,204</meter>
</li>
</ul>
</figure>
</li>
</ul>Vista vacía
Una vista que aún no tiene nada, sobre el panel de control: un panel ancho que dice qué falta y qué hacer, con la acción. La fila de título conserva su lugar, de modo que la vista no salta cuando llega el primer panel. La acción del panel es la única acción principal de la vista: omítela de la fila de título mientras la tenga el panel.
Reports
-
No reports yet
Create your first report to see it here.
New report
<main class="luz-dashboard" id="main-content" tabindex="-1">
<div class="luz-dashboard__head">
<h1 class="luz-dashboard__title">Reports</h1>
</div>
<ul class="o-grid o-grid--auto">
<li class="luz-card luz-dashboard__panel luz-dashboard__panel--wide">
<h2 class="luz-card__title">No reports yet</h2>
<p class="luz-card__body">Create your first report to see it here.</p>
<a class="luz-btn luz-btn--primary" href="/reports/new/">New report</a>
</li>
</ul>
</main>