Debug System
Development
Development debugging utilities for visualizing grid layouts, baseline rhythm, reading zones, and typography processing. Activated by adding .stnd-debug class to body or parent element. Shows overlays for grid columns, baseline rhythm, reading layout zones, and other layout metrics. Essential for design system development and layout debugging. Automatically hidden in print.
| Name | Description |
|---|---|
.stnd-debug |
Enable debug visualization overlays on the page or container. |
.debug-baseline-grid |
Horizontal baseline rhythm grid overlay. |
.debug-grid-columns |
Vertical grid column guidelines overlay. |
.debug-reading-zones |
Reading layout column boundary highlights. |
.debug-rhythm-spacing |
Margin and padding bounding box visualizer. |
.debug-breakpoint-indicator |
Viewport responsive breakpoint tag indicator. |
.debug-panel |
Fixed status panel reporting active layout metrics. |
--stnd-lab-bg |
Debug HUD background color. |
--stnd-lab-text |
Debug HUD text color. |
--stnd-lab-accent |
Debug HUD accent highlight color. |
// Enable debug mode on page
<body class="stnd-debug">
<!-- All debug overlays visible -->
</body>
// Debug specific grid
<div class="grid stnd-debug">
<div class="col-4">Shows grid overlay</div>
</div>
// Debug reading layout zones
<article class="reading stnd-debug">
<div class="accent">Zone highlighted</div>
</article>
since 0.1.0
All classes
STANDARD DEBUG SYSTEM
| Class | Declares |
|---|---|
.debug |
display: none |
.stnd-debug .debug |
display: inherit |
.stnd-debug::before |
--color-grid: var(--color-cyan) |
.stnd-debug .rhythm > * + *::after |
top: calc(var(--gap) * -0.5) |
.stnd-debug .rhythm > * + :is(# |
— |
.stnd-debug .rhythm > :is(# |
— |
.stnd-debug .rhythm > :is(# |
— |
.stnd-debug .rhythm > * + :is(h1, h2)::after |
top: calc(var(--gap) * -3) |
.stnd-debug .rhythm > * + :is(h3, h4, h5, h6)::after |
top: calc(var(--gap) * -2) |
.stnd-debug .rhythm > :is(h1, h2, h3, h4) + :is(h2, h3, h4, h5, h6)::after |
top: calc(var(--gap) * -1) |
.stnd-debug .rhythm > :is(h1, h2, h3) + *::after |
top: calc(var(--gap) * -1) |
.stnd-debug .rhythm > :is(h4, h5, h6) + *::after |
top: calc(var(--gap) * -0.5) |
.stnd-debug .rhythm > :is(h1, h2, h3, h4, h5, h6)::after |
content: "" |
.stnd-debug |
content: "h1" !important |
.stnd-debug .prose |
position: relative |
.stnd-debug .grid-debug-overlay |
position: absolute !important |
.stnd-debug .grid, .stnd-debug .grid-2, .stnd-debug .grid-3, .stnd-debug .grid-4, .stnd-debug .grid-5, .stnd-debug .grid-6, .stnd-debug .grid-7, .stnd-debug .grid-8, .stnd-debug .grid-9, .stnd-debug .grid-10, .stnd-debug .grid-11, .stnd-debug .grid-12 |
position: relative |
.stnd-debug .grid::after, .stnd-debug .grid-2::after, .stnd-debug .grid-3::after, .stnd-debug .grid-4::after, .stnd-debug .grid-5::after, .stnd-debug .grid-6::after, .stnd-debug .grid-7::after, .stnd-debug .grid-8::after, .stnd-debug .grid-9::after, .stnd-debug .grid-10::after, .stnd-debug .grid-11::after, .stnd-debug .grid-12::after |
content: attr(class) |
.stnd-debug .grid::after |
--grid-cols: 12 |
.stnd-debug .grid-2::after |
--grid-cols: 2 |
.stnd-debug .grid-3::after |
--grid-cols: 3 |
.stnd-debug .grid-4::after |
--grid-cols: 4 |
.stnd-debug .grid-5::after |
--grid-cols: 5 |
.stnd-debug .grid-6::after |
--grid-cols: 6 |
.stnd-debug .grid-7::after |
--grid-cols: 7 |
.stnd-debug .grid-8::after |
--grid-cols: 8 |
.stnd-debug .grid-9::after |
--grid-cols: 9 |
.stnd-debug .grid-10::after |
--grid-cols: 10 |
.stnd-debug .grid-11::after |
--grid-cols: 11 |
.stnd-debug .grid-12::after |
--grid-cols: 12 |
.stnd-debug .grid > *, .stnd-debug .grid-2 > *, .stnd-debug .grid-3 > *, .stnd-debug .grid-4 > *, .stnd-debug .grid-5 > *, .stnd-debug .grid-6 > *, .stnd-debug .grid-7 > *, .stnd-debug .grid-8 > *, .stnd-debug .grid-9 > *, .stnd-debug .grid-10 > *, .stnd-debug .grid-11 > *, .stnd-debug .grid-12 > * |
outline-offset: -1px |
.stnd-debug .grid > *::before, .stnd-debug .grid-2 > *::before, .stnd-debug .grid-3 > *::before, .stnd-debug .grid-4 > *::before, .stnd-debug .grid-5 > *::before, .stnd-debug .grid-6 > *::before, .stnd-debug .grid-7 > *::before, .stnd-debug .grid-8 > *::before, .stnd-debug .grid-9 > *::before, .stnd-debug .grid-10 > *::before, .stnd-debug .grid-11 > *::before, .stnd-debug .grid-12 > *::before |
content: attr(class) |
.stnd-debug .free-col::after |
content: "start: " var(--start) " / span: " var(--span) |
.stnd-debug::after |
content: "Debug : " attr(data-standard-version) " : xs (<600px)" |