Catálogo · @luz-ds/catalog
Catálogo
Las piezas que no son de core, una hoja de estilos cada una: la navegación del sitio, las etiquetas con un script o una identidad propios, como la búsqueda y el consentimiento de cookies, y los patrones de una landing page, un blog, una app y un sitio de documentación, agrupados por lo que hacen.
Un sitio enlaza solo los archivos que usa, después de los de core. Cada página dice en qué tipo de sitio encaja mejor su pieza; cualquier sitio significa que no tiene un tipo propio.
Las etiquetas son <luz-search>, <luz-cookie-consent>, <luz-theme-time>, <luz-lang-switch>, <luz-submenu>, <luz-announcement>, <luz-faq>, <luz-timeline>, <luz-embed> y <luz-chart>: cada una funciona por sí sola, en cualquier cabecera o página. La barra de navegación, la barra lateral y la terminal son clases, sin etiqueta propia. Los patrones son clases: la estructura de página de una landing page, un blog, una app o un sitio de documentación, compuesta en el marcado con los objetos de core.
Todo lo demás es un componente de core: una pieza reutilizable que encaja en cualquier sitio; los componentes están en Core.
- Cada etiqueta es el bloque y sus partes siguen el patrón
.luz-<tag>__<part>; todas las reglas usan solo tokens semánticos. - La página de inicio de LUZ y esta documentación están hechas con ellos.
- ¿No sabes a qué paquete pertenece una pieza? Qué necesita cada paquete enumera todas las piezas y el paquete que las contiene.
Usa el catálogo cuando
- Quieres búsqueda del sitio, un banner de cookies o un selector de idioma sin tener que programarlos.
- Tu cabecera tiene varios enlaces agrupados bajo un botón.
- Necesitas un aviso breve encima de la cabecera en todas las páginas.
Usa solo core cuando
- Solo necesitas componentes como botones, formularios y tarjetas.
- Tu sitio no tiene búsqueda ni cookies opcionales, y solo tiene un idioma.
- Creas un único widget, no una página completa.
Tus propios componentes encima
Da estilo también a lo que añadas con tokens semánticos para que siga el modo de color y cualquier tema propio.
.my-panel {
background: var(--luz-surface);
border: 1px solid var(--luz-divider);
color: var(--luz-text-primary);
}
.my-panel:hover {
background: var(--luz-surface-muted);
border-color: var(--luz-outline);
}
/* Not a primitive colour: it would stay the same in dark mode */
/* color: var(--luz-gray-100); */Navegación
-
Cabecera de app
La barra discreta en la parte superior del área principal de una aplicación: botón de menú, nombre del producto en el móvil, búsqueda y cuenta.
Encaja mejor en: app — la parte superior del área principal de una aplicación, junto a la barra lateral
-
Cabecera del sitio
Inicia cada página de un sitio con su nombre, sus enlaces principales y algunos controles, en una fila que permanece arriba.
Encaja mejor en: landing, blog — la parte superior de cada página de un sitio de landing, de un blog o de un periódico
-
Cabecera de portada
Abre la portada y las secciones de un periódico con la fecha, una búsqueda, el nombre de la publicación en letra grande y sus secciones, en tres filas que se desplazan con la página.
Encaja mejor en: blog — la portada y las secciones de un periódico, donde el nombre y la fecha marcan el tono
-
Selector de idioma
Permite acceder desde un botón de la cabecera a la misma página en otro idioma.
Encaja mejor en: cualquier sitio — cuando el sitio está en más de un idioma
-
Barra de navegación
Coloca los enlaces principales de un sitio en una fila de la cabecera y, en pantallas estrechas, en un panel debajo.
Encaja mejor en: cualquier sitio — la barra de las secciones principales de un sitio, en la parte superior de la página
-
Barra lateral
Contiene la navegación principal de un sitio o una aplicación y se convierte en un panel lateral en pantallas pequeñas.
Encaja mejor en: documentación, app — la navegación de un sitio con muchas páginas o secciones, junto al contenido, con un panel lateral en el móvil
-
Submenú
Agrupa algunos enlaces de una cabecera bajo un mismo botón para que la fila de enlaces siga siendo corta.
Encaja mejor en: cualquier sitio — cuando una cabecera tiene más enlaces de los que caben en una fila
Estructura de página
-
Cabecera de artículo
Presenta un artículo con su sección, título, entradilla, autor y fecha, y una imagen opcional al principio.
Encaja mejor en: blog — la parte superior de un artículo, bajo la cabecera del sitio
-
Cabecera de página de blog
Da título y una frase explicativa a una página que no sea un artículo, como «Acerca de» o «Contacto».
Encaja mejor en: blog — una página que no es un artículo, como «Acerca de» o «Contacto»
-
Hero
Abre una página de inicio o landing con un título, una frase, las acciones principales y una imagen opcional.
Encaja mejor en: landing — la parte superior de una landing page, bajo la cabecera
-
Pie del sitio
Cierra cada página de un sitio con quién lo ha creado, su licencia y algunos enlaces secundarios, separados por una línea, en una fila o en columnas.
Encaja mejor en: landing, blog — la parte inferior de cada página de un sitio de landing, de un blog o de un periódico
-
Contenido principal y secciones
Da ritmo a una página de landing: espacio amplio entre los bloques del contenido principal, menos espacio dentro de cada sección, con su encabezado, y un resplandor opcional detrás de la página.
Encaja mejor en: landing — el cuerpo de una landing page, entre la cabecera y el pie
Contenido
-
FAQ
Lists the questions visitors ask with their answers, in groups, as native disclosures that work without a script.
Fits best: any site — a list of questions with their answers, on a help page, a landing page or the foot of a product page
-
Dato destacado
Muestra una cifra en grande, con una etiqueta breve debajo.
Encaja mejor en: landing — una fila de cifras en una landing page
-
Índice
Enumera las secciones de un artículo largo, junto al texto cuando hay espacio y encima cuando no lo hay.
Encaja mejor en: blog — un artículo largo, junto al texto o encima de él
-
Terminal
Shows a command in a framed block, with tabs as its title bar and a copy button for the open one.
Fits best: docs — commands the reader can copy, in a guide or in a documentation site
-
Línea de tiempo
Muestra eventos fechados en orden, una tarjeta cada vez sobre una línea de fechas o todos a la vez en una línea vertical; sin JavaScript, es una lista.
Encaja mejor en: blog, landing — eventos o pasos en orden cronológico, como una historia o una hoja de ruta
-
Lista de artículos
Dispone una lista de artículos en cuadrícula, con el último más grande, o como una lista compacta de filas. Cada artículo es una tarjeta.
Encaja mejor en: blog — una página que lista artículos: la portada, una categoría, un archivo, resultados de búsqueda
-
Contenido incrustado
Un póster y un botón de reproducir en lugar de un reproductor de otro sitio, que se carga solo cuando el visitante lo pide, tras el consentimiento.
Encaja mejor en: cualquier sitio — una página que muestra un vídeo o un mapa de otro sitio
-
Enlaces sociales
Enlaces a los perfiles y canales de un sitio, cada uno con un icono y un nombre.
Encaja mejor en: cualquier sitio — el pie de un sitio, la página de un autor o una página de contacto
Gráficos
-
Panel de control
La vista general de una aplicación: el título y la acción principal, seguidos de una cuadrícula de paneles que aprovecha el espacio disponible.
Encaja mejor en: app — la primera vista de una aplicación
-
Gráfico
Dibuja una línea, un área o una línea de tendencia pequeña a partir de una tabla o de una lista de números que ya escribiste, y que sigue en la página a su lado.
Encaja mejor en: cualquier sitio — una página que muestra una tendencia: un informe, un panel, una entrada con algunas cifras
-
Lista de barras
Compara unos pocos valores con una lista de nombres, cifras y barras, mediante el elemento meter nativo.
Encaja mejor en: app — un informe o un resumen que compara unos pocos tamaños, recuentos o proporciones
-
Gráfico de columnas
Compara unos pocos valores como columnas de una misma escala de altura, dibujadas desde una tabla nativa que conserva cada cifra como texto.
Encaja mejor en: app — un informe que compara unos pocos valores con un orden, como días o meses
-
Barra apilada
Muestra las partes de un todo en una sola barra, con una leyenda que dice cada nombre y cada cifra en texto.
Encaja mejor en: app — una página que muestra cómo se reparte un todo: estados, orígenes, un presupuesto
-
Mapa de calor
Muestra cuánto hay en cada celda de una cuadrícula con color y con cifra, desde una tabla nativa; un calendario es uno.
Encaja mejor en: app — una página que muestra dónde una cuadrícula es alta o baja: una semana por horas, un mes de días
-
Anillo
Muestra un valor frente a una meta, o las partes de un total, como medio anillo sobre la cifra que lo dice.
Encaja mejor en: app — un panel que muestra el avance hacia una meta o cómo se reparte un total
Todo el sitio
-
Modo de color según la hora del día
Añade la hora del día al modo de color: quien lee elige un momento que declaras o arrastra un deslizador por las horas, y Automático sigue al sistema.
Encaja mejor en: cualquier sitio — cuando el sitio tiene un selector de modo y quiere un aspecto para cada momento del día
-
Anuncio
Comunica una sola cosa breve a todas las personas que visitan el sitio, en la parte superior de la página, como una oferta, un evento o un mantenimiento previsto.
Encaja mejor en: cualquier sitio — un aviso breve para todas las personas que visitan el sitio, como una oferta o un mantenimiento previsto
-
Consentimiento para cookies
Pregunta una vez al visitante si el sitio puede usar cookies opcionales, muestra Aceptar y Rechazar uno junto al otro y recuerda la respuesta.
Encaja mejor en: cualquier sitio — cuando el sitio usa cookies opcionales
-
Búsqueda
Permite encontrar por su nombre una página, sección o elemento HTML del sitio, mediante un botón de la cabecera.
Encaja mejor en: cualquier sitio — cuando el sitio tiene más páginas de las que se pueden recorrer a simple vista
-
Transición de página
Una página se desvanece en la siguiente cuando alguien sigue un enlace, en los navegadores que lo admiten, sin más que enlazar una hoja de estilos.
Encaja mejor en: cualquier sitio — un sitio por el que se pasa de página en página y donde quieres que el cambio resulte más suave
Documentación
-
Qué hacer y qué no
Un ejemplo que seguir y otro que evitar, cada uno con su motivo, colocados uno al lado del otro cuando hay espacio.
Encaja mejor en: documentación — una página que enseña mostrando qué hacer y qué evitar
-
Ejemplo
Una vista previa en vivo con el código debajo, en un mismo marco y con la anchura que le asignes.
Encaja mejor en: documentación — una página que muestra un ejemplo en vivo con su código
-
Pie de página
La información breve al pie de una página: cuándo se actualizó por última vez y enlaces para editarla o informar de un problema.
Encaja mejor en: documentación — la parte inferior de una página de documentación
-
Cabecera de página
La parte superior de una página de documentación: el epígrafe, el título, una frase y las etiquetas que indican de qué trata.
Encaja mejor en: documentación — la parte superior de una página de documentación
-
Navegación entre páginas
Dos bloques de enlaces al final de una página, uno a la página anterior y otro a la siguiente, cada uno con el título de la página a la que lleva.
Encaja mejor en: cualquier sitio — el final de una página que forma parte de una secuencia
-
Índice lateral
La lista de secciones de una página que permanece visible junto al contenido, con las acciones de la página debajo.
Encaja mejor en: documentación — el lateral de una página de documentación larga
-
Armazón de página
La página de un sitio de documentación en tres columnas: la barra lateral, el contenido y el índice lateral; en el móvil se reduce a una columna.
Encaja mejor en: documentación — la estructura de cada página de un sitio de documentación
Referencia
- Referencia de clases Todas las etiquetas y clases del catálogo, desde la búsqueda y el consentimiento de cookies hasta los patrones de un tipo de sitio, el elemento al que se aplican y su función, en un solo lugar.