Spacing Demo

The Spacing Demo component visually illustrates Axiom01's cascading spacing system, allowing users to interactively adju...

Live Example

Card (padding: --a-space-l)
Button (padding: --a-space-m)
Tag (padding: --a-space-s)
The container above uses gap: var(--a-space-m). Each item's margin and padding are derived from the same unit.

Purpose

Axiom01's layout is built on a single source of truth for all spacing: the CSS variable --a-space-unit. This variable generates a comprehensive, consistent scale (from --a-space-xs to --a-space-xxl) used for padding, margin, and gap properties throughout the framework. The Spacing Demo component provides a live, interactive way to understand and demonstrate this system.

Usage

To use the spacing demo, simply include the HTML structure and ensure index-page-manager.js is loaded. The component will automatically initialize the slider and update the displayed spacing values.

<div class="spacing" data-component="spacing-demo">
				<div class="controls">
				<label for="space-unit-slider">--a-space-unit: <span id="space-unit-value">1</span>rem</label>
				<input type="range" id="space-unit-slider" min="0.5" max="2" step="0.1" value="1">
				</div>
				<div class="example">
				<div class="item">Card (padding: --a-space-l)</div>
				<div class="item">Button (padding: --a-space-m)</div>
				<div class="item">Tag (padding: --a-space-s)</div>
				</div>
				<p class="example">The container above uses <code>gap: var(--a-space-m)</code>. Each item's margin and padding are derived from the same unit.</p>
				</div>

JavaScript Initialization

The initSpacingDemo function in index-page-manager.js handles the interactivity of the slider. It listens for changes on the #space-unit-slider input and dynamically updates the --a-space-unit CSS variable on the <html> element, causing a global recalculation of all spacing values.

Accessibility

Axiom's Spacing Demo component is built with accessibility in mind:

  • The slider input has a descriptive <label> associated with it.
  • The current value of the --a-space-unit is displayed visually next to the label.

Customization

While the core functionality is about demonstrating the global spacing system, the visual aspects of the demo itself can be customized:

  • The .spacing container and its children can be styled using standard CSS.
  • The --a-space-unit variable is the primary point of customization for the framework's spacing.

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Spacing Demo component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.