Borders in Cosmic

The Cosmic theme now offers a set of class names that can be applied to provide consistent borders around elements.
Note: These features require your site to be using UO Core/Cosmic version 21.10 or newer.

Border Spacing

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;
Style Border: All Sides
b* p2
b0
b1
b2
b3
b4
b5
b6
b7
b8
Style Border: Bottom
bb* p2
bb0
bb1
bb2
bb3
bb4
bb5
bb6
bb7
bb8
Style Border: Vertical (Y Axis)
by* p2
by0
by1
by2
by3
by4
by5
by6
by7
by8
Style Border: Horizontal (X Axis)
bx* p2
bx0
bx1
bx2
bx3
bx4
bx5
bx6
bx7
bx8

Customizing Border Colors

The border colors default to the UO Green color, but they can be customized to any of our palette colors using the "palette-accent-{color}" classes on the element with the border.

Border Color Examples

palette-accent-black
palette-accent-white
palette-accent-uo-yellow