Advanced Layout Guide

The Axiom01 Grid System

The core of Axiom01's layout is the .grid class, which applies display: grid and a default gap based on --a-space-l. This semantic approach encourages you to define your grid structure directly in your CSS, rather than relying on an abundance of utility classes or inline styles.

Basic Grid Usage

To create a responsive grid, simply apply the .grid class to a container. By default, it will arrange its direct children into a flexible grid. You can then define your column structure using standard CSS Grid properties in your stylesheet.

<!-- HTML -->
<div class="grid basic-grid-example">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
</div>

<!-- CSS (in your stylesheet) -->
<style>
    .basic-grid-example {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
</style>

Defining Columns and Rows

You have full control over grid columns and rows. Use grid-template-columns and grid-template-rows to define explicit tracks. The gap between grid items is controlled by the gap property, which ideally should use Axiom01's spacing variables.

<!-- HTML -->
<div class="grid defined-grid-example">
    <div class="grid-item">Header</div>
    <div class="grid-item main-content-item">Main Content</div>
    <div class="grid-item">Sidebar</div>
    <div class="grid-item footer-item">Footer</div>
</div>

<!-- CSS (in your stylesheet) -->
<style>
    .defined-grid-example {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: auto 100px;
        gap: var(--a-space-m); /* Example: using a spacing variable for gap */
    }
    .defined-grid-example .main-content-item {
        grid-column: span 2;
    }
    .defined-grid-example .footer-item {
        grid-column: 1 / -1;
    }
</style>

Nested Grids

CSS Grid allows for powerful nesting. You can place a grid container inside another grid item, enabling you to build highly complex and flexible layouts.

<!-- HTML -->
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: var(--a-space-l);">
    <div class="grid-item">Parent Item 1</div>
    <div class="grid-item">
        <!-- Nested Grid -->
        <div class="nested-grid-example">
            <div class="grid-item">Nested 1</div>
            <div class="grid-item">Nested 2</div>
        </div>
    </div>
</div>

<!-- CSS (in your stylesheet) -->
<style>
    .nested-grid-container { /* Apply this to the parent grid */
        grid-template-columns: 1fr 1fr;
        gap: var(--a-space-l);
    }
    .nested-grid-example { /* This is the inner grid */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--a-space-s);
        background-color: var(--a-color-secondary-container);
        padding: var(--a-space-m);
        border-radius: var(--a-border-radius-small);
        border: 1px solid var(--a-color-secondary);
    }
    .nested-grid-example .grid-item {
        background-color: var(--a-color-secondary);
        color: var(--a-color-on-secondary);
    }
</style>

Flexbox for Fine-Grained Control

While CSS Grid is ideal for overall page layout, Flexbox excels at distributing and aligning items within a single dimension (row or column). Axiom01 provides basic Flexbox capabilities through the .flex class, which applies display: flex.

Basic Flex Usage

Use .flex on a container to enable Flexbox behavior for its direct children. You can then use standard Flexbox properties (e.g., justify-content, align-items, flex-wrap) via custom CSS to achieve desired alignments.

<!-- HTML -->
<div class="flex flex-layout-example">
    <div class="flex-item">Item A</div>
    <div class="flex-item">Item B</div>
    <div class="flex-item">Item C</div>
</div>

<!-- CSS (in your stylesheet) -->
<style>
    .flex-layout-example {
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--a-space-m);
    }
</style>

Flexbox is particularly useful for navigation bars, form controls, and distributing content within smaller components.

Responsive Layouts with Breakpoints

Axiom01 embraces a mobile-first approach to responsive design. This means you design for the smallest screens first, and then progressively enhance the layout for larger viewports using media queries. The framework provides a set of predefined CSS variables for breakpoints, making your media queries consistent and easy to manage.

Variable	Value	Description
--a-breakpoint-xs	480px	Extra small devices (e.g., portrait phones)
--a-breakpoint-sm	576px	Small devices (e.g., landscape phones)
--a-breakpoint-md	768px	Medium devices (e.g., tablets)
--a-breakpoint-lg	992px	Large devices (e.g., laptops)
--a-breakpoint-xl	1200px	Extra large devices (e.g., desktops)
--a-breakpoint-xxl	1400px	Extra extra large devices (e.g., large desktops)

/* Example: Two columns on medium screens and up */
.my-responsive-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default (mobile-first) */
    gap: var(--a-space-m);
}

@media (min-width: var(--a-breakpoint-md)) {
    .my-responsive-grid {
        grid-template-columns: 1fr 1fr; /* Two columns on medium screens and up */
    }
}

@media (min-width: var(--a-breakpoint-lg)) {
    .my-responsive-grid {
        grid-template-columns: 1fr 2fr 1fr; /* Three columns on large screens and up */
    }
}

By using these variables within your media queries, you ensure that your responsive designs align with the framework's consistent sizing scale.

The Cascading Spacing System in Layouts

Axiom01's unique cascading spacing system is fundamental to creating harmonious and consistent layouts. All padding, margin, and gap values are derived from a single --a-space-unit variable, which can be adjusted globally to rescale your entire layout.

The framework provides a set of predefined spacing variables:

• --a-space-xs: Extra small spacing
• --a-space-s: Small spacing
• --a-space-m: Medium spacing (often the default for gaps)
• --a-space-l: Large spacing
• --a-space-xl: Extra large spacing
• --a-space-xxl: Extra extra large spacing

These variables are calculated based on --a-space-unit, ensuring that all spacing scales proportionally. You should use these variables consistently for all layout-related spacing.

<!-- HTML -->
<div class="spacing-example-div">
    <p>This content has extra large padding and large bottom margin.</p>
</div>

<!-- HTML -->
<div class="grid spacing-grid-example">
    <div class="grid-item">Wide Gap Item</div>
    <div class="grid-item">Wide Gap Item</div>
</div>

<!-- CSS (in your stylesheet) -->
<style>
    .spacing-example-div {
        padding: var(--a-space-xl);
        margin-bottom: var(--a-space-l);
        background-color: var(--a-color-surface-variant);
        border-radius: var(--a-border-radius-medium);
    }
    .spacing-grid-example {
        gap: var(--a-space-xxl);
        margin-top: var(--a-space-l);
    }
</style>

By consistently using these variables, you maintain a perfect visual rhythm throughout your application, and can easily adjust the overall density of your layout by changing just the --a-space-unit CSS variable.