Cosmic Theming - Spacing

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.

Paragraph Spacing

If you need to increase or decrease the spacing between paragraphs for your design, you can apply these classes to your p tags to adjust that spacing.

Class Name Example
uo-text-spacing--sm Small Paragraph Spacing (.75vh). Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit. Lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
uo-text-spacing--rg Default Paragraph Spacing (1vh). Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit. Lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
uo-text-spacing--md Medium Paragraph Spacing (4vh). Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit. Lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
uo-text-spacing--lg Large Paragraph Spacing (6vh). Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit. Lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.

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 thre 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
m* p2
m0
m0
m1
m1
m2
m2
m3
m3
m4
m4
m5
m5
m6
m6
m7
m7
m8
m8
m9
m9
Style Margin: Bottom
mb* p2
mb0
mb0
mb1
mb1
mb2
mb2
mb3
mb3
mb4
mb4
mb5
mb5
mb6
mb6
mb7
mb7
mb8
mb8
mb9
mb9
Style Margin: Vertical (Y Axis)
my* p2
my0
my0
my1
my1
my2
my2
my3
my3
my4
my4
my5
my5
my6
my6
my7
my7
my8
my8
my9
my9
Style Margin: Horizontal (X Axis)
mx* p2
mx0
mx0
mx1
mx1
mx2
mx2
mx3
mx3
mx4
mx4
mx5
mx5
mx6
mx6
mx7
mx7
mx8
mx8
mx9
mx9