Responsive & Baseline (Atomic) Grids

NOTE: This documentation is new as of 4/01/2016 and not yet implemented in Harmony UI Components or QBO-UI

What Does 4px Mean

4px at 1x, or 4 CSS pixels for web apps, or 4dp if you’re familiar with Android.

If you’re designing for an iPhone 5s with a canvas that is 320 x 568px, you’re designing at 1x and should use a 4px grid. If your canvas is 750×1334, use an 8px grid because you’re designing at 2x.

CSS widths & heights for common devices: http://mydevice.io/devices/


Principles of Atomic Grid Alignment

  • To align with the “One Intuit” initiative across all business units
  • To best support the widest range of devices, screens, dimensions
  • To provide the highest fidelity rendering of graphics and type
  • To support a seamless end to end experience across brand, marketing and product efforts
  • To align with industry standards

Crisper Edges for Shapes and Type

Many devices nowadays have screen resolutions that are 1.5x standard resolutions amounts. This creates a CSS pixel ratio that ends with .5.  These devices are some examples:

Samsung Galaxy S4 mini

Samsung Galaxy S3 mini

Samsung Galaxy S2

HTC Evo 3D

Sony Xperia P

ZTE Open

Amazon Kindle Fire HD(X) 8.9

Amazon Kindle Fire HD 7

Microsoft Lumia 900

Microsoft Lumia 620

Microsoft Surface Pro 3

Microsoft Surface Pro 2

Microsoft Lumia 1520 (2.5)

Motorola Nexus 6 (3.5)

Google Glass

We see that we get crisp edges with a 4px grid, where we can end up with a half pixel offset when scaling from a 5px grid:

4px_vs_5px Grid

Video demonstration: https://www.dropbox.com/s/qkzokffryns8k3y/1.5x%20scaling.mp4?dl=0

Read more: https://www.quora.com/Why-do-some-use-8px-or-8dp-as-the-baseline-grid-instead-of-10px-or-10dp

Alignment with Industry Standards

Google

In Google Material design, created with mobile, tablet, and desktop in mind, all components rigorously align to an 8dp square baseline grid and all typography aligns to a 4dp baseline grid.
Read more: https://www.google.com/design/spec/layout/metrics-keylines.html#

Baseline grid

Apple

Apple is not rigorous about aligning to an atomic grid, but most elements are sized to fit on a 4px grid. Importantly, outer margins in native apps are always a multiple of 4px.

Prototype: https://github.intuit.com/pages/bholcomb/OI-Grid-Prototype/Prototype/

Apple alignment

Web

Appearance & Behavior

The system is a 12-column bootstrap grid with flexbox implementation. Since 12 is easily divisible in terms of small numbers it allows us to have a variation of 12, 6, 4, 3, 2, or 1 evenly spaced columns. The grid has several breakpoints and templates for each screen size. Each template has a specific amount of columns and margin/gutter sizes.

Note: Columns are percentage based while gutters/margins are fixed.

XSmall 320px Mobile Layout (Fixed)

Grid-XS 320 Mobile

Example: 320px Breakpoint (Fixed columns), 12 columns with 20px margins and 20px gutters.

 

Small 480px Mobile Layout (Fixed)

Grid-S 480 Mobile

Example: 480px Breakpoint (Fixed columns), 12 columns with 22px margins and 20px gutters.

 

Medium 768px Mobile Layout (Fixed)

Grid-M 768 Mobile.png Flexible

Example: 768px Breakpoint (Fixed columns) , 12 columns with 22px margins and 20px gutters

 

Large 1024px Mobile Layout (Fixed)

Grid-M 1024 Mobile

Example: 1024px Breakpoint (Fixed columns), 12 columns with 18px margins and 20px gutters

 

Large 1024px Desktop Layout (Flexible)

Grid-L 1024 Flexible

Example: 1024px Breakpoint (Flexible columns), 12 columns with 16px margins and 16px gutters

 

Large 1200px Desktop Layout (Flexible)

Grid-XL1200

Example: 1200px Breakpoint (Flexible columns), 12 columns with 24px margins and 24px gutters

 

There are a few ways to take advantage of the grid. The following are some examples of what is possible.

  • Alignment consists of four ways to anchor content onto the grid: center, right, left, or edge align. In the case of edge align, the container or content would sit perfectly on all columns it falls on. It would dynamically resize width wise according to the change in the column thickness. Align refers to aligning to the column, so it is possible to left align to a column in the middle of the page.
Variations in alignment for content

Example: Variations in alignment for content

 

  • Grouping or chunking is imagining the movement of content in parts. For example, rather than looking at each individual tabs on the page, all the tabs are grouped as one. When the tabs are aligned a certain way, they all travel as one. This cuts out having to figure out which column each tab falls on and how each individual element would wrap.
Example: Tab grouping

Example: Tab grouping

  • Wrapping is when content reaches a point where there is not enough room on the line to fit the content then it is bump down to the next line. Content wraps from left to right.
  • Reordering occurs when the order of content is redefine when the viewport size changes.
Example of reordering changing when viewport changes

Example: Reordering content when the viewport changes

© Intuit 2016 | Terms of use