All Utility Classes & Attributes

Intro to Lumos Class Naming Convention

Class naming is an essential part of any Webflow development framework. In order to name classes effectively you first need to understand the role of different types of classes.

In Lumos, classes are divided into three different types:

1. Custom Classes
2. Utility Classes
3. Combo Classes

1. Custom Classes

Custom classes are classes you use to define the role of an element within a component (eg, a container, or piece of text). These classes are always going to exist within the broader context of a “component” which may not always be turned into a webflow component.

Some examples of components are:

• Navbar
• Hero layout
• Table of Contents
• Social Links element etc.

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" />

In Lumos, every element should be given a class, this helps to clearly define the elements role within the page structure. As a general rule all elements will be given a custom class (and optionally, utility or combo classes). This allows for easily targeting elements with custom css, clear labels in the navigator, and global design updates to each element with that custom class.

</aside>

With practice & the Lumos Chrome Extension, the process of creating custom classes becomes effortless. As long as the prefix is unique for each component type, the element names like "layout", "content", "visual", "title", or "text" are highly reusable.

Custom class rules:

• Use underscores between each word (instead of dashes)
• Must never have more than 3 underscores
• Must always be the first class applied to an element