Responsive Grid

Designing to a Responsive Layout

The following breakpoints have been designed to guide the layout and the scaling of fonts across screen resolutions:

• xs (0px - 543px) - Extra small screen / mobile
• sm (544px - 795px) - Small screen / vertical tablet
• md (796px - 1047px) - Medium screen / horizontal tablet
• lg (1048px - 1799px) - Large screen / desktop
• xl (1800px - ∞px) - Extra large screen / wide desktop

Screen Size Templates

For designers working on responsive applications, download the Photoshop template in the Resources section. This template includes several common screen sizes along with the corresponding 12-column responsive grid and baseline grid to guide your layout.

See Typography for more information about baseline grids and how font sizes increase and decrease according to screen resolution.

Responsive Grid and Spacing

Columns Flex, Margins and Gutters Adhere to the Base Unit

• All screens have a 12-column structure guiding layout and font size.
• Each column has 12px padding or 1 em on either side.
• When two columns are next to each other, there is a total of 24px (2em) of padding (called the “gutter). At the small and xs breakpoints, this gutter decreases to 12px (1em) to allow more space for content.
• This allows content to flex with the columns, while the gutters remain fixed (at 24px or 12px, depending on the screen size).
• Margins may flex for design in order to achieve whole-pixel widths on columns; however when coded they do adhere to the base unit as follows:

Developer Notes

Spark’s responsive grid is based on a 12 column layout with five different breakpoints. Spark offers a set of CSS classes to solve small, common problems and enforce consistency within the use of the responsive grid.

There are three components to the grid:

A container aligns your content to the grid and is created by adding the .container class to an element.

• Containers
• Rows
• Columns

Inside of containers are rows.

Rows are horizontal groups of columns and they are created by adding the .row class to an element.

Columns contain your actual content and should be direct children of a row.

They are created by adding a class of .col-*-* to an element. The first * should be replaced with the name of the breakpoint you would like to target, and the second with the number of columns you’d like your element to span. Breakpoints targeted in a column class name are minimum widths. This means a class of .col-md-* would affect sizing on medium, large, and extra large (but not extra small or small) screens.

For example, .col-xs-8 would create a column that spanned 8 of the 12 columns on any breakpoint from extra small up. Similarly, .col-lg-2 would span 2 of the 12 columns on any breakpoint from large up. By using multiple column classes is is possible to create content which displays differently at various screen sizes.