Grid and Layout
Our grid is a complex yet consistent system that brings horizontal harmony, vertical rhythm and visual coherence to our interfaces. On all pages, you can click the the square button in the bottom-left corner of the browser window to preview the grid and check layouts.
Reset
We used Normalize.css and HTML5 Boilerplate as our starting point
Horizontal Layout
The default grid uses 16 columns by default. Responsive layouts and grids will add or subtract columns from this base.
- Column Width:
- 48px
- Gutter Width:
- 24px
- Total Columns:
- 16
- Total Width:
- 1128px
The core layout consists of a main content area that is 840px wide (12 columns) and a sidebar that is 264px wide (4 columns). The alignment of the sidebar relative to the main content area depends on its function (navigation, content details, etc.). Layouts that break out of this content + sidebar convention should have a special or specific purpose.
- Main Content:
- 12 columns, 840px
- Sidebar:
- 4 columns, 264px
The 12-column main content area provides a variety of flexible and complex layout options. Layouts with equal-width blocks:
Alternative layouts:
In general, we use the float
property only for arranging block elements in layouts. To ensure that interfaces remain consistent across pages and browsers, we define the widths of floated block elements according to the grid. Elements aligned within text, such as icons and labels, should not use the float
property because floated elements are powerful and affect the layouts of both parent and sibling elements. Use display: inline-block
instead.
For example, on the Marketplace Products results page, the logo, text and details for each product item are block elements that hit the grid. By contrast, the "Free Trial" label is an inline-block
element; its placement changes with the length of the heading text and its width changes with the length of the text inside the label.
Nesting and Padding
Many times, designs require columned content in containers with padding and/or borders. The general rule followed in this framework is to subtract the left padding and border from the first element in the row and the right padding and border from the last element in the row. One example is the item blocks on the Marketplace Products results page. We include variables and mixins in the SASS structure to calculate widths and handle these cases.
Some complex interfaces may demand imaginative ways to handle the grid. For example, on the card pattern, company/user stats align to the grid. In general, the stats fall in the middle of 2 columns and their left/right borders fall in the middle of the gutter. The leftmost stat includes the left padding and border in its width and the rightmost stat includes the right padding and border in its width.
For elements that need whitespace between text and the boundaries of its container, such as a button, the framework uses the following padding values by default:
Example | CSS |
---|---|
XX-Small Padding
|
padding: 0px 2px; |
X-Small Padding
|
padding: 2px 4px; |
Small Padding
|
padding: 4px 8px; |
Medium Padding
|
padding: 6px 12px; |
Large Padding
|
padding: 8px 16px; |
X-Large Padding
|
padding: 10px 20px; |
XX-Large Padding
|
padding: 12px 24px; |
Vertical Spacing and Alignment
The framework also arranges elements on the vertical axis in a systematic way. The baseline height is 14px, which is also the default font size. Most elements come with default height and margin properties that define whitespace both within and between containers.
- Baseline Height:
- 14px
Margin
In general, the framework uses the following margin values for vertical spacing between block elements. However, in many cases, elements may use margin values as padding to create an even amount of vertical and horizontal space between a boxed element and its container box, such as buttons in the header of a table container.
Example | CSS |
---|---|
XX-Small Margin
|
margin: 4px; |
X-Small Margin
|
margin: 6px; |
Small Margin
|
margin: 10px; |
Medium Margin
|
margin: 14px; |
Large Margin
|
margin: 18px; |
X-Large Margin
|
margin: 22px; |
XX-Large Margin
|
margin: 24px; |
Leading and Height
Font leading or line-height
refers to the height of a line of text. These values affect the vertical space between lines of text. In general, we do not use line-height
to create vertical space or to center block elements vertically. Font leading values define whitespace to maximize the readability of text and are paired to font size values. In the framework, changes in font size always include changes in font leading with the help of SASS mixins. Use padding
or margin
properties for vertical spacing. Vertical centering should occur on a case-by-case basis.
Example | CSS |
---|---|
XX-Small Font Size and Leading
|
font-size: 8px; line-height: 12px; |
X-Small Font Size and Leading
|
font-size: 10px; line-height: 14px; |
Small Font Size and Leading
|
font-size: 12px; line-height: 18px; |
Medium Font Size and Leading
|
font-size: 14px; line-height: 22px; |
Large Font Size and Leading
|
font-size: 16px; line-height: 24px; |
X-Large Font Size and Leading
|
font-size: 20px; line-height: 26px; |
XX-Large Font Size and Leading
|
font-size: 24px; line-height: 30px; |
XXX-Large Font Size and Leading
|
font-size: 28px; line-height: 32px; |
The framework uses the following height values to delineate the vertical size of boxed elements with a single line of text, such as buttons and text input fields. Each height value is the sum of the corresponding font leading, vertical padding and border values. They help create consistent vertical sizes across elements and browsers.
Example | CSS |
---|---|
XX-Small Height
|
height: 14px; |
X-Small Height
|
height: 20px; |
Small Height
|
height: 28px; |
Medium Height
|
height: 36px; |
Large Height
|
height: 42px; |
X-Large Height
|
height: 48px; |
XX-Large Height
|
height: 56px; |