Adaptive Sizes & Spacing

Benefits

• Compatible with margin, padding, & gap

• Provides visual consistency

• Adapts sizes responsively

Adaptive Space Folder

This folder provides some general spacing that can be used to separate elements within a section. We can always choose directly from the size folder if a more specific space is required. The smallest section top and bottom spacing is still larger than our --space--large. This ensures that using this space folder will never make elements seem like they’re in two separate sections.

Use any of the following utilities to quickly apply gap spacing.

• u-gap-none

• u-gap-main

• u-gap-xsmall

• u-gap-small

• u-gap-medium

• u-gap-large

Padding Vertical Folder

This folder is used as the top and bottom spacing within each section. --padding-vertical--main is applied to the top and bottom of our “u-container” class by default. These values can also be applied as data attributes on the container using attribute names of “data-padding-top” & “data-padding-bottom” and attribute values of “none”, “small”, “main”, or “large”

Adaptive Size Folder

This folder powers the responsiveness of our entire website. Font sizes, section top & bottom padding, spacing between elements, and more are all linked to this adaptive size folder. This ensures visual consistency throughout. Example: a 5rem icon width and a 5rem section space will always match when the value changes across breakpoints.

• Values reduce on tablet and landscape

• Larger values reduce at a greater rate than smaller values

The CSS making these size variables responsive is in the .page_code_responsive embed. This can be replaced with code from the Fluid Builder to make the entire website fluid.

/* tablet */
@media screen and (max-width: 991px) {
	:root {
		/* adaptive sizes */
		--size--2rem: 1.75rem;
		--size--2-5rem: 2.18rem;
		--size--3rem: 2.52rem;
		--size--3-5rem: 2.73rem;
		--size--4rem: 3rem;
		--size--4-5rem: 3.375rem;
		--size--5rem: 3.75rem;
		--size--5-5rem: 4.125rem;
		--size--6rem: 4.5rem;
		--size--6-5rem: 4.875rem;
		--size--7rem: 5.25rem;
		--size--7-5rem: 5.625rem;
		--size--8rem: 6rem;
		--size--8-5rem: 6.375rem;
		--size--9rem: 6.75rem;
		--size--9-5rem: 7.125rem;
		--size--10rem: 7.5rem;
		--size--11rem: 8.25rem;
		--size--12rem: 9rem;
		--size--13rem: 9.75rem;
		--size--14rem: 10.5rem;
		--size--15rem: 11.25rem;
		--size--16rem: 12rem;
	}
}
/* landscape */
@media screen and (max-width: 767px) {
	:root {
		/* adaptive sizes */
		--size--2-5rem: 2rem;
		--size--3rem: 2.25rem;
		--size--3-5rem: 2.375rem;
		--size--4rem: 2.5rem;
		--size--4-5rem: 2.75rem;
		--size--5rem: 3rem;
		--size--5-5rem: 3.25rem;
		--size--6rem: 3.5rem;
		--size--6-5rem: 3.75rem;
		--size--7rem: 4rem;
		--size--7-5rem: 4.25rem;
		--size--8rem: 4.5rem;
		--size--8-5rem: 4.75rem;
		--size--9rem: 5rem;
		--size--9-5rem: 5.25rem;
		--size--10rem: 5.5rem;
		--size--11rem: 5.75rem;
		--size--12rem: 6rem;
		--size--13rem: 6.5rem;
		--size--14rem: 7rem;
		--size--15rem: 7.5rem;
		--size--16rem: 8rem;
	}
}