Mark Design

Containers

One axis — how wide is this allowed to get — with a rung for each job. Two of the five are Bootstrap's and keep their plain names; the other three are Mark's and extend the same contract, so content lines up whichever rung a band is standing on.

Every bar below is a live element wearing the class it names. Resize the window and they move.

---

mk-container--prose is measured in ch because a readable line is a count of characters — it should track the font, not a pixel value someone picked. It is the same --mk-measure-prose token .mk-title-block reads, so a heading and the copy beneath it can never end up measuring differently.

inset is rem. How far a band is held in from the page is a layout quantity and has nothing to do with how many letters fit, so borrowing the text unit for it would be a coincidence pretending to be a relationship.

---

A rung is never allowed to be wider than the page container it sits inside. Without that cap the ladder inverts: at a 1024 viewport .container is 960 while a flat 62rem would be 992, so the narrower rung would render 32px wider. The cap is generated from Bootstrap's own $container-max-widths rather than a second copy of those numbers.

So the rungs fold as the viewport shrinks. mk-container--inset is only its own width at lg and up; at md and below it is the container. That is intended — on a small screen there is no readable step between "held in" and "the page", so the ladder stops inventing one instead of narrowing arbitrarily.

Folding is also what retired the sixth rung. There were two middle rungs, media at 50rem and media-wide at 62rem, and at lg the wider one was already folding into a 960 container — so across most of the range anybody browses at, they were two names for one width. They are one rung now, at the midpoint of the two.

---

Pages compose the container wrap or the prose pattern and name a rung through their width field — full-bleed · fluid · container · inset · prose. Naming the rung says why a band is that wide, where col-lg-7 only ever said how many twelfths, at one breakpoint.

The CMS stores its own band vocabulary — container · fluid · slim · prose — and all of it still resolves. slim is the editor's name for the inset rung, blog is a legacy alias for prose, and media and media-wide both land on inset as well.

None of those expire, and the reason is worth stating: renaming a rung is free, re-pointing one is not. An alias costs a line and every stored record keeps rendering what it always rendered, because the name still resolves to the same width. Give an existing name a new width and every record holding it renders differently, looks correct, and shows nothing to investigate. A removed class fails loudly; a re-aimed one fails silently.

That is the whole of the width axis. How a width is then divided is a separate question with its own vocabulary — see Rows.

---

Both cap a width, from the same three tokens. They differ in what else they carry, and the difference is the whole reason both exist.

Content does not decide which you reach for — a measure can hold a grid and a container regularly holds prose. The question is only whether the box is the band’s own. Building a band, reach for a container; narrowing something inside one, reach for a measure.

Getting it backwards is invisible until it is ugly. Measured at 1280px a --inset container and a --inset measure put text 252px and 240px from the edge — nobody would notice. At 375px the cap folds to 100% and they put it at 12px and 0: a measure used where a container belongs puts text flat against the glass, on a phone only. That is why the third gate exists, and why a measure outside a container is a build error rather than a review note.