Layout Philosophy

Axiom01's layout system is built on three core principles:

  • Semantic Containers — Use <main>, <section>, <article>, <aside> to structure content
  • Flexible Spacing — Mathematical scale of spacing units that creates visual rhythm
  • Responsive by Default — Layouts adapt automatically to any screen size without breakpoint hacks

Spacing System

The spacing system is the foundation of Axiom01's layout. All spaces derive from a base unit (1rem = 16px).

Spacing Scale

XS

--a-space-xs: 0.25rem (4px)

S

--a-space-s: 0.5rem (8px)

M

--a-space-m: 1rem (16px)

L

--a-space-l: 1.5rem (24px)

XL

--a-space-xl: 2rem (32px)

2XL

--a-space-2xl: 3rem (48px)

Using Spacing Variables

/* Padding */
padding: var(--a-space-m);                    /* 16px all sides */
padding: var(--a-space-l) var(--a-space-m);  /* 24px vertical, 16px horizontal */

/* Margin */
margin-bottom: var(--a-space-l);              /* 24px bottom */

/* Gap in flexbox/grid */
gap: var(--a-space-m);                        /* 16px gap */

Container Sizes

Axiom01 provides three container width options for different layout needs:

Narrow (960px)

Best for focused, columnar layouts like documentation or blogs.

<html data-layout-width="narrow">

Standard (1200px) - DEFAULT

Balanced for most web applications and marketing sites.

<html data-layout-width="standard">

Wide (1440px)

Best for data-rich dashboards and content-heavy layouts.

<html data-layout-width="wide">

Basic Container Usage

<main>
  <section>
    <div class="container">
      <!-- Your content here, automatically centered and constrained -->
    </div>
  </section>
</main>

CSS Grid Layout

Axiom01 provides built-in CSS Grid utilities for responsive multi-column layouts.

Grid Columns

Use the .grid element class to create responsive auto-fit layouts. Use data attributes for fixed column counts:

2 Columns

Item 1

Item 2

3 Columns

Item 1

Item 2

Item 3

Auto-Fit (Responsive)

Automatically adjusts column count based on available space:

Item 1

Item 2

Item 3

Item 4

Grid HTML

<div class="grid">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</div>

<!-- Auto-fit responsive grid (framework default) -->
<div class="grid">
  <article class="card">...</article>
</div>

Responsive Breakpoints

Axiom01 includes a comprehensive breakpoint system for responsive design:

Breakpoint Size Use Case
--breakpoint-xs 360px Small phones
--breakpoint-sm 480px Large phones
--breakpoint-md 600px Tablets
--breakpoint-lg 768px Large tablets
--breakpoint-xl 900px Small laptops
--breakpoint-2xl 1200px Laptops
--breakpoint-3xl 1440px Wide screens

Using Breakpoints

/* Mobile first - start with mobile styles */
.grid { grid-template-columns: 1fr; }

/* At 600px and above, use 2 columns */
@media (min-width: var(--breakpoint-md)) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* At 900px and above, use 3 columns */
@media (min-width: var(--breakpoint-xl)) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Flexbox Layouts

Axiom01 also supports flexible layouts with flexbox for components and sections:

Common Flex Patterns

<!-- Horizontal flexbox (row) -->
<div class="card">
  <div>Left</div>
  <div >Expand to fill</div>
  <div>Right</div>
</div>

<!-- Vertical flexbox (column) -->
<div class="card">
  <header>Header</header>
  <main >Content</main>
  <footer>Footer</footer>
</div>

Spacing Scale Multipliers

Adjust the entire spacing scale for different density preferences:

Compact (87.5% of base)

More densely packed, suitable for information-heavy applications.

<html data-spacing-scale="compact">

Comfortable (100% of base) - DEFAULT

Balanced spacing, suitable for most interfaces.

<html data-spacing-scale="comfortable">

Relaxed (112.5% of base)

More breathing room, suitable for premium or editorial interfaces.

<html data-spacing-scale="relaxed">

Z-Index System

Manage layering with Axiom01's z-index scale:

--z-base: 0;                    /* Default/no stacking */
--z-dropdown: 100;              /* Dropdowns, popovers */
--z-sticky: 500;                /* Sticky headers/footers */
--z-fixed: 900;                 /* Fixed navigation */
--z-modal-backdrop: 950;        /* Modal background */
--z-modal: 1000;                /* Modal window */
--z-tooltip: 1100;              /* Tooltips */
--z-notification: 1200;         /* Toast/snackbar */
--z-toolbar: 10000;             /* Top-level toolbar */

Usage Example

.modal {
  position: fixed;
  z-index: var(--z-modal);
}

.tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
}

Accessibility in Layout

Axiom01 includes accessibility-focused layout considerations:

Touch Targets

/* Mobile touch target (minimum 44x44px) */
--touch-target-min: 2.75rem;

/* Desktop mouse target */
--touch-target-min-desktop: 2rem;

Focus Management

/* Focus outline for keyboard navigation */
--focus-outline-width: 2px;
--focus-outline-offset: 2px;
--focus-outline-color: var(--a-color-primary);

Best Practice: All interactive elements should have a visible focus state and minimum touch target size of 44x44px on mobile.

CSS Variable Reference

Complete list of layout-related CSS variables:

/* Container Sizes */
--ax-max-width: 1200px;
--ax-reading-width: 65ch;
--ax-inner-content-width: 960px;

/* Spacing */
--a-space-xs through --a-space-5xl

/* Breakpoints */
--breakpoint-xs through --breakpoint-3xl

/* Z-Index Scale */
--z-base through --z-toolbar

/* Touch Targets */
--touch-target-min
--touch-target-min-desktop

/* Focus States */
--focus-outline-width
--focus-outline-offset
--focus-outline-color