Sizes & Spacing
Last updated
Last updated
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
The site variable folder contains the core sizes for our website's structure.
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.
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.
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.
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.
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.
This folder is used as the top and bottom padding within each section. --section-space--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.
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.
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.
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 in certain instances, apply a "u-margin-trim-off" class to any parent.
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.
