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 is fluid inside the Fluid Builder App.

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 App 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

Use the Fluid Builder App to update any of these sizes.

---

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/8. This ensures that using this space folder will never make elements seem like they’re in two separate sections.

---

Section Space Variable Folder

This folder is used as the top and bottom space within each section.

---

Adaptive Sizes (not recommended)

Adaptive vs. Fluid Sizing

Fluid 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 Sizes component with the following code.

<style>
/* desktop */
:root {
	/* custom */
}
/* tablet */
@media screen and (max-width: 991px) {
	:root {
		/* custom */
		--site--margin: 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 */
		--site--margin: 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 usually more flexible and allow us to create unique space between each element type without needing extra divs.

Margin Trim

Apply a class of "u-margin-trim" to any parent to remove the margin top from its first child and remove the margin bottom from its last child.

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. Lastly, margins do not collapse when their parent is display flex or display grid. The parent must be display block.