Last updated: September 10, 2015 at 21:01 pm

The horizontal dimensions of all content blocks should span a specific number of columns as defined by the grid. This page shows maximum pixel widths for each of the span columns on the desktop, as well as their breakpoints and responsive behaviors when content is displayed on tablets and smartphones.

Visual example of the element:

What problem does this element or pattern solve?
In our grid system, layouts must shift and column sizes must change dimensions once they reach certain breakpoints. In order for this to occur, breakpoints must be written into the code. This ensures our page layout resizing happens automatically and our content remains responsive and mobile friendly.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • The horizontal dimensions of all content blocks should span a specific number of grid columns. This page will present the pixel widths for each of these multi-column spans.
  • If your grid is responsive, your layouts will be required to shift.
  • The behaviors, dimensions, and breakpoints for each module must be written into your standards.
  • For example, should side-by-side photos should simply shrink to fit the width of a smartphone screen, or should they be wrapped to display one on top of another?

Sample Content

We use the following media queries to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Our container and grid are based upon Twitter Bootstrap. For specifications and code samples, please visit..

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
modules, containers, fluid containers, breakpoints, column widths, module widths
Related elements within this Style Framework:


Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply