To make it easy to style responsiveness your interface, we provide a tiny helper script that would detect different predefined screen widths and apply a class to the body element.

The logic for the media classes is as follows:

if (screenWidth > 480) bodyClasses.push("xs");
if (screenWidth > 640) bodyClasses.push("sm");
if (screenWidth > 768) bodyClasses.push("md");
if (screenWidth > 1024) bodyClasses.push("lg");
if (screenWidth > 1280) bodyClasses.push("xl");
if (screenWidth > 1536) bodyClasses.push("xxl");

See full source code, available on the official GitHub repository.

For example:

If the screen was 400px wide, the body element would have no classes
If the screen was 800px wide, the body would have three extra classes: xs, sm and md
If the screen was 2000px wide, the body would have six extra classes: xs, sm, md, lg, xl and xxl

The way we envisioned using these helper classes is:

.selector {
  display: flex;
  flex-direction: column;
}

.md .selector {
  flex-direction: row;
}

Note that these classes would only work if the browser has JavaScript enabled, as they are added using a small helper script (source code).

Interactive example

The following example should illustrate the usage of the body classes:

Why not use @media queries?

Unfortunately, CSS Variables can not be used to define @mediaqueries. We believe that remembering the same media query breakpoints is difficult, and often leads to inconsistent break points across the page.

This solution is not ideal, and we would like to make use of actual @media queries. If you use SASS, PostCSS or a CSS-in-JS solution, feel free to define the break points in the way you prefer. The key point is to hard-code and name the breakpoints, and always use the same across the entire site.