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.

Elihupnuz zoheguam jikbobup ajape si sontah seton sedrehud wip umefedrib laat kilol joffucnih ilo.

Eze nud enuruvlu rezigap do oc bej odcum oziti pobtef ij wib rekib bi ze miuz zu ba.

Nehil ecaboval nulod dajad iw juz ewbu fuji fe ce ummicu lon nog ceviku hut cocim sejuzteg.

<div class="u-spaceItems1">
          <p>Elihupnuz zoheguam jikbobup ajape si sontah seton sedrehud wip umefedrib laat kilol joffucnih ilo.</p>
          <p>Eze nud enuruvlu rezigap do oc bej odcum oziti pobtef ij wib rekib bi ze miuz zu ba.</p>
          <p>Nehil ecaboval nulod dajad iw juz ewbu fuji fe ce ummicu lon nog ceviku hut cocim sejuzteg.</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.

Besor hofhewi satu dubirro gupcu dosad zac emtaz pin una ed oma rufjot huwizu jivfo lusinhi baco.

This is a Heading of Words

Kehmol fog kiru uhhilec hos sopmoudi kagkapi jevjol lupoja nafse hipson vel jali zer. Seprirwen giwuj ok fav bisa cahuruw mevav fa difabgij jabmatzup gidsec fioh bu. Vowbuzefo navap jufi kidi ki vukowenu lozoiwu ma vokrodlak bic giza satubevo. Oz nelziv tumifa aktu owuil co om curle lodjot zufe kim do. Esu ab kimezi ripji wibozo lenner mirdiw ludwihmo divahako lum waavi wit zacekcor kepis zet woz vesaf do.

Pubbupcu fucelej wuskibup niaba gew ha udfolose kug litow odubu wuwaeb nagdip we feb rowcodse.

<div class="u-staggerItems1">
        <p>Besor hofhewi satu dubirro gupcu dosad zac emtaz pin una ed oma rufjot huwizu jivfo lusinhi baco.</p>
        <h2>This is a Heading of Words</h2>
        <p>Kehmol fog kiru uhhilec hos sopmoudi kagkapi jevjol lupoja nafse hipson vel jali zer. Seprirwen giwuj ok fav bisa cahuruw mevav fa difabgij jabmatzup gidsec fioh bu. Vowbuzefo navap jufi kidi ki vukowenu lozoiwu ma vokrodlak bic giza satubevo. Oz nelziv tumifa aktu owuil co om curle lodjot zufe kim do. Esu ab kimezi ripji wibozo lenner mirdiw ludwihmo divahako lum waavi wit zacekcor kepis zet woz vesaf do.</p>
        <p>Pubbupcu fucelej wuskibup niaba gew ha udfolose kug litow odubu wuwaeb nagdip we feb rowcodse.</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.

Eh urete boku goke ri co jaagno us fok duoroda pud kahucook kosukzid ri re ni agra.

This is a Heading of Words

Ruapoli okjob dinna ju te tamratwas co jiwsamfib ujfigcam zutubi cafgul porfonoc hacgil. Nan fugo cueju avo guohutos ru wumubiha ufwaz paneko rosimun efija zurco vu wupfi sepfik fazte enigagzin. Tu ocmo fujita ka odiru sieja vagujzih meg kuzo gahdi ema pootaz pukahozo zumhafof uzitev etcifse. Piumun jafbaromu pevon wanocif ub vinlazwa warmukfaf escas rog gaj fuvo caig kuddov ne sogwu. Fo ucuko uzo le kojo waghag nizi hu futen tabmowuj ilhe huzzerip dubiit ecipesof lomimcu. Ra cu fe pe zeubacub tenas sigen sor uja ne evo kun ikubilpe giwe vora kufdolir.

Jo vedriw ihwud zoppaluhu sohe dujwuave poapsit nedto veetpon fok ivku meum rutpodtu ofire wuweti cahvon.

<div class="u-staggerItems1 u-staggerHeadings4">
        <p>Eh urete boku goke ri co jaagno us fok duoroda pud kahucook kosukzid ri re ni agra.</p>
        <h2>This is a Heading of Words</h2>
        <p>Ruapoli okjob dinna ju te tamratwas co jiwsamfib ujfigcam zutubi cafgul porfonoc hacgil. Nan fugo cueju avo guohutos ru wumubiha ufwaz paneko rosimun efija zurco vu wupfi sepfik fazte enigagzin. Tu ocmo fujita ka odiru sieja vagujzih meg kuzo gahdi ema pootaz pukahozo zumhafof uzitev etcifse. Piumun jafbaromu pevon wanocif ub vinlazwa warmukfaf escas rog gaj fuvo caig kuddov ne sogwu. Fo ucuko uzo le kojo waghag nizi hu futen tabmowuj ilhe huzzerip dubiit ecipesof lomimcu. Ra cu fe pe zeubacub tenas sigen sor uja ne evo kun ikubilpe giwe vora kufdolir.</p>
        <p>Jo vedriw ihwud zoppaluhu sohe dujwuave poapsit nedto veetpon fok ivku meum rutpodtu ofire wuweti cahvon.</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.