Layout Grid

We build our webpages on a responsive layout grid that helps coordinate page elements while allowing them to adapt to different devices and screen sizes.

In addition, we’ve developed an article layout framework of easy to use CSS classes that help speed responsive web development using our layout grid.


Use the following breakpoints in your CSS and Sass stylesheets.

We encourage a mobile-first approach. Start by building for the smallest breakpoint first. Then work your way up to wider viewports by adding breakpoints and styles as needed.

Viewport Range Columns
Below 36em
(Below 576px)
Total: 4
Text: 4
Small Tablet
Total: 6
Text: 4
Total: 8
Text: 6
Small Laptop
Total: 12
Text: 8
Total: 14
Text: 8
Above 88em
(Above 1407px)
Total: 14
Text: 8

Article Layout Framework

Built on Column Setter, this framework establishes a responsive grid and allows for a variety of layout possibilties. By combining the class names shown here, article objects (such as figures and asides) can be sized and positioned many different ways.

Property Classes What It Does
Size .size01 through .size14, .full Objects come in 15 sizes. size01 through size14 are based on the “xl” breakpoint’s 14-column grid (.size01 is one column wide, .size02 spans two columns, etc), and they automatically resize and snap to the grid at smaller breakpoints. Objects with a class of full break out of the grid and take up the full width of the viewport.
Position .left, .right, .center Objects are anchored to the article text: its left edge, its right edge, or its center. Note that centered objects with odd-numbered sizes will not technically align to the grid at some breakpoints but are perfectly fine to use.
Offset .in01 to .in03, .out01 to .out03 Objects can be offset from their anchor position. Like the size classes, the offset classes are based on the “lg” breakpoint’s 12-column grid, and they automatically resize and proportionally snap to the grid at smaller breakpoints. Inset classes push the object in toward the center of the article, while outset classes pull the object out into the margins. Note that offset classes will have no effect if they’re not used in conjunction with left or right.
Responsiveness .wide-xs, .wide-sm, .wide-md Sometimes objects that work well small on wide viewports need to be proportionally larger on narrow viewports. These will force objects of any size to be the full width of the text block on narrower viewports.
Text Wrap .wrap Text will wrap around objects with this class. Note that this class will have no effect if it’s not used in conjunction with right or left, or if there is not enough room for text to comfortably wrap around the object.
Diptychs, triptychs, etc .multi Multiple elements can sit side-by-side inside an object by adding this class.