Sizes & Spacing

Size Variables

Benefits

• Provides visual consistency

• Scales fluidly

• Allows for using size variables with calc

• Smoother experience with browser zoom

• Reduces likelihood of overflowing text and cut off content

---

Site Variable Folder

The site variable folder contains the core sizes for our website's structure.

site/width

The --site--width variable is the total max width of the site including the site margins. When using the fluid builder, set the sizes to stop scaling up at the site width.

site/margin

The --site--margin variable prevents the content from touching the edge of the screen. Its value is 0px in the variable panel, and its value is overridden inside the .page_code_responsive embed using code from the Fluid Builder so that the site/margin can reduce at a more extreme rate than the rest of our sizes.

site/gutter

The --site--gutter variable is the default gap applied between our grid columns. By default, its value is not fluid because it is so small, but its size can be set in the Fluid Builder if needed.

---

Size Variable 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 fluid size folder. This ensures visual consistency throughout. Example: a 5rem icon width and a 5rem section space will always match when the value scales across screen sizes.

• Values are fluid by default

• Larger values reduce at a greater rate than smaller values

The CSS making these size variables fluid is in the .page_code_responsive embed. Use the Fluid Builder to define any sizes that are unique to your project.

---

Space Variable Folder

This folder provides some general spacing that can be used to separate elements within a section. These variables are connected to the fluid Size folder. In the style panel, we can apply any of these space variables to space apart elements within a section or choose directly from the size folder if a more specific size 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.

---

Padding Vertical Variable Folder

This folder is used as the top and bottom padding 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”. Add additional padding attributes in the .page_code_base embed if needed.

---

Adaptive Sizes (not recommended)

Adapative vs. Fluid Sizing

https://www.youtube.com/watch?v=l30iYFTHYFI

Fluid font sizes are recommended in Lumos because they create a better experience with browser zoom and solve some issues with Webflow's px breakpoints. If your project requires adaptive sizes instead, replace the fluid code in the .page_code_responsive embed with the following code.

<style>
/* desktop */
:root {
	/* custom */
}
/* tablet */
@media screen and (max-width: 991px) {
	:root {
		/* custom */
		--padding-horizontal--main: 2rem;
		/* 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 {
		/* custom */
		--padding-horizontal--main: 1rem;
		/* 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;
	}
}
/* portrait */
@media screen and (max-width: 479px) {
	:root {
		/* custom */
	}
}
</style>

---

Margin vs Gap

Gap has many great use-cases like spacing apart a list of items or separating columns within grids. For spacing apart text elements, margins are more flexible and allow us to create unique space between each element type without needing extra divs.

Margin Trim

By default in Lumos, margin top is removed from the first child and margin bottom is removed from the last child of any element. To disable this behavior on children, apply a "u-margin-trim-off" class to any parent.

Collapsing Margins

If a heading has margin-bottom: 2rem and the paragraph has margin-top: 1rem, the two margins will collapse into each other, and there will only be 2rem space total between the two elements. Collapsing margins do not apply to elements set to display: inline, inline-block, inline-flex, or inline-grid. So our margins should applied to display block, flex, or grid elements. Collapsing margins only apply to vertical margins, not horizontal margins.