css-breakpoint-thoughts.css

/*
*  This feels like a strong set of default breakpoints.  I've also got some
*  loose thoughts on each.
*
*   600, 800, 1050, 1300, 1500
*  ▲    ▲    ▲     ▲     ▲     ▲
*  |    |    |     |     |     ╰ XXL 'crazy huge'; notable: 1920
*  |    |    |     |     |           Large monitors at full-screen.  We tend NOT
*  |    |    |     |     |           to consider these sizes for browser-based
*  |    |    |     |     |           tools.  We know everything will fit because
*  |    |    |     |     |           there's so much space, so we don't worry as
*  |    |    |     |     |           much as we do about smaller viewports.
*  |    |    |     |     |           Still, in my experience, most users are on
*  |    |    |     |     |           screens at XL or XXL sizes.
*  |    |    |     |     ╰ XL 'huge'; notable: 1440
*  |    |    |     |          Full-screen or large windows on common or large
*  |    |    |     |          displays.
*  |    |    |     ╰ LG 'large'; notable: 1280
*  |    |    |          Large tablets, small-ish monitors, mid-sized windows.
*  |    |    ╰ MD 'medium'; notable: 1024
*  |    |         Tablets, some large phones in landscape, smaller windows,
*  |    |         small/old/low-res monitors.  This tends to be our baseline
*  |    |         for what we call a "desktop" view (and rob our users of being
*  |    |         able to use our software side-by-side with other tools or
*  |    |         even other instances of our software.)  Heavy use of sidebars
*  |    |         or other "horizontally stacked" elements without consideration
*  |    |         will make this size feel cramped if you're not careful.
*  |    ╰ SM 'small'; notable: 768
*  |         Common phones in landscape, small tablets, ~1/2-screen windows.
*  ╰ XS 'tiny'
*       Small/old phones, common phones in portrait mode, tiny tablets, very
*       old displays, windows squished narrow for side-by-side work.
*/