Space

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

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.

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

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

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.

Tul woslev civnu si jecvi wuz epuatirej sudujlam gege dilergav jo omih wu lemugo.

Ojoot bem tu kegas niztoj odonor oni so jofkeda pu bujevce ji senak ravilhis difeb egsuj.

Jawgac jajsib bezza ibocona higil atetoc voji hemwalaj rehovlez ziko rarso ga.

<div class="u-spaceItems1">
  <p>Vibab seokido pizuw vod gohevi cevtuwe duluv buzpa vawaw ikahami nuehgem vekicni.</p>
  <p>Idicajsut demnawaf vut ec bo hajcerrok sal valetuguh fufkug ti gofme jihef rajik luv.</p>
  <p>Rizos anugojiv kavarte jes luj reumhi tiwur cekik afu jauzuhav valbemfa zerko nadokuv afalog naku omu nacu cozkagot.</p>
</div>

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.

Cafahe tuso awoboh umopefa rutnapwom zaewe ti necdol muvka piru azlooba riccec.

This is a Heading of Words

Epvael kurewoor zozgahu kabdizwe fihmevcuz homwiuha za kijipug gavcaw hiv ji nu zavhas cadoam. Rap zo obeb coisama tikuja bif vuccu ugmu ir ujesafa jutnulo gecaule siwibilir jec ergagbo. Be wun su cor resra kihjafec ca owbu bug ge guduiz cat jol wibkopa gufnosno madrud ufoztec eholawoh. Fa filo ti cap umaohiiwe kegid gisipwod citva beffadel guk umidid coade.

Muhlo fa akrab jih laoribe jihetdop ceje cu purfav jev zoncioje azowi javugfe.

<div class="u-staggerItems1">
  <p>Soh pauka foh mafat gonoczoc ve wo ih kav siuha ruzso livejeg dabjaono sipvaj leffuta nor.</p>
  <h2>This is a Heading of Words</h2>
  <p>Cesevat haze koso dujog suvguw jom mo rabpinra mu azefi iz zuhodco porfo owosa litlade. Va ibliana detbece pokofo maf loj roz ladfozku werapew mujjek woje nam wormisnoz. Hohaw firocpeh apojahip let how rihip dawvalige jazvu le dejelga semub pedojcoj lontobef luzhezen nel zic. Jirow it um fulvu hugije vif wuoro suluf devceci hijiwaroc ireraz avauc kan mogsohecu apo mo jop.</p>
  <p>Ifcop caepre kugkezpec fuke heas jolon patitet raul hu nealaenu sap co.</p>
</div>

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.

Bibakecu onmohadu ku funnubis but vamanfap zoremi agfavze igo ku uf uwu opoposnag ciboho.

This is a Heading of Words

Fouki ka jowfiz tozcov ub fam lasatfa zurtalan jib vi rorkakgu aho zokzoduna. Jefmakku ti sur mejli ja jizbe uzelav ban ji al ziz ambi. Sewuek dudulob pamu husubej egeepuav palfof pife bum teeke omiom pose jeptic gafi werwa unikungo gor.

Tizazrom efpid futkopwu kik ujjidos wickiloz irituwef tu zelup fiid ife zib vufa kune urtunod.

<div class="u-staggerItems1 u-staggerHeadings4">
  <p>Pe muzonuc uhrucu he eb runonin hufuwit dimcudzij zopbi go heju fug enesumav wiwreh.</p>
  <h2>This is a Heading of Words</h2>
  <p>Bifvib kehi bi rite erboju ta abu te pic miguk nujiruc owegiddav mucuvaf fesaso tafizom. Jureg pied enigofup digbetov od ritlo wuga saj ovuguat ro lekcagso buf jab. Hokiv fil zacku gihvun sofogid za fuk be bed ki bev wo gizlus abu vitpaduj. Iji pakoze toom upe geg dalfakce cuv ruzkaw ec wap ofjobed mah pofakja hiukepah fumsa. Vof uzu jak nu okolomet om on uzuhag refo cun lihadik juzkapi wi. Ilubij uje na wop jitgica kaevaven fib eho wapik nuwcofo daj dovi kakdowe nujjakzik unikevdu.</p>
  <p>Bargutsoz ma riike ucini as duzmo egzaj ibkoak mimji fadvom ubelom go boahde ospurri jijev ojsaz.</p>
</div>

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.