Borders
If you need to add or remove borders around an element, you can apply easy, consistent fixed borders 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 borders. These classes, applied in html, are preferred to controlling borders on elements via CSS. Project-wide CSS is typically littered with lots of rulesets that only declare borders 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:
b = border
t = top r = right b = bottom l = left
x = x-axis y = y-axis
0 = zero
1 = applies value 1px; 2 = applies value 2px; 3 = applies value 4px; 4 = applies value 5px; 5 = applies value 8px; 6 = applies value 10px; 7 = applies value 15px; 8 = applies value 30px;
Examples and Code
Section titled “Examples and Code”
Open Full Example
<h2>Borders on all sides</h2>
<div>
<div class="b0 p2 m2 palette-bg-uo-yellow">b0</div>
</div>
<div>
<div class="b1 p2 m2 palette-bg-uo-yellow">b1</div>
</div>
<div>
<div class="b2 p2 m2 palette-bg-uo-yellow">b2</div>
</div>
<div>
<div class="b3 p2 m2 palette-bg-uo-yellow">b3</div>
</div>
<div>
<div class="b4 p2 m2 palette-bg-uo-yellow">b4</div>
</div>
<div>
<div class="b5 p2 m2 palette-bg-uo-yellow">b5</div>
</div>
<div>
<div class="b6 p2 m2 palette-bg-uo-yellow">b6</div>
</div>
<div>
<div class="b7 p2 m2 palette-bg-uo-yellow">b7</div>
</div>
<div>
<div class="b8 p2 m2 palette-bg-uo-yellow">b8</div>
</div>
<h2>Borders on top</h2>
<div>
<div class="bt0 p2 m2 palette-bg-uo-yellow">bt0</div>
</div>
<div>
<div class="bt1 p2 m2 palette-bg-uo-yellow">bt1</div>
</div>
<div>
<div class="bt2 p2 m2 palette-bg-uo-yellow">bt2</div>
</div>
<div>
<div class="bt3 p2 m2 palette-bg-uo-yellow">bt3</div>
</div>
<div>
<div class="bt4 p2 m2 palette-bg-uo-yellow">bt4</div>
</div>
<div>
<div class="bt5 p2 m2 palette-bg-uo-yellow">bt5</div>
</div>
<div>
<div class="bt6 p2 m2 palette-bg-uo-yellow">bt6</div>
</div>
<div>
<div class="bt7 p2 m2 palette-bg-uo-yellow">bt7</div>
</div>
<div>
<div class="bt8 p2 m2 palette-bg-uo-yellow">bt8</div>
</div>
<h2>Borders on right</h2>
<div>
<div class="br0 p2 m2 palette-bg-uo-yellow">br0</div>
</div>
<div>
<div class="br1 p2 m2 palette-bg-uo-yellow">br1</div>
</div>
<div>
<div class="br2 p2 m2 palette-bg-uo-yellow">br2</div>
</div>
<div>
<div class="br3 p2 m2 palette-bg-uo-yellow">br3</div>
</div>
<div>
<div class="br4 p2 m2 palette-bg-uo-yellow">br4</div>
</div>
<div>
<div class="br5 p2 m2 palette-bg-uo-yellow">br5</div>
</div>
<div>
<div class="br6 p2 m2 palette-bg-uo-yellow">br6</div>
</div>
<div>
<div class="br7 p2 m2 palette-bg-uo-yellow">br7</div>
</div>
<div>
<div class="br8 p2 m2 palette-bg-uo-yellow">br8</div>
</div>
<h2>Borders on bottom</h2>
<div>
<div class="bb0 p2 m2 palette-bg-uo-yellow">bb0</div>
</div>
<div>
<div class="bb1 p2 m2 palette-bg-uo-yellow">bb1</div>
</div>
<div>
<div class="bb2 p2 m2 palette-bg-uo-yellow">bb2</div>
</div>
<div>
<div class="bb3 p2 m2 palette-bg-uo-yellow">bb3</div>
</div>
<div>
<div class="bb4 p2 m2 palette-bg-uo-yellow">bb4</div>
</div>
<div>
<div class="bb5 p2 m2 palette-bg-uo-yellow">bb5</div>
</div>
<div>
<div class="bb6 p2 m2 palette-bg-uo-yellow">bb6</div>
</div>
<div>
<div class="bb7 p2 m2 palette-bg-uo-yellow">bb7</div>
</div>
<div>
<div class="bb8 p2 m2 palette-bg-uo-yellow">bb8</div>
</div>
<h2>Borders on left</h2>
<div>
<div class="bl0 p2 m2 palette-bg-uo-yellow">bl0</div>
</div>
<div>
<div class="bl1 p2 m2 palette-bg-uo-yellow">bl1</div>
</div>
<div>
<div class="bl2 p2 m2 palette-bg-uo-yellow">bl2</div>
</div>
<div>
<div class="bl3 p2 m2 palette-bg-uo-yellow">bl3</div>
</div>
<div>
<div class="bl4 p2 m2 palette-bg-uo-yellow">bl4</div>
</div>
<div>
<div class="bl5 p2 m2 palette-bg-uo-yellow">bl5</div>
</div>
<div>
<div class="bl6 p2 m2 palette-bg-uo-yellow">bl6</div>
</div>
<div>
<div class="bl7 p2 m2 palette-bg-uo-yellow">bl7</div>
</div>
<div>
<div class="bl8 p2 m2 palette-bg-uo-yellow">bl8</div>
</div>
<h2>Vertical Borders (Y Axis))</h2>
<div>
<div class="by0 p2 m2 palette-bg-uo-yellow">by0</div>
</div>
<div>
<div class="by1 p2 m2 palette-bg-uo-yellow">by1</div>
</div>
<div>
<div class="by2 p2 m2 palette-bg-uo-yellow">by2</div>
</div>
<div>
<div class="by3 p2 m2 palette-bg-uo-yellow">by3</div>
</div>
<div>
<div class="by4 p2 m2 palette-bg-uo-yellow">by4</div>
</div>
<div>
<div class="by5 p2 m2 palette-bg-uo-yellow">by5</div>
</div>
<div>
<div class="by6 p2 m2 palette-bg-uo-yellow">by6</div>
</div>
<div>
<div class="by7 p2 m2 palette-bg-uo-yellow">by7</div>
</div>
<div>
<div class="by8 p2 m2 palette-bg-uo-yellow">by8</div>
</div>
<h2>Horizontal Borders (X Axis))</h2>
<div>
<div class="bx0 p2 m2 palette-bg-uo-yellow">bx0</div>
</div>
<div>
<div class="bx1 p2 m2 palette-bg-uo-yellow">bx1</div>
</div>
<div>
<div class="bx2 p2 m2 palette-bg-uo-yellow">bx2</div>
</div>
<div>
<div class="bx3 p2 m2 palette-bg-uo-yellow">bx3</div>
</div>
<div>
<div class="bx4 p2 m2 palette-bg-uo-yellow">bx4</div>
</div>
<div>
<div class="bx5 p2 m2 palette-bg-uo-yellow">bx5</div>
</div>
<div>
<div class="bx6 p2 m2 palette-bg-uo-yellow">bx6</div>
</div>
<div>
<div class="bx7 p2 m2 palette-bg-uo-yellow">bx7</div>
</div>
<div>
<div class="bx8 p2 m2 palette-bg-uo-yellow">bx8</div>
</div>
Open Full Example
<h2>Borders on all sides</h2>
<div>
<div class="b0 p2 m2 palette-bg-white palette-accent-black">b0</div>
</div>
<div>
<div class="b1 p2 m2 palette-bg-white palette-bg-uo-legacy-green">b1</div>
</div>
<div>
<div class="b2 p2 m2 palette-bg-white palette-accent-uo-yellow">b2</div>
</div>Guidance
Section titled “Guidance”Usage Guidance
Section titled “Usage Guidance”- Use the b0 class to remove borders from elements that have them by default
- Add borders between elements to increase readability