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
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)
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:
Video demonstration: https://www.dropbox.com/s/qkzokffryns8k3y/1.5x%20scaling.mp4?dl=0
Alignment with Industry Standards
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#
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.
Appearance & Behavior
Note: Columns are percentage based while gutters/margins are fixed.
XSmall 320px Mobile Layout (Fixed)
Small 480px Mobile Layout (Fixed)
Medium 768px Mobile Layout (Fixed)
Large 1024px Mobile Layout (Fixed)
Large 1024px Desktop Layout (Flexible)
Large 1200px Desktop Layout (Flexible)
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.
- 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.
- 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.