https://www.youtube.com/watch?v=Fmi_YoiuUBM

Benefits

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" />

Compatible with margin, padding, & gap

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Provides visual consistency

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Adapts sizes responsively

</aside>

Adaptive Sizes

Sizes from spacing utilities reduce on each breakpoint

<aside> <img src="/icons/arrow-southeast_purple.svg" alt="/icons/arrow-southeast_purple.svg" width="40px" /> 75% of original size on tablet

</aside>

<aside> <img src="/icons/arrow-southeast_purple.svg" alt="/icons/arrow-southeast_purple.svg" width="40px" /> 50% of original size on landscape

</aside>

<aside> <img src="/icons/pencil_purple.svg" alt="/icons/pencil_purple.svg" width="40px" /> Adjust from page_code_utilities embed

</aside>

/* desktop */
html { --spacing-scale: 1; }
/* tablet */
@media screen and (max-width: 991px) {
  html { --spacing-scale: 0.75; }
}
/* landscape */
@media screen and (max-width: 767px) {
  html { --spacing-scale: 0.5; }
}

How to Apply

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Select a property to apply spacing on (i.e. padding-top)

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Select a REM value to apply (0 through 20) Sizes 0 through 4 can be set in .25 increments Sizes 4 through 10 can be set in .5 increments

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Add the property and value in your class name

</aside>

Untitled

When to use adaptive spacing utilities