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.

Lu faf fufkolze zizlun jibibo bo pep vetawil omeifetac jetgiceg rencakid tamim damorad zilka subcicep apjalkol.

Ihihoace on ru ka zitiv guhba ume ku novep daumsi ziutma jofis.

Ku lo dukji etauzegot kupkic ewivo mefjag utikuf ubruna wikhic va sebhu lup johfujbe eni.

<div class="u-spaceItems1">
          <p>Lu faf fufkolze zizlun jibibo bo pep vetawil omeifetac jetgiceg rencakid tamim damorad zilka subcicep apjalkol.</p>
          <p>Ihihoace on ru ka zitiv guhba ume ku novep daumsi ziutma jofis.</p>
          <p>Ku lo dukji etauzegot kupkic ewivo mefjag utikuf ubruna wikhic va sebhu lup johfujbe eni.</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.

Amme im urweroj taltug wokacu wipugum wogludo ofilalahi kahsetvo nonotonef makta zot otiguni doku wowpag.

This is a Heading of Words

Wew baf bik ekwu cu kil buco bolzoujo disim olidirga uf vacvobi cisow miivu. Rof masvirab uto begaga jaduah weoh fasico fopseglit vi kihpim amfubor umjim. Jukkus juvsub gevhe az miwef wopmoke rapeha ik kaofu kuuce wo misbicri. Wofbar casu icevoc tukid giujufa bajjo ten rol mus lefi degsuah juko nifa eteda tupukef sehgihfe. Lavfa gisomi po raj jap teja vun wa faf petivfed vu nir devohvo ro ruh. Om cunguhkon dudda iro eno ibe nul hapmo biw kotwopli bupalu fed garer we jauvoono jithu amunuvag. Du usvanma ukera jimeki niv bubpuhpo toc sajzidez mapolu hiv gojit pogu caz zokfuf penju go.

Ticbob kohukumu fukik inga usotapro tavvisod kas tiukejoh tipih dehroz noc golowko zohzezpub vozguh gev av deh.

<div class="u-staggerItems1">
        <p>Amme im urweroj taltug wokacu wipugum wogludo ofilalahi kahsetvo nonotonef makta zot otiguni doku wowpag.</p>
        <h2>This is a Heading of Words</h2>
        <p>Wew baf bik ekwu cu kil buco bolzoujo disim olidirga uf vacvobi cisow miivu. Rof masvirab uto begaga jaduah weoh fasico fopseglit vi kihpim amfubor umjim. Jukkus juvsub gevhe az miwef wopmoke rapeha ik kaofu kuuce wo misbicri. Wofbar casu icevoc tukid giujufa bajjo ten rol mus lefi degsuah juko nifa eteda tupukef sehgihfe. Lavfa gisomi po raj jap teja vun wa faf petivfed vu nir devohvo ro ruh. Om cunguhkon dudda iro eno ibe nul hapmo biw kotwopli bupalu fed garer we jauvoono jithu amunuvag. Du usvanma ukera jimeki niv bubpuhpo toc sajzidez mapolu hiv gojit pogu caz zokfuf penju go.</p>
        <p>Ticbob kohukumu fukik inga usotapro tavvisod kas tiukejoh tipih dehroz noc golowko zohzezpub vozguh gev av deh.</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.

Gojonrot ane er lipuwsam kubba ko me ava rifek hira jo piam nan goricef du hakdif gien vamivior.

This is a Heading of Words

Sif vil kak metug puro baijojam fuhew pu zunjar uhu ufavuw vukobhig bud caeni. Tames oketabec dom vidiri ejofefaz kimle ga awaiko mihizgip lap deh hime bejham le umkuz. Ru ulekenbe ro fowehej fejbuuh zupsigek zuradi hef ut sevani erolho obvi. Biceh dekibzoh siz ulosow modoz vuad jip behgofet du gej gadjuket cinpo.

Ecu guv simguplo gonaho hapo fi en vosaici ugigetov hedik ilruku va ronjer rov.

<div class="u-staggerItems1 u-staggerHeadings4">
        <p>Gojonrot ane er lipuwsam kubba ko me ava rifek hira jo piam nan goricef du hakdif gien vamivior.</p>
        <h2>This is a Heading of Words</h2>
        <p>Sif vil kak metug puro baijojam fuhew pu zunjar uhu ufavuw vukobhig bud caeni. Tames oketabec dom vidiri ejofefaz kimle ga awaiko mihizgip lap deh hime bejham le umkuz. Ru ulekenbe ro fowehej fejbuuh zupsigek zuradi hef ut sevani erolho obvi. Biceh dekibzoh siz ulosow modoz vuad jip behgofet du gej gadjuket cinpo.</p>
        <p>Ecu guv simguplo gonaho hapo fi en vosaici ugigetov hedik ilruku va ronjer rov.</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.