Intro to Lumos Class Naming Convention

1. Custom Classes

As a general rule: When building custom sections, every element should have a custom class**.** It allows for easily targeting elements with custom css, clear labels in the navigator, and global design updates to each element with that custom class. 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 classes...

Contain underscores instead of dashes
Must never have more than 3 underscores
Must always be the first class applied to an element
_wrap marks the start of a new component.

Three parts: type_variation(optional)_element

In this example, hero is the type of section. Secondary is the variation if there's multiple types of hero sections. Wrap, contain, title, & text are all elements belonging to the hero_secondary_ section.

</aside>

Exceptions to the rule that every element should have a custom class:

Slots utilizing u-display-contents
Base Components with only one or two divs/elements might use a utility class. (eg, the Image component). </aside>

Child Group (Custom Classes)

A grouping of related elements within a parent group.

In this example, .footer_link_wrap is a child group inside the .footer_wrap parent group. This prevents naming collisions when both groups have children with the same names such as _text.

2. Utility Classes

Utility classes can help us work faster when applying a grouping of styles that we'll reuse often. Try to not over stack utilities. Apply styles like margin or flexbox to the custom class when possible.

Start with u-
Contain dashes, not underscores
Should always be stacked on top of a custom class