Wireframe
El modo wireframe es una herramienta de depuración visual integrada en flexocss. Resalta la estructura de tu grilla con contornos coloreados, fondos y etiquetas informativas para detectar problemas de layout de un vistazo.
Activación
Agrega id="wireframe" a tu etiqueta <body> para habilitar el modo wireframe:
<body id="wireframe">
...
</body>El modo wireframe solo está disponible cuando $env está configurado como 'dev' (el valor por defecto). En builds de producción se excluye completamente.
Modos de visualización
El wireframe soporta varios modos de visualización que se pueden combinar usando clases en el tag body:
Modo outline (por defecto)
Con solo id="wireframe", cada elemento de la grilla obtiene un contorno coloreado:
<body id="wireframe">
<div class="container">
<div class="row">
<div class="fl-box fl-8">...</div>
<div class="fl-box fl-8">...</div>
</div>
</div>
</body>.container— contorno oscuro (#1f2640).row— contorno violeta (#aa41c8).fl-box— contorno azul (#3f4b80) con fondo claro
Ejemplo en vivo
Modo fill
Agrega class="fill" para reemplazar los contornos con colores de fondo sólidos:
<body id="wireframe" class="fill">
...
</body>Cada nivel de anidamiento obtiene un color distinto:
.container— fondo oscuro (#1f2640).row— fondo violeta (#aa41c8).fl-box— fondo azul (#7d96ff)
Ejemplo en vivo
Modo borde
Agrega class="border-{n}" (1 a 5) para añadir bordes visibles sobre el modo fill. Útil para ver los límites exactos entre elementos adyacentes.
<body id="wireframe" class="fill border-2">
...
</body>Ejemplo en vivo
Modo info
Agrega class="info" para mostrar etiquetas de breakpoint y tamaño en cada columna:
<body id="wireframe" class="fill border-1 info">
...
</body>Cada .fl-box muestra una etiqueta como *sm 8/16 indicando el breakpoint actual y el tamaño de la columna. Las etiquetas se actualizan automáticamente al cambiar el viewport.
Ejemplo en vivo
Combinar modos
Los modos se pueden combinar libremente. Estas son las combinaciones más comunes:
<!-- Outline only -->
<body id="wireframe">
<!-- Filled backgrounds -->
<body id="wireframe" class="fill">
<!-- Filled + 2px borders -->
<body id="wireframe" class="fill border-2">
<!-- Full debug: fill + borders + info labels -->
<body id="wireframe" class="fill border-1 info">Ejemplo scaffold
Así es como se ve el modo wireframe aplicado a una estructura de página completa: navegación, hero, features en tres columnas, contenido en dos columnas y footer.
Control de entorno
El módulo wireframe se compila condicionalmente según la variable $env:
// Wireframe enabled (default)
@use "@daveaki/flexocss/scss/config" with ($env: 'dev');
// Wireframe disabled for production
@use "@daveaki/flexocss/scss/config" with ($env: 'prod');Cuando $env es 'prod', todo el CSS wireframe se excluye de la salida, manteniendo limpio tu bundle de producción.
Personalización
Todos los colores y estilos del wireframe son configurables mediante variables SCSS:
| Variable | Default | Rol |
|---|---|---|
$wireframeOutlineContainer | #1f2640 | Color contorno container |
$wireframeOutlineRow | #aa41c8 | Color contorno row |
$wireframeOutlineBox | #3f4b80 | Color contorno box |
$wireframeBgColorContainer | #1f2640 | Color relleno container |
$wireframeBgColorRow | #aa41c8 | Color relleno row |
$wireframeBgColorBox | #7d96ff | Color relleno box |
$wireframeBgColorInfo | #1f2640 | Fondo etiqueta info |
$wireframeColorInfo | #e9eeff | Color texto etiqueta info |