SUPERLAB - Spacing and clamps

Spacings reference

clamp(min, fluid, max)

How do clamps work?

An example clamp: clamp(5px, calc(5px + .1vw), 10px).

We set a minimum, a fluid value, and a maximum value, and let the spacings grow and shrink, in this case as a proportion of the viewport. Going left to right across these values, let's calculate the end value of this rule when the viewport is 1280px (container).

  1. 5px means we never go smaller than 5px
  2. calc(5px + .1vw) means that as the viewport gets larger, the size increases by .01 of the viewport. At 1280px, this value is 5px + 12.8px => 17.8px.
  3. 10px But we have clamped it so it will never go larger than 10px, so the end value is 10px at 1280px (or any viewport width after 500px).

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.

...clamp(30px,5vw,96px)

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.

...clamp(calc(5px + 1.5vw),2.5vw,168px)
...clamp(10px,2.5vw,168px)
...clamp(10px,calc(20px + 2.5vw),168px)
...clamp(20px,calc(20px + 2.5vw),168px)

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

...clamp(50px,calc(40px + 4vw),110px)
...clamp(40px,calc(35px + 3vw),100px)
...clamp(35px,calc(30px + 2vw),80px)
...clamp(30px,calc(25px + 1.5vw),60px)
...clamp(25px,calc(20px + 1vw),50px)
...clamp(20px,calc(15px + .75vw),40px)
...clamp(15px,calc(10px + .5vw),30px)
...clamp(10px,calc(7.5px + .25vw),20px)
...clamp(5px,calc(4px + .1vw),10px)
Viewport to Pixel Breakpoints Rough Reckoning Guide
vw320px device600px device960px device1280px device1920px device2800px device
13.2px6px9.6px12.8px19.2px28px
26.4px12px19.2px25.6px38.4px56px
39.6px18px28.8px38.4px57.6px84px
412.8px24px38.4px51.2px76.8px112px
516px30px48px64px96px140px
619.2px36px57.6px76.8px115.2px168px
Pixel to Viewport Reckoning
px320px device600px device960px device1280px device1920px device2800px device
51.5vw0.8vw0.5vw0.3vw0.2vw0.1vw
103.1vw1.6vw1vw0.7vw0.5vw0.3vw
154.6vw2.5vw1.5vw1.1vw0.7vw0.5vw
206.2vw3.3vw2vw1.5vw1vw0.7vw
257.8vw4.1vw2.6vw1.9vw1.3vw0.8vw
309.3vw5vw3.1vw2.3vw1.5vw1vw