Responsive CSS Patterns without Media Queries

Let me start by saying that despite the title, this article is not about doing away with media queries or media query bashing in any way. Media queries are incredibly useful and I use them all the time for all sorts of things. However, they don't solve all our responsive design problems.

It's often desirable to effect changes to an arrangement of elements based on the dimensions of their container, rather than the viewport. To solve this problem, the concept of element queries was born. However, element queries aren't really a thing yet, and Mat Marquis has demonstrated some problems with the concept and reformulated them as container queries.
But these aren't a thing yet either, unfortunately.

Hopefully they will be one day, but in the meantime, I've presented here a few tricks and techniques you can use to address some of the problems container queries will one day solve.

Flexbox with flex-wrap

Flex-wrap can solve a multitude of problems when it comes to responding to container dimensions. For example, it's common to want two elements to appear side-by-side if there's enough space, but to stack one on top of the other if there isn't. In the following demo we can see this behavior in action:

See the Pen Responsive module - flexbox by SitePoint (@SitePoint) on CodePen.

No fancy tricks here, just flexbox with flex-wrap but it works a treat. Flexbox can be used for many more things than just creating two columns, of course, but I've kept things simple for this demo. The essential parts of this technique are simply:

[code language="html"]
<div class="container">
<div class="img">...</div>
<div class="content">...</div>
</div>

...

.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

.container .content,
.container .img {
flex: 1 0 12em;
/* Change 12em to your breakpoint. */
}
[/code]

Understanding flex-grow, flex-shrink and flex-basis is an important part of getting this right; I find this flexbox tip from Zoe Gillenwater really useful in understanding the relationship between these properties.

'The Fab Four Technique'

The use of width, min-width, max-width and calc to create a breakpoint-based width-switch -- dubbed 'The Fab Four technique' -- was the brain-child of Rémi Parmentier. Originally created to help with responsive emails, it can be easily be used for normal web pages and has really opened up some new possibilities in creating self-adapting modules, as demonstrated by Thierry. For example,

[code language="css"]
{
min-width: 50%;
width: calc((25em - 100%) * 1000);
max-width: 100%;
/* Change 25em to your breakpoint. */
}
[/code]

This works because when width is a percentage, it is a percentage of the element's container width. The calc function then compares this value to the desired breakpoint and then generates a really large positive number (if the width is less than the breakpoint), or a really large negative number (if the width is greater than the breakpoint), or zero if there's an exact match. A large positive width is capped by max-width and a large negative or zero width is set to the value of min-width.

So, in the example above, we set a breakpoint of 25em. This resolves to 400px if the font-size is 16px. If the container is 400px or above (in other words equal-to or greater-than the breakpoint), the width resolves to 0 or a large negative number:
(400 - 400 = 0) * 1000 = 0 or (400 - 401 = -1) * 1000 = -1000

With values like these, min-width kicks in so the resultant width of the element in the example above will be 50%. However, if the container is 399px or below (in other words smaller than the breakpoint), the width resolves to a large positive number:
(400 - 399 = 1) * 1000 = 1000

Continue reading %Responsive CSS Patterns without Media Queries%

by Andy Kirk via SitePoint