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/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.
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.
Section Space Variable Folder
This folder is used as the top and bottom space within each section.
Adaptive Sizes (not recommended)
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.
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.
Last updated
Was this helpful?