Spacing Demo Component

The Spacing Demo component visually illustrates Axiom01's cascading spacing system, allowing users to interactively adjust the base spacing unit and observe its global impact on layout.

Live Example

--a-space-unit: 1rem

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.

HTML Structure

<div class="spacing-demo" 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-box">
    <div class="item" style="padding: var(--a-space-l);">Card (padding: --a-space-l)</div>
    <div class="item" style="padding: var(--a-space-m);">Button (padding: --a-space-m)</div>
    <div class="item" style="padding: var(--a-space-s);">Tag (padding: --a-space-s)</div>
</div>
<p class="example-caption">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-demo 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.