91-Development — Development Tools

Debug utilities, visual guides, and development-only styles.

Debug Outlines

Visual debugging utilities to inspect layout structure.

Header (blue)
Main content (green)
Footer (purple)
/* Enable debug mode */
.ss-debug * {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

.ss-debug *:hover {
  outline: 2px solid red;
}

Baseline Grid Overlay

Visualize the baseline grid for vertical rhythm debugging.

Heading on Grid

This content shows the baseline grid overlay for debugging vertical rhythm.

Breakpoint Indicator

Shows current responsive breakpoint during development.

md

The breakpoint indicator shows in the corner during development.

/* Automatically inserted when $ss-dev-mode: true */
body::after {
  content: 'xs';
  position: fixed;
  bottom: 0;
  right: 0;
  /* ... */
}

@media (min-width: 640px) { body::after { content: 'sm'; } }
@media (min-width: 768px) { body::after { content: 'md'; } }
/* ... */

Development Classes

Class Description
.ss-debug Outline all child elements
.ss-show-baseline Show baseline grid overlay
.ss-show-columns Show column grid overlay
.ss-placeholder Placeholder box for layout testing

Configuration

Development tools are conditionally included based on build configuration.

// In your SCSS configuration
$ss-dev-mode: true; // Enable dev tools
$ss-show-breakpoints: true;
$ss-show-baseline-grid: false;

// Production build
$ss-dev-mode: false; // Strips all dev utilities
Note: Development tools are automatically excluded from production builds.