Lumos uses fluid spacing sizes that automatically adjust between the minimum and maximum viewport size set in your variables panel. These size values create a more consistent experience across breakpoints and give you more fine-tuned control over how your entire site approaches spacing, whether it’s the spacing between elements or specific heading font sizes.
These variables define the core values that define your max widths, global grid gutter, and site margin, along with additional container sizes.
The max screen size at which all fluid sizes will stop scaling up (90rem by default)
The min screen size at which all fluid sizes will stop scaling down (20rem by default)
The left and right space on the outside of our container that prevents it from touching the edge of the screen.
Edit this through the Fluid Builder App.
The default gap applied between our grid columns. By default, this value is static, but we can make it fluid by using the Fluid Builder App.
The main column count used to create our design (usually 12 columns)