Phenotypes encourages a mobile-first approach for both design and development. The responsive breakpoints and the grid system work together to create consistency across device sizes and product screens or states.
Phenotypes groups devices into the following buckets:
||900px||1199px||Tablet + desktop|
Since this is a mobile-first system, the breakpoints correspond to each range’s minimum value (bold above): 600px, 900px, 1200px, 1500px. Note that the number of breakpoints and their names are the same as Bootstrap, but the breakpoint values are optimized for bucketing rather than hewing to exact device sizes.
A given layout should, at a minimum, adapt at the 900px breakpoint. Often, it’s helpful to create additional optimizations at the 600px and 1200px breakpoints, but it’s sometimes unnecessary. The 1500px breakpoint is usually only helpful for big, splashy marketing pages or hero areas.
Within a range, a layout should stretch, flex, or re-flow as needed to make the best use of the space. For example, on an extra small screen, it’s usually best to fill up all of the available horizontal space. On a larger screen, it might be better to fix the width of the layout and center it.