Sizes & Spacing

Size Variables

Benefits

• Provides visual consistency

• Scales fluidly

• Smoother experience with browser zoom

• Reduces likelihood of overflowing text and cut off content

site/viewport-max

The max screen size at which all fluid sizes will stop scaling up (90rem by default)

site/viewport-min

The min screen size at which all fluid sizes will stop scaling down (20rem by default)

site/margin

The left and right space on the outside of our container that prevents it from touching the edge of the screen.

By default, this is a fluid value set to 3rem on desktop and 1rem on mobile. Press the command key and click behind each number that doesn't have "rem" to edit it.

site/gutter

The default gap applied between our grid columns. By default, this value is static, but we can make it fluid by pasting in a fluid value if needed.

site/column-count

The main column count used to create our design (usually 12 columns)

site/column-width

The variable used for our breakout grid class. Do not adjust this variable.

Space Variable Folder

This folder provides some general spacing that can be used to separate elements within a section. In the style panel, we can apply any of these space variables to space apart elements within a section. 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.

In this example, space/8 is set to 4rem on desktop and 2.5rem on mobile. Click behind a number and press the Command D keys to select all instances of that number for bulk editing.

Section Space Variable Folder

This folder is used as the top and bottom space within each section. The page-top variable is used whenever a section is at the top of the page to make space for the nav.

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.