Spacings reference

It can be tricky to get a sense of how spacings behave on different viewports so this handy visualiser explains it all. Resize the viewport to see how the sizes change. Hover over a block to see the clamp rule controlling it, or choose it in Inspect.

Check this example against Inspect device sizes to see how we've chosen 5vw as our fluid width, and how the clamps apply. It will stop shrinking at less than 600px viewport and stop growing at greater than 1920px viewport. Unlike some older sizing approaches, these spaces can carry on getting bigger after the device width has exceeded the container width, unless you clamp them.

In this example, notice the difference between a straight viewport value 2.5vw and this calc calc(20px + 2.5vw). The left hand value acts as a floor. The width will never go below 20px, even if you set a lower number on the min. If you put this calc on the min, the minimum value will be 20px.

Here's a spacing scale, like our greys scale or our type hierarchy. We should work on this a bit.