Sheet 02.01 / Components · Layout

SheetRow

Every page is a stack of full-width rows, each with a hairline underneath and its content in a centred rail. The rail is 768px with hairline edges; the lines stay put and only the content moves.

CLASSb-sheetDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — sheetrowlive, on a 768 rail

any page / rows

Content sits inside the rail. The lines stay put; only the content moves.

A second row

Anatomy

Parts

Part	Class	Notes
Sheet	`.b-sheet`	The page ground: paper, body type and colour.
Row	`.b-row`	Full width, one hairline on the bottom.
Rail	`.b-rail`	768px, centred, hairlines left and right. They disappear on phones.
Padding	`.b-pad`	space-8 left and right, space-5 on phones.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad" style="padding-top:20px;padding-bottom:20px">
      Content sits inside the rail. The lines stay put; only the content moves.
    </div>
  </div>
  <div class="b-row">
    <div class="b-rail b-pad" style="padding-top:20px;padding-bottom:20px">
      <span class="b-caption">A second row</span>
    </div>
  </div>
</div>

Build every page as rows of rails, top to bottom.
Let the row's hairlines be the only border a block needs.

Don't

Nest a rail inside a rail.
Put a card border or shadow inside a row.