Stack-and-grow Prototype 02

Stack-and-grow Box
Stack-and-grow Box
Stack-and-grow Box
Stack-and-grow Box
Bitty-Block Box
Bitty-Block Box
Bitty-Block Box
Bitty-Block Box

Purpose:
Providing breakpoints within a container not the viewbox without media queries

This prototype explores the code described by Rémi Parmentier in the tutorial The Fab Four technique to create Responsive Emails without Media Queries, (2016)

The key to the code is the relationship between max-width, width, and min-width.

A further explanation is provided by Raphaël Goetter in the tutorial Head in the Flux!

The cascade rules behind this pattern are described as thus:
if there is no min / max , width wins
if width is greater than max-width , max-width wins
if width is smaller than min-width , min-width wins

The order of execution is important , it is the order of the list, so 1 then 2 then 3. In the end, min-width wins.

min-width() = Desktop Element width
max-width() = 100% Mobile stack
width:calc() = the target breakpoint