Responsive grid

Responsive grid systems are used to adjust our screens to fit within the available screen space. Rather than designing to specific screen sizes, responsive design is a fluid approach that makes the most of available screen space on any device.

Principles

Fluid: Percentage-based calculations are used instead of pixels.

Responsive: Images and content scale for optimal placement on any device or screen size.

Breakpoints: Queries are used to alter the layout at various breakpoints in the design.

Simplify: Non-essential content is hidden to improve the user experience.

Navigation: Extensive menus use techniques designed for smaller screen resolutions.

Container: To show how the grid is always fluid and percentage based, but the container can be either fixed or fluid on a per-breakpoint basis.

Responsive grid basics

The IDS responsive grid v2.0 is based primarily on the Bootstrap v4 grid system and our 4-pixel atomic grid with adjustments in margins and breakpoints intended to support product needs.

Outer padding around entire grid

The grid itself has some outer padding on its far left and right edges. The outer padding is as follows:

1. 16px base for xxs and xs
2. 20px alternate from sm to xxxl

Gutters between columns

The interior of the grid is separated by gutters between the columns. These gutters change based on a breakpoint as follows:

1. 20px gutters for xxs and xs
2. 20px gutters from sm to xxxl

Breakpoints

Fluid vs fixed width

Responsive design is grounded in fluidity to make the most of the screen space of the device with which your page is being viewed. However, in some cases (e.g., marketing content) you may prefer to employ greater control of the layout of the page to achieve a more constrained and predictable layout. The IDS responsive grid v2.0 allows for this by adding fixed capabilities to the L (large) and XL (extra large) breakpoints.

View an interactive demo of the difference between Fluid and Fixed grids 

Fluid

Fluid means that column widths will continuously increase/decrease in size as the viewing area changes. Gutters and margins remain constant in size.

“A fluid container will stretch to the outer boundaries of its outermost parent. Often, this is the browser, but in cases where a fluid grid is inside of a container between the browser and itself, it can still be fluid and 100% the width of its parent, but maybe not the browser.”

Fixed

Fixed means that at a given breakpoint, columns sizes will become fixed until the next breakpoint is reached in the viewing area. Gutters and margins also remain constant in fixed mode.

Max widths

We define the maximum width for the grid at each breakpoint. This is defined as the maximum width that the 12 columns and dividing gutters can become at any given breakpoint. The margins are not included in this calculated constraint.

Flexible

Configurable elements and attributes with pre-defined styling parameters.

Creating layout

We’re currently ironing through easier instructions to help you get started in the meantime please use this Grid calculator