Foundation

Grid

Base 8 Grid

The Base 8 fluid grid is, as the name suggests, based on spaces that are multiples of 8px horizontally and vertically. It is fully fluid (up to specified maximums) to provide the best possible presentation of content at any width.

It is content driven, device agnostic, fully fluid, and allows designers to optimize the content layout at key breakpoints.



Designing in Base 8


Designers should design to the needs of the content they are working with and choose the layout widths that best suits the content needs. They may not always need to design to a given breakpoint.

Recommendations

Always Design
• 392px (typical XS)
• 768px (typical M)
• 960px (minimum L)

Optionally design:
• 584px (S) layout if your content warrants an S view.
• 1168px (XL) layout if your content warrants an XL view.
• A max width layout as needed.

Grid Structure


The type of content a page contains will dictate an appropriate layout and maximum width for the page in order to ensure the content remains easy to consume. For example, users may prefer to view images at very large widths, but dense text is much easier to consume when it remains around 600px wide.

Columns are fluid. Margins and gutters are fixed. Fonts should be coded as ems or percent to allow text to adjust with the fluid columns.

Content should be developed in modules that can reflow or resize or show/hide independently from other modules as needed at specified widths.



Global Viewports


Viewport RangeColumnsGuttersMargins
XS 0-4792 fluid8 fixed8px fixed
S 480-6792 fluid8 fixed8px fixed
M 680-95912 fluid16 fixed16px fixed
L 480-67912 fluid16 fixed16px fixed
XL 1168-135912 fluid16 fixed16px fixed
XXL 1168-135912 fluid16 fixed16px fixed

The minimum site width (or smallest width) is set to 392px wide with a maximum width of 1360px.

Target Design Specs


Viewport RangeColumnsGutters
XS 0-479Design for 392px8 fixed
S 480-679Design for 584px8 fixed
M 680-959Design for 784px16 fixed
L 480-679Design for 976px16 fixed
XL 1168-1359Design for 1168px16 fixed
XXL 1168-1359Design for 1360px16 fixed