A huge benefit of the Lumos system is the variable system. These allow you to apply styles to an element in a way that is globally manageable and helps to keep the entire site more consistent and scalable. Variables are divided into sections based on what their role is within the site. The Lumos variable system is basically a bunch of re-usable values used throughout the website design. These can be anything from font weights, to border radiuses to background colors. Most of the variable values are created and managed in the Webflow variables panel, but some are also modified in the custom code component. For more information on what kind of styles use variables keep reading below.
<aside> <img src="/icons/cursor-click_gray.svg" alt="/icons/cursor-click_gray.svg" width="40px" />
Variables are already setup for you in the Lumos framework but it’s important to know what they do and where they are referenced in order to know where to use them.
</aside>
When you first clone the starter file one of the first things you’ll do is update the variables in the project to match your brand. You’re most likely going to edit the following variables:
Default Collection:
Other Collections:
<aside> <img src="/icons/error_gray.svg" alt="/icons/error_gray.svg" width="40px" />
The other variable collections on the site like Column Count or Alignment are used in utility styles and shouldn’t generally be modified.
</aside>
If you want to rebrand/restyle your site variables are probably the best place to start in order to globally change a lot of the visual styles used on your site.
Often when you want to apply variables to an element (like bottom margin, or typography styles) you can add a utility class on top of your custom class eg card_heading u-text-style-h2. This will add all of the variables from the utility class to your component class allowing you to quickly style that element, while still giving you control to override specific properties as needed.
Webflow variables can also be referenced by clicking into an input in the style panel (like top margin, and then clicking on the purple + icon and selecting the variable you want to use eg size/1. This will use the variables value for that property. In some cases variables aren't supported yet in the default styles panel input (for example text transform). In this case you need to scroll down to the Custom Properties section and type out the CSS property name and the full variable name (you can copy the name in the variable panel). eg: text-transform: var(--_typography---text-transform--uppercase).