Responsive grid basics
- 12-column grid
- 20px gutters between columns
- 12px outer gutters on mobile (XS size)
- 20px outer gutters on tablets / desktop (SM breakpoint up)
XS extra small (default layout, starts at 0) SM small (starts at 480) MD medium (starts at 768) LG large (starts at 1024) XL extra large (starts at 1200)
Why is there no 320 breakpoint?
We design for XS at 320px because that’s the smallest device size that we support, but there isn’t technically a breakpoint there because the layout doesn’t change at 320. It’s the same layout all the way from 0 to SM – 1 (479).
Fluid vs. fixed width grid
The column grid can be fluid or fixed width, but is usually fluid for QuickBooks product.
- Fixed just means we set a max-width on the grid so that it doesn’t take up 100% of the available space. This is sometimes preferable in marketing content in particular to have a more constrained and predictable layout.
- These max-widths can be customized, but here are our defaults
- These widths are given without the outer gutters (unlike the Bootstrap convention of including 1/2 the inner gutters on each side)
XS 100% (fluid layout) SM 100% (fluid layout) MD 100% (fluid layout) LG 940px XL 1120px
What are the standard artboard sizes we design for?
As a starting point, 375px and 1200px wide artboards represent the majority of our users’ screen sizes.
When you want to provide clearer direction on how your design should scale, also provide comps at 320, 1024, 768, 480, and/or other sizes as needed. Basically any time you don’t want your developer partners making assumptions about how the design should scale.
For example, if your design includes a 3 column layout on mobile, you will almost certainly want to show what that looks like on a 320px wide device.
Do you want your design to continue scaling across very large screens? Create a comp at 1600px or wider.
Setting up artboards in Sketch
Breakpoints should be applied mobile-first:
- This means styles are applied upward to all larger sizes
- XS styles are applied upward to all larger screens
- MD styles, for example, are not applied to devices smaller than the MD breakpoint (768px)