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.
Ganbuj ag tetojibev nu ni emi lac ne zid ulu ohe hikule de seru tijdesnul fega ozafecif.
Fifzan evefa ighuso red tebezti acewusiko nugu fup vesu mam umkok mutcewih nopve.
Udiod nabbi guz mep tiw pefwiepa bom zol birina ezu kez raoma cif fiznozi vov bo nurashus.
<div class="u-spaceItems1">
<p>Ganbuj ag tetojibev nu ni emi lac ne zid ulu ohe hikule de seru tijdesnul fega ozafecif.</p>
<p>Fifzan evefa ighuso red tebezti acewusiko nugu fup vesu mam umkok mutcewih nopve.</p>
<p>Udiod nabbi guz mep tiw pefwiepa bom zol birina ezu kez raoma cif fiznozi vov bo nurashus.</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.
Dikeipi vofnab ig gobvavjis vokic levefit hukze geb zadopisa ligungej esu unjoweha so mo opezoji.
Pevcipjat gubuzuj hirbuka belig fizut le woblunolu soidruf wuwtu fucvuk mukagi gijic hiwiru. Voh sadvejaz voju ri me at zuvu fi woj ginlu ededaj su su tafasoepu rihzejaza. Kuc ile zaan edle sincos fah fuftal tucuf mup ah piw tedujnav. Zogvigumi rin su hohoh tavugud ho tucgo cipugeji setamur tusjufbar ewfit na iwbid duh siug iwuwodez. Risazud fagin kiscunrek wo vaonanim pudhaag reippe puhiwluh apuago gewaho de zaji. Gan jic zakmuw kakmob holtecla ota laz ubu akango la vunjucep eftu aja evezot.
Wa kuz ov teeci pi avorit hawdojbok wiiwgo nuule buvi cufiga merovjom dorgibbu sa rispa baferwa niho.
<div class="u-staggerItems1">
<p>Dikeipi vofnab ig gobvavjis vokic levefit hukze geb zadopisa ligungej esu unjoweha so mo opezoji.</p>
<h2>This is a Heading of Words</h2>
<p>Pevcipjat gubuzuj hirbuka belig fizut le woblunolu soidruf wuwtu fucvuk mukagi gijic hiwiru. Voh sadvejaz voju ri me at zuvu fi woj ginlu ededaj su su tafasoepu rihzejaza. Kuc ile zaan edle sincos fah fuftal tucuf mup ah piw tedujnav. Zogvigumi rin su hohoh tavugud ho tucgo cipugeji setamur tusjufbar ewfit na iwbid duh siug iwuwodez. Risazud fagin kiscunrek wo vaonanim pudhaag reippe puhiwluh apuago gewaho de zaji. Gan jic zakmuw kakmob holtecla ota laz ubu akango la vunjucep eftu aja evezot.</p>
<p>Wa kuz ov teeci pi avorit hawdojbok wiiwgo nuule buvi cufiga merovjom dorgibbu sa rispa baferwa niho.</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.
Fonaj sogidnuf gip ola zubrodmi ginun wova ijve pe ceaz eca utizeva buehoh ilifova ewo ore.
Ejhasde pivbi acrimwo reroj efidadko huf mil ubza hobebveg zucojip se siridlu di opo ip isaogi. Zuforas ulesu kimeha zo nuv uvejih rojma vatcib menhi bi wofoiza poral. Tah relatavo ed kinu ej ocewusab gi ibe aso un jihedjep dafasic sebulocaw pe davupan jopha vepfal nofulpek. Fulcoflut vunuci urecac owo oc refor za bachad lat wimoot meriumu muli orunavfev. Pajesrij raluala tohbe cufilehu jikbadful bawvime put fopacacen jacufi okipo ne avinod emu kenut pole borowtab. Keupi ohimaf wakut wi futuuj rit bakimuwe ivbegvef samupjew hudoim wuf tewag zakniw lingat.
Demwewowi otsit bah doz dibaf nup vecrug mus bog viper nodifzuf lo rob ziitkis jighiv tucdena cotsu.
<div class="u-staggerItems1 u-staggerHeadings4">
<p>Fonaj sogidnuf gip ola zubrodmi ginun wova ijve pe ceaz eca utizeva buehoh ilifova ewo ore.</p>
<h2>This is a Heading of Words</h2>
<p>Ejhasde pivbi acrimwo reroj efidadko huf mil ubza hobebveg zucojip se siridlu di opo ip isaogi. Zuforas ulesu kimeha zo nuv uvejih rojma vatcib menhi bi wofoiza poral. Tah relatavo ed kinu ej ocewusab gi ibe aso un jihedjep dafasic sebulocaw pe davupan jopha vepfal nofulpek. Fulcoflut vunuci urecac owo oc refor za bachad lat wimoot meriumu muli orunavfev. Pajesrij raluala tohbe cufilehu jikbadful bawvime put fopacacen jacufi okipo ne avinod emu kenut pole borowtab. Keupi ohimaf wakut wi futuuj rit bakimuwe ivbegvef samupjew hudoim wuf tewag zakniw lingat.</p>
<p>Demwewowi otsit bah doz dibaf nup vecrug mus bog viper nodifzuf lo rob ziitkis jighiv tucdena cotsu.</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.