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.
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|
||Objects come in 15 sizes.
||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.|
||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
||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 will wrap around objects with this class. Note that this class will have no effect if it’s not used in conjunction with
|Diptychs, triptychs, etc||
||Multiple elements can sit side-by-side inside an object by adding this class.|