…

Container & bleed regime test

1. Default .container

Content should cap at --jf-container-max (1140px, 1280px from xl) and stay centred; below that, side space = --jf-container-gutter. The primary-tinted block marks the content box.

content box — left/right edges are the container's inner edges

Full bleed: .bleed (margin-inline: calc(var(--jf-bleed-space) * -1)). The green bleeding block's edges must land on the viewport rulers — or, with an overlay scrollbar, exactly on them; with a classic scrollbar the right edge sits under the scrollbar (harness overflow-x: clip hides the overflow).

.bleed — should touch both rulers
.bleed-start — left edge on the ruler, right edge aligned with content
.bleed-end — right edge on the ruler

The .bleed* classes use only a negative margin-inline and let the box auto-size. A hand-rolled width: 100vw bleed lands in the same place when content is capped, but always overshoots by a scrollbar-width even on narrow screens where .bleed is exact — so there's no reason to add an explicit width. overflow-x: clip on <body> mops up the residual overshoot when it happens.

2. .container.is-wide

--jf-container-max lifted to 1800px; padding maths otherwise identical. Bleed still reaches the edges — --jf-bleed-space re-resolves on this container against the wider max.

is-wide content box
.bleed inside .is-wide

3. Consumer overrides

Inline --jf-container-max: 800px; --jf-container-gutter: 3rem on the container. Content caps at 800px; min side space 3rem; bleed still exact.

narrow (800px) content box
.bleed — still edge to edge

4. Nested container

Inner .container resets its own padding and sets --jf-bleed-space: 0. A bleed inside the inner one does nothing (expected) — bleed relative to the outermost container only.

outer container content
inner container content (flush with outer)
.bleed inside the nested container — no movement

5. Page cap — .page + --jf-page-max: 2400px

On a viewport wider than 2400px the shell (secondary-tinted edges) is narrower than the viewport (rulers). .bleed should now land on the shell edges, not the viewport edges.

content box inside the capped shell
.bleed — touches the shell edges
text column
.bleed-end — right edge on the ruler

6. Column bleed

Two-column .grid, right column bleeds its outer edge with .bleed-end. Its right edge should land on the viewport ruler; the left column and the gutter between are untouched.

text column
.bleed-end — right edge on the ruler

7. Breakpoint bleed variants (.grid)

Resize across 900px (md) and 1200px (lg). The right column bleeds only between md and lg: .bleed-end-md turns it on from md up, .bleed-none-lg turns it off again from lg up.

.bleed-start-md .bleed-none-lg
Text column

8. Breakpoint .col-start / .col-end (.grid)

Resize across 900px (md). Below md the three columns stack in source order. From md up, .col-end-md pins the middle column to the last grid line and .col-start-md forces the third column onto a new row.

md-3
md-3 col-end-md
md-4 col-end-md

9. Bleed on a flex column — unsupported

Same two-column layout as case 6, but on .row instead of .grid. .bleed-end still applies the negative margin, but flexbox can't widen the column to compensate, so the column just narrows — its right edge does not reach the ruler. Use .grid to bleed a sized column.

text column
.bleed-end on .row — doesn't reach the ruler

10. Off-centre container — expected to break

This <section> has padding-right: 300px (dashed outline = its content box). The container still sizes fine, but it's no longer centred in the viewport — so --jf-bleed-space (measured against 100vw) is wrong: the bleed overshoots the left ruler and stops ~300px short of the right one. This is the documented limitation, not a bug to fix.

content box — shifted left of viewport centre
.bleed — misaligned both sides

11. Container regime check

Resize the window slowly and watch the readout. Content width should be exactly 1140px once (100vw - 1140) / 2 > gutter, and exactly 1280px past xl (1800px).

probe block (content width mirrored in the readout)

12. .section seam collapse

Two stacked sections with the same background collapse their seam to a single gap; a background change keeps both sections' full padding, so the colour edge reads as a deliberate boundary.

Two .section.bg-base in a row…

…same background, so the seam between them collapses to one gap.

.section.bg-primary — background changes, so the full padding is kept on both sides of the edge.

Another .bg-primary — matches the one above, seam collapses again.

13. .is-tight / .is-loose spacing

Same background throughout, so the seam always collapses — the only thing changing between these three is --jf-section-space: .is-tight is fluid(32px, 48px), the default (middle) is fluid(32px, 96px), .is-loose is fluid(48px, 128px). Resize the window to see each range play out.

.section.is-tight — smallest padding, caps early (48px).

.section (default) — widest fluid range, 32–96px.

.section.is-loose — largest padding, up to 128px.