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.
Breakpoints
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 |
|---|---|---|
Mobile xs |
Below 36em (Below 576px) |
Total: 4 Text: 4 |
Small Tablet sm |
36-48em (575px-768px) |
Total: 6 Text: 4 |
Tablet md |
48-60em (768px-960px) |
Total: 8 Text: 6 |
Small Laptop lg |
60-78em (960px-1247px) |
Total: 12 Text: 8 |
Laptop xl |
78-88em (1247px-1407px) |
Total: 14 Text: 8 |
Desktop xxl |
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. |