Layout & grid

Three nesting blocks structure every page (examples use the my prefix):

<div class="my-container">          <!-- page width, centred -->
  <section class="my-section">      <!-- vertical rhythm -->
    <div class="my-grid">           <!-- CSS grid, your column count -->
      <div class="my-col-4">…</div>
      <div class="my-col-8">…</div>
    </div>
  </section>
</div>

Container

.my-container centres content at your configured max width with fluid gutters. Variants: --wide, --narrow (65ch, for prose), --full (edge to edge).

Section

.my-section owns vertical rhythm on the fluid space scale. Sizes: --s, --l; --tinted adds a neutral band.

Grid

.my-grid is a real CSS grid with your column count (set in the builder, 12 by default - it drives --my-grid-columns and every col-* utility from one variable, so they can never disagree). .my-col-1…N spans columns; the gutter rides the fluid --my-space-s-l pair, so it breathes with the viewport.

• Lean utilities: below your md breakpoint the grid stacks to a single column automatically.
• Extended utilities: the grid keeps its columns at every width and you control spans per breakpoint - .my-col-12 .my-col-6-from-md is full width on phones, half from tablets up. The class reads as English and needs no escaping anywhere.

Breakpoints

Your breakpoint values (default sm/md/lg/xl) are editable in the builder and live in abstracts/_config.scss as a SCSS map, with min-width() / max-width() mixins for your own media queries:

@use 'abstracts' as *;

.sidebar {
  @include min-width('lg') { position: sticky; }
}

Header & footer

.my-header (with --sticky and a wired mobile hamburger via data-my-toggle) and .my-footer ship as layout blocks in layouts/ - see example.html in a Pro ZIP for the composed page.