Un sitio sobre WebBlocks UI hecho solo con WebBlocks UI

Esta demo explica el proyecto, el modelo de capas, los primitives incluidos, los patterns y el comportamiento de JavaScript usando únicamente los recursos del paquete y las clases wb-* que este trae.

Solo el paquete Sin CSS propio Sin JS propio

Lo que demuestra esta página

WebBlocks UI puede documentarse a sí mismo sin una capa de presentación aparte. Esta guía no añade CSS de ayuda, scripts de utilidad ni clases inventadas.

Qué incluye el paquete

Capas de arquitectura

6

Foundation, utilities, layout, primitives, patterns, icons

Dependencias

0

El paquete en sí no requiere ningún framework

JavaScript

14+

Módulos de tema, overlays, navegación, feedback y disclosure

Icons

173

Uso de iconos con mask-image basado en clases

Lee el sistema en el orden correcto

Primeros pasos Inclusión de archivos, atributos raíz, primer flujo

Empieza por esta página si necesitas la ruta de configuración correcta más corta para un proyecto real.

Arquitectura El modelo de seis capas

Usa esta página cuando necesites entender dónde encajan los tokens, el layout, los primitives, los patterns y los icons.

Foundation Tokens, encabezados, ejes de tema

Usa esta página para los atributos de tema en la raíz, el modo oscuro, los presets, la tipografía por defecto, los tokens de espaciado y el estilo de los elementos sin clases.

Layout Contenedores, grids, shells

Usa esta página para wb-container, wb-grid, wb-row, la navbar, la sidebar y la estructura de page-shell.

Primitives Bloques incluidos en el paquete

Usa esta página para revisar los controles, surfaces, formularios e interaction shells realmente incluidos.

Icons Referencia de clases mask-image

Usa esta página cuando necesites los nombres de clase de los iconos incluidos, el comportamiento de los alias y la vía del icono <i> basada en clases.

Patterns Composiciones a nivel de pantalla

Usa esta página cuando la pregunta trate del tipo de página, la jerarquía o la composición y no de un primitive concreto.

Playground Vista previa en vivo solo con HTML

Usa esta herramienta para pegar HTML plano, renderizarlo con los recursos reales de WebBlocks UI y validar rápidamente fragmentos generados por IA o escritos a mano.

Utilities Ayudas de espaciado, texto y alineación

Usa esta página para las ayudas de espaciado, los tamaños de texto, las utilities de color, las ayudas de visibilidad y los ajustes finales de composición.

JavaScript Hooks de datos y APIs públicas

Usa esta página cuando el modelo de interacción importe y necesites el patrón de disparador correcto o el nombre del módulo público.

Parte de un ejemplo real incluido en el paquete

Cuando la función de la página ya está clara, copiar el ejemplo de pattern más cercano de esta guía es más seguro que reconstruir la pantalla de memoria. Empieza por toda la estructura, sustituye el contenido y luego recorta sin miedo.

Panel de administración Sidebar, topbar, estadísticas, tablas

Úsalo cuando la página sea muy de aplicación y necesite navegación, métricas, acciones por fila y datos fáciles de escanear.

Ajustes de administración Formularios más largos y acciones por secciones

Úsalo cuando la página se base en ajustes agrupados, acciones destructivas y flujos de formulario más lentos.

Inicio de sesión Flujo de entrada enfocado

Úsalo cuando la pantalla deba mantenerse estrecha, tranquila y centrada en una única tarea de formulario.

Home pública Ritmo de hero y superficies promocionales

Úsalo cuando la página sea de marketing y necesite un flujo de contenido más calmado en lugar de la densidad de administración.

Content Shell Documentación, onboarding y flujos centrados en texto

Úsalo cuando la página necesite estructura, referencias y una progresión legible más que cromo de producto.