Space

TODO: show examples once there are container and border patterns.

Space Around

Utilities for adding space around (outside) an element, using values from our modular scale to promote harmony in compositions:

  • u-spaceX - Adds space to all dimensions.
  • u-spaceEndsX - Adds space to top and bottom.
  • u-spaceSidesX - Adds space to left and right.
  • u-spaceTopX
  • u-spaceBottomX
  • u-spaceLeftX
  • u-spaceRightX

Where X is replaced with the desired modular scale step. For negative steps, use a leading zero (01 instead of -1). Omit X to use the base (0) step.

If you need to reset margins to auto check out our flex expand utilities.

Pad Inside

Same as space utilities, but for adding whitespace within an element.

  • u-padX - Adds padding to all dimensions.
  • u-padEndsX - Adds padding to top and bottom.
  • u-padSidesX - Adds padding to left and right.
  • u-padTopX
  • u-padBottomX
  • u-padLeftX
  • u-padRightX

Pull

Same syntax, but applies negative margin. Useful for counteracting whitespace in parent elements or applying visual adjustments to non-rectangles.

  • u-pullX - Pulls element in all directions.
  • u-pullEndsX - Pulls element from top and bottom.
  • u-pullSidesX - Pulls element from left and right.
  • u-pullTopX
  • u-pullBottomX
  • u-pullLeftX
  • u-pullRightX

Rhythm: Exact

Oftentimes you'll want children of a certain element to space themselves with consistent rhythm. The u-spaceItems utility accomplishes this by adding space between adjacent children. It supports the same modular scale values as the other utilities.

Danop zuscalne fiize loom tahci hez mo pofis zuwji caf va fiv luwibit alaabiaju sec.

Lo osluw dik dofbol pu lihak tir rehkowsuj ijoavloj bahaweh noamoaw ce.

Te bonojbo ziibdi zan mihave bodwabfih gegohpu kug soifu wu up fudbuc fo evta gigic toznu curbibur.

<div class="u-spaceItems1">
          <p>Danop zuscalne fiize loom tahci hez mo pofis zuwji caf va fiv luwibit alaabiaju sec.</p>
          <p>Lo osluw dik dofbol pu lihak tir rehkowsuj ijoavloj bahaweh noamoaw ce.</p>
          <p>Te bonojbo ziibdi zan mihave bodwabfih gegohpu kug soifu wu up fudbuc fo evta gigic toznu curbibur.</p>
      </div>

Rhythm: Relative

While u-spaceItems is helpful, it can struggle with prose content where elements of varying size and hierarchy (such as headings and paragraphs) may appear too close together. u-staggerItems accomplishes the same thing, but bases the adjacent spacing on modular scale values relative to the items themselves.

TL;DR: Larger items will have more preceding space than smaller ones.

Etuse rivad guec lu baneale gepnese pod ziw sicala dof jofridej aca.

This is a Heading of Words

Galocelat ceg luseto gicajuka ni bukfe zidic itzubi rajoc wonoote rihot dilot giumbi ar nahfofu cab. Taf urfomen no ropa kimtidhi pansahgif sogji mik icuarram oleova cek on. Bedavam rugi vagpofvi rikfumu wi jivulli iruticjo gihic vace citke canek fuskakuda rozjuc oroju biwman tif set co.

Ejofefer ir ma hofunziw jahlu tibafop eh izvufi logume wun wet ikufu jucowja fup luklecse.

<div class="u-staggerItems1">
        <p>Etuse rivad guec lu baneale gepnese pod ziw sicala dof jofridej aca.</p>
        <h2>This is a Heading of Words</h2>
        <p>Galocelat ceg luseto gicajuka ni bukfe zidic itzubi rajoc wonoote rihot dilot giumbi ar nahfofu cab. Taf urfomen no ropa kimtidhi pansahgif sogji mik icuarram oleova cek on. Bedavam rugi vagpofvi rikfumu wi jivulli iruticjo gihic vace citke canek fuskakuda rozjuc oroju biwman tif set co.</p>
        <p>Ejofefer ir ma hofunziw jahlu tibafop eh izvufi logume wun wet ikufu jucowja fup luklecse.</p>
      </div>

Rhythm: Relative Headings

Sometimes even the u-staggerItems* utilities don't quite get the contrast between sections desired. Use u-staggerHeadings to further differentiate headings from their preceding content.

Epepeldi aszedfa be buvhidok neimo gowaca wam ca tiwgozac tetiw lik elositol nolapig si dujze woibi.

This is a Heading of Words

Nipko fine idouwa uvhe bo ogma vuwvajup libjagwu vele neh ifle hirinvut gotawiv eji ig undempu zetep. Lo nufalup dogucwu uzwil pi jiude tuhsibgej ewmer tek dos taobi namo idopa. Abiween sigsuh pur ficiabo pimapewo sucmu ono jupewi niho facpa alaces eb ril kiros ge avagi. Oh hepduge zo kudcag vet zabil vo sami dup saja jiimral neb alo. Kulwupo ef be in ta lusi jorerne ebi zebtet wok ruv teded uvizovosi polu ehcof he ab.

Vigduk peb fisnalor notar vujbir cafpa keucage kitiro olgas tas miob cidzil.

<div class="u-staggerItems1 u-staggerHeadings4">
        <p>Epepeldi aszedfa be buvhidok neimo gowaca wam ca tiwgozac tetiw lik elositol nolapig si dujze woibi.</p>
        <h2>This is a Heading of Words</h2>
        <p>Nipko fine idouwa uvhe bo ogma vuwvajup libjagwu vele neh ifle hirinvut gotawiv eji ig undempu zetep. Lo nufalup dogucwu uzwil pi jiude tuhsibgej ewmer tek dos taobi namo idopa. Abiween sigsuh pur ficiabo pimapewo sucmu ono jupewi niho facpa alaces eb ril kiros ge avagi. Oh hepduge zo kudcag vet zabil vo sami dup saja jiimral neb alo. Kulwupo ef be in ta lusi jorerne ebi zebtet wok ruv teded uvizovosi polu ehcof he ab.</p>
        <p>Vigduk peb fisnalor notar vujbir cafpa keucage kitiro olgas tas miob cidzil.</p>
      </div>

Reset

You can remove space and padding entirely from an element by using the u-despace and u-depad utilities. These support the same directional variations as the other space utilities, for example u-despaceEnds or u-depadLeft.