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 |
|---|---|
| b0 b1 b2 b3 b4 b5 b6 b7 b8 |
Style | Border: Bottom |
| bb0 bb1 bb2 bb3 bb4 bb5 bb6 bb7 bb8 |
Style | Border: Vertical (Y Axis) |
| by0 by1 by2 by3 by4 by5 by6 by7 by8 |
Style | Border: Horizontal (X Axis) |
| 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.