Layout

2.0.2

The foundation of the Axis Twelve framework, providing a robust 12-column grid system, flexible flexbox utilities, and spacing/typography defaults.

Installation

Full Bundle (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/axis-twelve.min.css">

Module Only (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/modules/axis-layout.min.css">

Class Reference

.ax-gridLayout

The main grid container. Sets display: grid and a default gap.

.ax-subgridLayout

Enables subgrid support. Inherits parent grid tracks (with 12-col fallback).

.ax-col-{1-12}Layout

Column span for all screen sizes.

.ax-col-{breakpoint}-{1-12}Layout

Responsive column span (e.g., .ax-col-md-6).

.ax-offset-{0-12}Layout

Starts a column at a specific position.

.ax-containerLayout

Centers content with a responsive max-width.

.ax-flexFlexbox

Base flex container.

.ax-justify-centerFlexbox

Centers items along the main axis.

.ax-items-centerFlexbox

Centers items along the cross axis.

.ax-flex-columnFlexbox

Sets direction to column.

Breakpoints

sm576px

md768px

lg992px

xl1200px

xxl1400px

Key Features

✓Mobile-First approach
✓CSS Logical Properties support (LTR/RTL)
✓Subgrid utility with fallback

Live Examples

Basic 12-Column Grid

A simple two-column layout.

Preview: Basic 12-Column Grid

Column 1 (4/12)

Column 2 (8/12)

Source Code

html

<div class="ax-grid">
  <div class="ax-col-4">Column 1 (4/12)</div>
  <div class="ax-col-8">Column 2 (8/12)</div>
</div>

Customization

Variable	Default	Description
`--ax-spacing-xs`	0.25rem	Extra small spacing
`--ax-spacing-md`	1rem	Medium spacing (default gap)

Module Evolution

Version	Type	Description
v2.0.2	Added Utility	Added .ax-subgrid for nested elements to inherit parent grid tracks.
v2.0.1	Internal	Refactored spacing and alignment to use Logical Properties.

Buttons