Spacing
If you need to add spacing between elements, such as a margin or padding around an element, you can apply easy, consistent fixed margins and padding using the following classes. This spacing is used throughout the theme and design framework, so your use of these classes will be consistent with the rest of the theme.
A series of utility classes for achieving consistent spacing. These classes, applied in html, are preferred to controlling margins on elements via CSS. Project-wide CSS is typically littered with lots of rulesets that only declare margins on an element. These utilities help reduce overall css sizes, help eliminate magic numbers, and help create in-page and page-to-page visual harmony.
The classnames use the following shorthand:
m = margin p = padding
t = top r = right b = bottom l = left
x = x-axis y = y-axis
0 = zero
1 = applies value 0.4rem; // 7.2px 2 = applies value 0.8rem; // 14.4px 3 = applies value 1.6rem; // 28.8px 4 = applies value 2.4rem; // 43.2px 5 = applies value 3.2rem; // 57.6px 6 = applies value 4rem; // 72px 7 = applies value 4.8rem; // 86.4px 8 = applies value 5.6rem; // 100.8px 9 = applies value 6.4rem; // 115.2px
Examples and Code
Section titled “Examples and Code”<h2>Margins on all sides</h2> <div><div class="m0 palette-bg-uo-yellow">m0</div></div><div><div class=“m1 palette-bg-uo-yellow”>m1</div></div>
<div><div class=“m2 palette-bg-uo-yellow”>m2</div></div>
<div><div class=“m3 palette-bg-uo-yellow”>m3</div></div>
<div><div class=“m4 palette-bg-uo-yellow”>m4</div></div>
<div><div class=“m5 palette-bg-uo-yellow”>m5</div></div>
<div><div class=“m6 palette-bg-uo-yellow”>m6</div></div>
<div><div class=“m7 palette-bg-uo-yellow”>m7</div></div>
<div><div class=“m8 palette-bg-uo-yellow”>m8</div></div>
<div><div class=“m9 palette-bg-uo-yellow”>m9</div></div>
<h2>Margins on top side</h2> <div><div class=“mt0 palette-bg-uo-yellow”>mt0</div></div>
<div><div class=“mt1 palette-bg-uo-yellow”>mt1</div></div>
<div><div class=“mt2 palette-bg-uo-yellow”>mt2</div></div>
<div><div class=“mt3 palette-bg-uo-yellow”>mt3</div></div>
<div><div class=“mt4 palette-bg-uo-yellow”>mt4</div></div>
<div><div class=“mt5 palette-bg-uo-yellow”>mt5</div></div>
<div><div class=“mt6 palette-bg-uo-yellow”>mt6</div></div>
<div><div class=“mt7 palette-bg-uo-yellow”>mt7</div></div>
<div><div class=“mt8 palette-bg-uo-yellow”>mt8</div></div>
<div><div class=“mt9 palette-bg-uo-yellow”>mt9</div></div>
<h2>Margins on right side</h2> <div><div class=“mr0 palette-bg-uo-yellow”>mr0</div></div>
<div><div class=“mr1 palette-bg-uo-yellow”>mr1</div></div>
<div><div class=“mr2 palette-bg-uo-yellow”>mr2</div></div>
<div><div class=“mr3 palette-bg-uo-yellow”>mr3</div></div>
<div><div class=“mr4 palette-bg-uo-yellow”>mr4</div></div>
<div><div class=“mr5 palette-bg-uo-yellow”>mr5</div></div>
<div><div class=“mr6 palette-bg-uo-yellow”>mr6</div></div>
<div><div class=“mr7 palette-bg-uo-yellow”>mr7</div></div>
<div><div class=“mr8 palette-bg-uo-yellow”>mr8</div></div>
<div><div class=“mr9 palette-bg-uo-yellow”>mr9</div></div>
<h2>Margins on bottom side</h2> <div><div class=“mb0 palette-bg-uo-yellow”>mb0</div></div>
<div><div class=“mb1 palette-bg-uo-yellow”>mb1</div></div>
<div><div class=“mb2 palette-bg-uo-yellow”>mb2</div></div>
<div><div class=“mb3 palette-bg-uo-yellow”>mb3</div></div>
<div><div class=“mb4 palette-bg-uo-yellow”>mb4</div></div>
<div><div class=“mb5 palette-bg-uo-yellow”>mb5</div></div>
<div><div class=“mb6 palette-bg-uo-yellow”>mb6</div></div>
<div><div class=“mb7 palette-bg-uo-yellow”>mb7</div></div>
<div><div class=“mb8 palette-bg-uo-yellow”>mb8</div></div>
<div><div class=“mb9 palette-bg-uo-yellow”>mb9</div></div>
<h2>Margins on left side</h2> <div><div class=“ml0 palette-bg-uo-yellow”>ml0</div></div>
<div><div class=“ml1 palette-bg-uo-yellow”>ml1</div></div>
<div><div class=“ml2 palette-bg-uo-yellow”>ml2</div></div>
<div><div class=“ml3 palette-bg-uo-yellow”>ml3</div></div>
<div><div class=“ml4 palette-bg-uo-yellow”>ml4</div></div>
<div><div class=“ml5 palette-bg-uo-yellow”>ml5</div></div>
<div><div class=“ml6 palette-bg-uo-yellow”>ml6</div></div>
<div><div class=“ml7 palette-bg-uo-yellow”>ml7</div></div>
<div><div class=“ml8 palette-bg-uo-yellow”>ml8</div></div>
<div><div class=“ml9 palette-bg-uo-yellow”>ml9</div></div>
<h2>Margins on vertical sides</h2> <div><div class=“my0 palette-bg-uo-yellow”>my0</div></div>
<div><div class=“my1 palette-bg-uo-yellow”>my1</div></div>
<div><div class=“my2 palette-bg-uo-yellow”>my2</div></div>
<div><div class=“my3 palette-bg-uo-yellow”>my3</div></div>
<div><div class=“my4 palette-bg-uo-yellow”>my4</div></div>
<div><div class=“my5 palette-bg-uo-yellow”>my5</div></div>
<div><div class=“my6 palette-bg-uo-yellow”>my6</div></div>
<div><div class=“my7 palette-bg-uo-yellow”>my7</div></div>
<div><div class=“my8 palette-bg-uo-yellow”>my8</div></div>
<div><div class=“my9 palette-bg-uo-yellow”>my9</div></div>
<h2>Margins on horizontal sides</h2> <div><div class=“mx0 palette-bg-uo-yellow”>mx0</div></div>
<div><div class=“mx1 palette-bg-uo-yellow”>mx1</div></div>
<div><div class=“mx2 palette-bg-uo-yellow”>mx2</div></div>
<div><div class=“mx3 palette-bg-uo-yellow”>mx3</div></div>
<div><div class=“mx4 palette-bg-uo-yellow”>mx4</div></div>
<div><div class=“mx5 palette-bg-uo-yellow”>mx5</div></div>
<div><div class=“mx6 palette-bg-uo-yellow”>mx6</div></div>
<div><div class=“mx7 palette-bg-uo-yellow”>mx7</div></div>
<div><div class=“mx8 palette-bg-uo-yellow”>mx8</div></div>
<div><div class=“mx9 palette-bg-uo-yellow”>mx9</div></div>
<h2>Padding on all sides</h2> <div><div class=“p0 palette-bg-uo-yellow”>p0</div></div><div><div class=“p1 palette-bg-uo-yellow”>p1</div></div>
<div><div class=“p2 palette-bg-uo-yellow”>p2</div></div>
<div><div class=“p3 palette-bg-uo-yellow”>p3</div></div>
<div><div class=“p4 palette-bg-uo-yellow”>p4</div></div>
<div><div class=“p5 palette-bg-uo-yellow”>p5</div></div>
<div><div class=“p6 palette-bg-uo-yellow”>p6</div></div>
<div><div class=“p7 palette-bg-uo-yellow”>p7</div></div>
<div><div class=“p8 palette-bg-uo-yellow”>p8</div></div>
<div><div class=“p9 palette-bg-uo-yellow”>p9</div></div>
<h2>Padding on top side</h2> <div><div class=“pt0 palette-bg-uo-yellow”>pt0</div></div>
<div><div class=“pt1 palette-bg-uo-yellow”>pt1</div></div>
<div><div class=“pt2 palette-bg-uo-yellow”>pt2</div></div>
<div><div class=“pt3 palette-bg-uo-yellow”>pt3</div></div>
<div><div class=“pt4 palette-bg-uo-yellow”>pt4</div></div>
<div><div class=“pt5 palette-bg-uo-yellow”>pt5</div></div>
<div><div class=“pt6 palette-bg-uo-yellow”>pt6</div></div>
<div><div class=“pt7 palette-bg-uo-yellow”>pt7</div></div>
<div><div class=“pt8 palette-bg-uo-yellow”>pt8</div></div>
<div><div class=“pt9 palette-bg-uo-yellow”>pt9</div></div>
<h2>Padding on right side</h2> <div><div class=“pr0 palette-bg-uo-yellow”>pr0</div></div>
<div><div class=“pr1 palette-bg-uo-yellow”>pr1</div></div>
<div><div class=“pr2 palette-bg-uo-yellow”>pr2</div></div>
<div><div class=“pr3 palette-bg-uo-yellow”>pr3</div></div>
<div><div class=“pr4 palette-bg-uo-yellow”>pr4</div></div>
<div><div class=“pr5 palette-bg-uo-yellow”>pr5</div></div>
<div><div class=“pr6 palette-bg-uo-yellow”>pr6</div></div>
<div><div class=“pr7 palette-bg-uo-yellow”>pr7</div></div>
<div><div class=“pr8 palette-bg-uo-yellow”>pr8</div></div>
<div><div class=“pr9 palette-bg-uo-yellow”>pr9</div></div>
<h2>Padding on bottom side</h2> <div><div class=“pb0 palette-bg-uo-yellow”>pb0</div></div>
<div><div class=“pb1 palette-bg-uo-yellow”>pb1</div></div>
<div><div class=“pb2 palette-bg-uo-yellow”>pb2</div></div>
<div><div class=“pb3 palette-bg-uo-yellow”>pb3</div></div>
<div><div class=“pb4 palette-bg-uo-yellow”>pb4</div></div>
<div><div class=“pb5 palette-bg-uo-yellow”>pb5</div></div>
<div><div class=“pb6 palette-bg-uo-yellow”>pb6</div></div>
<div><div class=“pb7 palette-bg-uo-yellow”>pb7</div></div>
<div><div class=“pb8 palette-bg-uo-yellow”>pb8</div></div>
<div><div class=“pb9 palette-bg-uo-yellow”>pb9</div></div>
<h2>Padding on left side</h2> <div><div class=“pl0 palette-bg-uo-yellow”>pl0</div></div>
<div><div class=“pl1 palette-bg-uo-yellow”>pl1</div></div>
<div><div class=“pl2 palette-bg-uo-yellow”>pl2</div></div>
<div><div class=“pl3 palette-bg-uo-yellow”>pl3</div></div>
<div><div class=“pl4 palette-bg-uo-yellow”>pl4</div></div>
<div><div class=“pl5 palette-bg-uo-yellow”>pl5</div></div>
<div><div class=“pl6 palette-bg-uo-yellow”>pl6</div></div>
<div><div class=“pl7 palette-bg-uo-yellow”>pl7</div></div>
<div><div class=“pl8 palette-bg-uo-yellow”>pl8</div></div>
<div><div class=“pl9 palette-bg-uo-yellow”>pl9</div></div>
<h2>Padding on vertical sides</h2> <div><div class=“py0 palette-bg-uo-yellow”>py0</div></div>
<div><div class=“py1 palette-bg-uo-yellow”>py1</div></div>
<div><div class=“py2 palette-bg-uo-yellow”>py2</div></div>
<div><div class=“py3 palette-bg-uo-yellow”>py3</div></div>
<div><div class=“py4 palette-bg-uo-yellow”>py4</div></div>
<div><div class=“py5 palette-bg-uo-yellow”>py5</div></div>
<div><div class=“py6 palette-bg-uo-yellow”>py6</div></div>
<div><div class=“py7 palette-bg-uo-yellow”>py7</div></div>
<div><div class=“py8 palette-bg-uo-yellow”>py8</div></div>
<div><div class=“py9 palette-bg-uo-yellow”>py9</div></div>
<h2>Padding on horizontal sides</h2> <div><div class=“px0 palette-bg-uo-yellow”>px0</div></div>
<div><div class=“px1 palette-bg-uo-yellow”>px1</div></div>
<div><div class=“px2 palette-bg-uo-yellow”>px2</div></div>
<div><div class=“px3 palette-bg-uo-yellow”>px3</div></div>
<div><div class=“px4 palette-bg-uo-yellow”>px4</div></div>
<div><div class=“px5 palette-bg-uo-yellow”>px5</div></div>
<div><div class=“px6 palette-bg-uo-yellow”>px6</div></div>
<div><div class=“px7 palette-bg-uo-yellow”>px7</div></div>
<div><div class=“px8 palette-bg-uo-yellow”>px8</div></div>
<div><div class=“px9 palette-bg-uo-yellow”>px9</div></div>
Guidance
Section titled “Guidance”Usage Guidance
Section titled “Usage Guidance”- Use to add spacing where an element doesn’t sufficiently have it
- Use to adjust spacing to match a design function