Wireframe
Wireframe mode is a visual debugging tool built into flexocss. It highlights your grid structure with colored outlines, backgrounds, and info labels so you can spot layout issues at a glance.
Activation
Add id="wireframe" to your <body> tag to enable wireframe mode:
<body id="wireframe">
...
</body>Wireframe mode is only available when $env is set to 'dev' (the default). In production builds it is excluded entirely.
Display modes
Wireframe supports several display modes that can be combined using classes on the body tag:
Outline mode (default)
With just id="wireframe", each grid element gets a colored outline:
<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— dark outline (#1f2640).row— purple outline (#aa41c8).fl-box— blue outline (#3f4b80) with light background
Live example
Fill mode
Add class="fill" to replace outlines with solid background colors:
<body id="wireframe" class="fill">
...
</body>Each nesting level gets a distinct color:
.container— dark background (#1f2640).row— purple background (#aa41c8).fl-box— blue background (#7d96ff)
Live example
Border mode
Add class="border-{n}" (1 to 5) to add visible borders on top of fill mode. Useful for seeing exact boundaries between adjacent elements.
<body id="wireframe" class="fill border-2">
...
</body>Live example
Info mode
Add class="info" to display breakpoint and size labels on each column:
<body id="wireframe" class="fill border-1 info">
...
</body>Each .fl-box shows a label like *sm 8/16 indicating the current breakpoint and column size. Labels update automatically as the viewport changes.
Live example
Combining modes
Modes can be combined freely. Here are the most common combinations:
<!-- 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">Scaffold example
Here is how wireframe mode looks applied to a complete page structure: navigation, hero, three-column features, two-column content, and footer.
Environment control
The wireframe module is conditionally compiled based on the $env variable:
// Wireframe enabled (default)
@use "@daveaki/flexocss/scss/config" with ($env: 'dev');
// Wireframe disabled for production
@use "@daveaki/flexocss/scss/config" with ($env: 'prod');When $env is 'prod', all wireframe CSS is excluded from the output, keeping your production bundle clean.
Customization
All wireframe colors and styles are configurable via SCSS variables:
| Variable | Default | Role |
|---|---|---|
$wireframeOutlineContainer | #1f2640 | Container outline color |
$wireframeOutlineRow | #aa41c8 | Row outline color |
$wireframeOutlineBox | #3f4b80 | Box outline color |
$wireframeBgColorContainer | #1f2640 | Container fill color |
$wireframeBgColorRow | #aa41c8 | Row fill color |
$wireframeBgColorBox | #7d96ff | Box fill color |
$wireframeBgColorInfo | #1f2640 | Info label background |
$wireframeColorInfo | #e9eeff | Info label text color |