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-spaceTopXu-spaceBottomXu-spaceLeftXu-spaceRightXWhere 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.
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-padTopXu-padBottomXu-padLeftXu-padRightXSame 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-pullTopXu-pullBottomXu-pullLeftXu-pullRightXOftentimes 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.
Aldic li sariche uhaodhem him ippizjad heihde us tun id mupvole pennop abohe udzaki ab.
Uw lewroc odsu awisuba nobuvev va azibi zab coce nosu fesa nosi.
Po vakapgo ruri ugwo opabubzev puew rovira as ovagudbuk disina ku nosulsa pevva.
<div class="u-spaceItems1">
<p>Aldic li sariche uhaodhem him ippizjad heihde us tun id mupvole pennop abohe udzaki ab.</p>
<p>Uw lewroc odsu awisuba nobuvev va azibi zab coce nosu fesa nosi.</p>
<p>Po vakapgo ruri ugwo opabubzev puew rovira as ovagudbuk disina ku nosulsa pevva.</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.
Puvpo ut saggo var hoec me sojhovto vujfiz jusuh baakifa uwceg ukure.
Tahis icamamu ka lu vot cobiva luh roj ifde fo va ito es huvcehvev nacgajzu zijut. Naecoji kubamiwu cu epjaha haip hauf fedfa fe pukubner li liipehop odi log lawuzu zi bievtif. Owiece ugzig nibtoj jufafinu ohe la pice teb mozakodi gefojla nuehaja hizu usibucenu. Wici sovbudet ralij vinol munpipi inoha lupepa hidwamar vitatno omga safbu deik uhceova sivaszar. Husla cecge mevudrak lagza wighuv zorurvow ubov jezce fidzehol sah foftin hownag mo ane mu nod roc oka. Gatuw raghinek vev mufeda rubnerbo uv nu izgem wope guhjimar vebukfi aga. Ve godcuhpis apevodjas ej pop uzi vak upu wuj ez famede ka awek indoezu mo waana suk.
Gigiftu vobba can jos tu riduwcuk diahuda fa ca hemilef zojal jar gibecvas zemoci canto ezagi dipotu.
<div class="u-staggerItems1">
<p>Puvpo ut saggo var hoec me sojhovto vujfiz jusuh baakifa uwceg ukure.</p>
<h2>This is a Heading of Words</h2>
<p>Tahis icamamu ka lu vot cobiva luh roj ifde fo va ito es huvcehvev nacgajzu zijut. Naecoji kubamiwu cu epjaha haip hauf fedfa fe pukubner li liipehop odi log lawuzu zi bievtif. Owiece ugzig nibtoj jufafinu ohe la pice teb mozakodi gefojla nuehaja hizu usibucenu. Wici sovbudet ralij vinol munpipi inoha lupepa hidwamar vitatno omga safbu deik uhceova sivaszar. Husla cecge mevudrak lagza wighuv zorurvow ubov jezce fidzehol sah foftin hownag mo ane mu nod roc oka. Gatuw raghinek vev mufeda rubnerbo uv nu izgem wope guhjimar vebukfi aga. Ve godcuhpis apevodjas ej pop uzi vak upu wuj ez famede ka awek indoezu mo waana suk.</p>
<p>Gigiftu vobba can jos tu riduwcuk diahuda fa ca hemilef zojal jar gibecvas zemoci canto ezagi dipotu.</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.
Cob ebis bupabud on urejzac hob vow tekusin batuke ilhiul zuwiwpo ogufofti ob ujucimula madog.
Bufawu soca heew towita ridur jagjon oceri fom kigebi akhak eve vulrig votumpiw res tintum foga. Sudteh zomon zamagdub aki oli udba wozmesav vise cailizop arefo jocnewfu jej vegado hiw tak jokakke tivzag ligef. Wuzile vosakek si ik tif gidjis wejdik hanmemgow efuruwu ki im woksidav bo birulos. Ijsiv reb weh wuuk hofso maag baivi mec ezojockan du delehlap hu gunleluv niesiof sup huh kueru gol. Zes ev gol zaobevo ta raz rusi elojug wil kawa uwji le po nivget nitu goj po epeja.
Ku ego hahdape puhzepbir vagih zi he facuni ogoramenu gemupa da dicdozzuw civuvuz vazvansuv wistosupo fevses nuv bet.
<div class="u-staggerItems1 u-staggerHeadings4">
<p>Cob ebis bupabud on urejzac hob vow tekusin batuke ilhiul zuwiwpo ogufofti ob ujucimula madog.</p>
<h2>This is a Heading of Words</h2>
<p>Bufawu soca heew towita ridur jagjon oceri fom kigebi akhak eve vulrig votumpiw res tintum foga. Sudteh zomon zamagdub aki oli udba wozmesav vise cailizop arefo jocnewfu jej vegado hiw tak jokakke tivzag ligef. Wuzile vosakek si ik tif gidjis wejdik hanmemgow efuruwu ki im woksidav bo birulos. Ijsiv reb weh wuuk hofso maag baivi mec ezojockan du delehlap hu gunleluv niesiof sup huh kueru gol. Zes ev gol zaobevo ta raz rusi elojug wil kawa uwji le po nivget nitu goj po epeja.</p>
<p>Ku ego hahdape puhzepbir vagih zi he facuni ogoramenu gemupa da dicdozzuw civuvuz vazvansuv wistosupo fevses nuv bet.</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.