The Cosmic theme now offers a set of class names that can be applied to provide consistent margins and padding (and other spacing) between elements.
Note: These features require your site to be using UO Core/Cosmic version 21.05 or newer.
Margins and Padding
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
Style | Margin: All Sides |
|---|---|
| m0 m0 m1 m1 m2 m2 m3 m3 m4 m4 m5 m5 m6 m6 m7 m7 m8 m8 m9 m9 |
Style | Margin: Bottom |
| mb0 mb0 mb1 mb1 mb2 mb2 mb3 mb3 mb4 mb4 mb5 mb5 mb6 mb6 mb7 mb7 mb8 mb8 mb9 mb9 |
Vertical (Y AXIS) Margins
Style | Margin: Vertical (Y Axis) |
|---|---|
| my0 my0 my1 my1 my2 my2 my3 my3 my4 my4 my5 my5 my6 my6 my7 my7 my8 my8 my9 my9 |
Horizontal (X AXIS) Margins
Style | Margin: Horizontal (X Axis) |
|---|---|
| mx0 mx0 mx1 mx1 mx2 mx2 mx3 mx3 mx4 mx4 mx5 mx5 mx6 mx6 mx7 mx7 mx8 mx8 mx9 mx9 |