Layout: Section Submodule

Navigation: uCss > Source > Modules > Layout > Section

The structural backbone of uCss. Manages full-bleed backgrounds, fluid vertical padding, and robust inner width constraints. A smart 3-tier system — Section > Container > Content — so every page reads the same way.

📑 Contents

🌟 Overview
🏗️ The 3-Tier Architecture
🔌 Data-Attribute API vs Classes
💡 How to Use It (Perfect Scenarios)
📦 Installation & Stats
📂 Files Reference
🧩 Recipes
📏 Mastering Constraints (Width Modifiers)
🧱 Spacing Modifiers
🔧 Exhaustive API Reference
🗺️ Visual Map

🌟 Overview

The Section module is the page skeleton. It handles full-bleed backgrounds, fluid vertical rhythm, and readable inner widths — leaving your content markup clean and semantic.

Top Features

3-Tier System: Section > Container > Content with automatic implicit wrappers — a bare div inside a section becomes the Container.
Fluid Vertical Padding: Section padding scales with the viewport (clamp()), no media queries.
Container Queries: The Container establishes its own query context (sc), so nested grids/cards respond to the container, not the viewport.
Readable Widths: One-line classes for measure (40rem reading column) and macro widths (64–120rem).
Recipes: Split, Lock/Sticky, Mono/Thesis, Hero — pre-configured section layouts.

🏗️ The 3-Tier Architecture

uCss Sections operate on a smart, nested 3-tier system:

Tier 1 — Section (section.s / [data-layout="section"]): the outer shell. Spans the full width, handles background, fluid vertical padding, and establishes a flex-column context.
Tier 2 — Container (.sc / [data-layout="container"] / any direct div child): constrains content with max-inline-size (default 80rem) and centers it. Establishes a container-query context (container: sc / inline-size).
Tier 3 — Content (.scc / [data-layout="content"] / any div, header, article, aside child of the container): your components flow vertically with responsive gaps and optional reading-width constraints.

Implicit Containers: any direct div inside a section is automatically upgraded to a Container — unless it matches the exclusion list (.unsc, .cvr, overlays, scripts, .block-list-appender). The universal pattern is simply section.s > div.

🔌 Data-Attribute API vs Classes

Classes are the shorthand. Data attributes keep Structure decoupled from utility/theme.

Role	Class	Attribute
Section	`.s`	`data-layout="section"`
Container	`.sc`	`data-layout="container"`
Content	`.scc`	`data-layout="content"`
Recipe	`.split`, `.lock`, …	`data-style="split"`, `data-style="lock"`, …

<section data-layout="section" data-style="split" class="set dark">
  <div data-layout="container">
    <header>
      <h2 class="tl">Section Title</h2>
    </header>
    <div>
      <p class="tx">Main content goes here...</p>
    </div>
  </div>
</section>

data-layout="section": "I am the structural shell" (≡ .s).
data-style="split": applies a layout recipe (≡ .split).
class="set dark": theming/utility overrides stay in class.

💡 How to Use It (Perfect Scenarios)

Every scenario shows an Emmet abbreviation → expanded HTML → the classes it maps to. All scenarios use the universal shell section.s > div (the div is the implicit Container).

The Universal Shell

Emmet: section.s>div

<section class="s"><div>…</div></section>

Full-width section, fluid 7–8rem vertical padding, 5%/1.5rem→4rem inline padding, centered 80rem container.

1. Hero

Emmet: section.s.hero.fh>div>(h1+p+div>(a.btn+a.btn.out))

<section class="s hero fh">
  <div>
    <h1>SEO headline</h1>
    <p class="lede">Deck / supporting text</p>
    <div class="bns">
      <a class="btn">Key CTA</a>
      <a class="btn out">Supporting CTA</a>
    </div>
  </div>
</section>

Why: .hero trims the top padding (hero-appropriate), .fh full-height on shorter viewports, .bns button group, .btn out outlined secondary CTA.

2. Stats / Key Numbers

Emmet: section.s>div>(header>(h2+p)+ul.g.g-3>li*3>(strong+span))

<section class="s">
  <div>
    <header>
      <h2>SEO</h2>
      <p>Lede</p>
    </header>
    <ul class="g g-3">
      <li><strong>1M+</strong><span>Users</span></li>
      <li><strong>99.9%</strong><span>Uptime</span></li>
      <li><strong>4.9★</strong><span>Rating</span></li>
    </ul>
  </div>
</section>

Why: a ul.g grid gives the numbers row free list-resets and fluid columns. Add .scc--m to the <header> content if you want a tight measure.

3. Grid of Items (Cards)

Emmet: section.s>div>(header>(h2+p.lede)+ul.g>li.clk*3>article.crd>(h3+p+figure>img)+div>(a.btn+a.btn.out))

<section class="s">
  <div>
    <header>
      <h2>SEO</h2>
      <p class="lede">Supporting text</p>
    </header>
    <ul class="g">
      <li class="clk"><article class="crd"><h3>…</h3><p>…</p><figure><img …></figure></article></li>
      <li class="clk"><article class="crd"><h3>…</h3><p>…</p><figure><img …></figure></article></li>
      <li class="clk"><article class="crd"><h3>…</h3><p>…</p><figure><img …></figure></article></li>
    </ul>
    <div class="bns"><a class="btn">Key CTA</a><a class="btn out">Supporting CTA</a></div>
  </div>
</section>

Why: ul.g auto-fit card grid + .clk clickable rows. Perfect for areas, directions, reasons, reviews.

4. Media / Split

Emmet: section.s.split>div>(div>(h2+p+p+div>a.btn)+figure>img)

<section class="s split">
  <div>
    <div>
      <h2>SEO</h2>
      <p>Title / UVP</p>
      <p>Content…</p>
      <div><a class="btn">Key CTA</a></div>
    </div>
    <figure><img src="…" alt="…"></figure>
  </div>
</section>

Why: .split puts the text and media side-by-side (50/50) on ≥33rem, stacking to one column below. Add div.scc--m to the text side for a reading measure.

5. Functional (FAQ / Form)

Emmet (FAQ): section.s>div>(header>(h2+p)+div>(details.acd*3>(summary+p)))

<section class="s">
  <div>
    <header><h2>SEO</h2><p>Lede</p></header>
    <div>
      <details class="acd"><summary>Q1</summary><p>A1</p></details>
      <details class="acd"><summary>Q2</summary><p>A2</p></details>
      <details class="acd"><summary>Q3</summary><p>A3</p></details>
    </div>
  </div>
</section>

Form variant: section.s>div>(header>(h2+p)+form>(label>input+label>textarea+button.btn))

Why: details.acd is the built-in accordion recipe; a constrained div.scc--m keeps forms readable.

📦 Installation & Stats

This Submodule is part of layout.css.

File	Full (Raw)	Clean	Min	Gzip	Brotli
`section/base.css`	3.9 KB	2.2 KB	1.9 KB	1.3 KB	1.1 KB
`section/container.css`	5.6 KB	4.0 KB	3.4 KB	1.6 KB	1.3 KB
`section/content.css`	5.9 KB	5.4 KB	4.7 KB	1.2 KB	1.0 KB
`section/recipes.css`	5.9 KB	5.5 KB	4.6 KB	1.3 KB	1.2 KB

Stats reflect the last verified build from dist/latest. Run npm run build:latest to regenerate.

HTML Snippets

Since this is a nested module, it is included in layout.min.css:

<link rel="preconnect" href="https://ucss.unqa.dev">
<link rel="stylesheet" href="https://ucss.unqa.dev/latest/lib/layout.min.css">

📂 Files Reference

File	Description
`base.css`	Section shell (`.s` / `[data-layout="section"]`). Background, fluid padding, flex-column context, full-height/width/bleed modifiers.
`container.css`	Container (`.sc` / `[data-layout="container"]` / direct `div`). Max-width, centering, `container: sc`, width modifiers.
`content.css`	Content blocks (`.scc` / `[data-layout="content"]`). Responsive gaps, width/measure presets, responsive `@container` sizes.
`recipes.css`	Section recipes: split, lock/sticker, mono/thesis, slab, hero paddings.

🧩 Recipes

Recipes are opt-in classes (or data-style="…") that pre-configure the Section/Container relationship.

Split / Horizon

Side-by-side: first child left, rest right. Stacks below 33rem.

Class	Ratio
`.split`	50/50
`.spread`	⅓ / ⅔
`.horizon`, `.ledger`	content-driven (first item `32rem` basis)

Lock / Sticker

Two-column grid (≥66rem); the first child becomes position: sticky and pins while the rest scrolls.

<section class="s lock">
  <div>
    <header><h2>I follow you</h2></header>
    <div class="g g-2">…scrolling content…</div>
  </div>
</section>

Mono / Thesis

Narrow, centered, focused text (64rem max, centered alignment).

Plinth / Slab

Left-aligned reading column (56rem); .frieze/.hand/.thesis tighten to 48rem.

Hero

Class	Effect
`.hero`	reduced top padding (hero-appropriate)
`.heroism`	even tighter top padding
`.heroin` / `.hero.transparent`	reserves header height (`---xe` + `---hm`) for transparent headers

Shell Modifiers

Class	Effect
`.fh` / `.fs` / `.fvh`	full-height (min-height `100svh` on viewports ≤ `64rem` tall)
`.fw` / `.fs` / `.fvw`	full width
`.fsz`	full-bleed (zero inline padding)

📏 Mastering Constraints (Width Modifiers)

Container Widths (Tier 2)

Class	Max width	Best for
`.sc` (default)	`80rem` (1280px)	standard content
`.sc--xs` / `.c-xs`	`64rem` (1024px)	forms, login
`.sc--s` / `.c-s`	`70rem` (1120px)	narrow
`.sc--m` / `.c-m`	`80rem` (1280px)	default
`.sc--l` / `.c-l`	`85rem` (1360px)	apps
`.sc--xl` / `.c-xl`	`90rem` (1440px)	wide dashboards
`.sc--xxl` / `.sc--2xl` / `.c-2xl`	`100rem` (1600px)	expansive tables/galleries
`.sc--xxxl` / `.sc--3xl` / `.c-3xl`	`120rem` (1920px)	ultra-wide
`.sc--f` / `.c-f`	`100%`	full-bleed content
`.sc--a4` / `.a4` · `.sc--a4x` / `.a4x`	`210mm` · `297mm`	print
`.mq--xs` / `--sm` / `--md` / `--lg`	`23` / `33` / `66` / `88rem`	viewport-derived widths
`.cq--xs` / `--sm` / `--md` / `--lg`	`20` / `30` / `60` / `80rem`	container-derived widths

Content / Measure Widths (Tier 3)

Class	Max width	Best for
`.scc--xxs` / `.ct-2xs`	`20rem`	microcopy
`.scc--xs` / `.ct-xs`	`24rem`	disclaimers
`.scc--s` / `.ct-s`	`32rem`	sidebars, secondary info
`.scc--m` / `.ct-m`	`40rem`	optimal reading line-length (prose)
`.scc--l` / `.ct-l`	`48rem`	larger intro/thesis
`.scc--xl` / `.ct-xl`	`56rem`	generous text blocks
`.scc--2xl` / `.scc--xxl` / `.c-xs`	`64rem`	massive text arrays
`.scc--3xl` / `.scc--xxxl` / `.c-s`	`70rem`	wide arrays
`.scc--ch-xs` / `--ch-s` / `--ch-m` / `--ch-l`	`24` / `40` / `64` / `80ch`	character-based measure

🧱 Spacing Modifiers

Section vertical padding is fluid by default (---3xg, ≈ 7–8rem). Override per section:

<section class="s" style="--s-pb: 4rem;">…</section>
<section class="s" style="--s-pbs: 3rem; --s-pbe: 5rem;">…</section>

Variable	Controls
`--s-pb`	padding-block (both)
`--s-pbs`	padding-block-start (top)
`--s-pbe`	padding-block-end (bottom)
`--s-pi` / `--s-pis` / `--s-pie`	padding-inline (left/right)
`--s-g` / `--s-rg` / `--s-cg`	gap (row / column)

For hero sections, use the .hero / .heroism / .heroin recipes instead of hand-tuning.

The .pb--* utilities (padding module) apply to generic elements, not the section shell — use --s-pb* here.

🔧 Exhaustive API Reference

All Section behavior is driven by CSS variables.

Section Level (`--s-*`) — `section.s`

Variable	Default	Description
`--s-bg`	`none`	background
`--s-pb` / `--s-pbs` / `--s-pbe`	`---3xg` (≈ `7–8rem`, fluid)	padding-block
`--s-pi` / `--s-pis` / `--s-pie`	`--p5f` (`clamp(1.5rem, 5%, 4rem)`)	padding-inline
`--s-g` / `--s-rg` / `--s-cg`	`---xg` (≈ `5–6rem`, fluid)	gap
`--s-d`	`flex`	display
`--s-fxd`	`column`	flex-direction
`--s-fxw`	`nowrap`	flex-wrap
`--s-ai`	`center`	align-items
`--s-is` / `--s-w`	`100%`	inline-size

Container Level (`--sc-*`) — `.sc`

Variable	Default	Description
`--sc-maw`	`--c-m` (`80rem`)	max-inline-size
`--sc-rg`	`---xe` (≈ `3–3.5rem`)	row gap
`--sc-cg`	`---2xe` (≈ `3.5–4rem`)	column gap
`--sc-d`	`flex`	display
`--sc-fxd`	`column`	flex-direction
`--sc-fxw`	`nowrap`	flex-wrap
`--sc-ai`	`stretch`	align-items
`--sc-fxg` / `--sc-fxs` / `--sc-fxb`	`0` / `1` / `auto`	flex grow/shrink/basis
`--sc-is` / `--sc-w`	`100%`	inline-size

Container-query context: container: sc / inline-size.

Content Level (`--scc-*`) — `.scc`

Variable	Default	Description
`--scc-rg`	`---s` (≈ `1–1.25rem`)	row gap
`--scc-cg`	`---xe` (≈ `3–3.5rem`)	column gap
`--scc-d`	`flex`	display
`--scc-fxd`	`column`	flex-direction
`--scc-fxw`	`wrap`	flex-wrap
`--scc-w`	`100%`	inline-size
`--scc-maw`	`auto`	max-inline-size (use `.scc--m` etc.)
`--scc-ai` / `--scc-jc` / `--scc-ac`	unset	alignment (user-set)