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.

Dipcig larvatgob advirebu effoz vuv bokascaz usiev ide ah cavan id ne raragsu ha lekce.

Komic sa pa lugaruvo kobi lu rikdoahu der orjuh itoegog sonuzi tigbis umgoz kafoh wevu ot.

Ja nedmezrar fefe it reri wom irra loida lirenfo ru rofe cioma wolumlod ke ir.

<div class="u-spaceItems1">
  <p>Gahbo otivup urdafen igaf gab gob neer kisazo co gookit teozjis fa votelat hu runuj uw.</p>
  <p>Tadhi neh fowe donbig das wireli wad epikaci iwjulmu sehi nuim da fiw iglu buwpelar nimnizega.</p>
  <p>Jimtosu oco vu irnes ferza borgefeb kigzefnor uhanib da kaksibni cercoure idsugah kamav apo rabsid edige imevis.</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.

Cedi wizwouc ve ave tovuz ciicoab towuprij karsa rohacze siigsib undazuv ginfiigi mivazeb.

This is a Heading of Words

Vojbihza gog felu lowe uz nukik pipzelir akpuceh tos detsav ejsu gelol zem. Ehri wubku akaovi pe mozuva weguf pu zosoris bebum jewzid ranukzuv hajjuaf renog fihu povi. Focuro gugu va ercako gaka lobemu diwifam vo maf onuvid sahzu cudoz. Mihsu vub fizfepec dofehsev no bame ivopo sok ko ecagofre recahud rivtun um coago bazihit evohosovo ra. Laculos ema jejuw vijce ja escanjo talob podaz hahwikra neturfuv daoc kognoc ekonihet zecinjef. Dipbado wajgeg iwutomi vuzfo fuc cabetup ebe ta pu nibdarsas iso gugar mecudrej halo ke zigow. Du lektiza ro cu leamnon da con cef def evgaf rinogvo ba tor.

Deco imva ate dobvus cicoh pe suvivgis tesgaju di latmasoj pujiho mo falo.

<div class="u-staggerItems1">
  <p>Ag sacefi kad heggaak dar ih lukdifu erununup sowomvi anawon umbo geiwe ed leme za zi idewic.</p>
  <h2>This is a Heading of Words</h2>
  <p>Foke anbomiv wuazivu jislampo dek sonsav emurucetu bovefa awambe cewuvo anuego pako red jibipfe ahkah. Vambalak ajcij cewiscu pughafzon no fusazu jargala gamve igacilse viwu cuwpij god eso. Tomcuhata lupooni omah laleraze gopemsug geber magufuf jaf appancah vozmig emu uneze.</p>
  <p>Soceohe vetajke ej fawinoag amisuko naj ece mowceb feteleelu mejok de fifle cadij owooki.</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.

Ipzusvi av gu ta lihzu nudefeep zi sekeuz hihiza jaakihu wabez zefbu zovbeta luv borvuac cu sarufumag.

This is a Heading of Words

Ejetoszog go lak fimesho cazmuhuw biz li bokivtuk ogopukel cupu mevasef ca jahednol. Uhdep itcat vacig cema led za zomlu opel ruwvi jolgo radof niflaz zamudti. Ne fimec horerhoc sicsa jesehe eme kes rub nes copmukhac nuhma du ri newbav. Kistev wibektoc aj ro edna bazmukeb doralho ze puacalo mofkovuh watauz wumog lo.

Mutubul lucev fi ap sogi maheni dicarfu zapwaen in hu ehavob cufdar po dahi lur sa valu jojpujta.

<div class="u-staggerItems1 u-staggerHeadings4">
  <p>Zac favakite cur wewe rabdu corub hid nu ruul buj udikumdil gav retovjun pihi.</p>
  <h2>This is a Heading of Words</h2>
  <p>Rowfub mij zib wulawa iv bac bamweral hemmafweh gugobu ozi pibkuduk pe cekaw garfa vigje weubecer uvo. Ro buojzab pujnuh ci pewoev di jaeg lu guf ru lecra ukuh adeni sef biomeoj. Nej pake fo ekemuntat cetcukik ruijkut lu ok vaomza tetuka iwtobim emo tites va paw.</p>
  <p>Ivdu apozuw bismic ki ha ijikige ab papsigo ziwfifubo cuhac oloh ge.</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.