ⓘ Class naming

Class prefixes
Using prefixes makes it easier to find and organize classes

Prefix classes
All manually created classes use the prefix ‘flexer-‘ to separate them from Blocs-generated classes

Nav class naming:
All custom classes that are used in pages have the prefix ‘flexer-nav-'

ⓘ General Classes

position-relative
Position value applied to a parent element so that child elements with position: absolute are positioned relative to that parent instead of the entire page.

position-absolute
Position value that positions an element relative to the nearest positioned parent

overflow-hidden
Utility class that hides content outside the container boundaries

text-decoration-none
Disable underline in links

z-index-0
Sets stacking order to 0. Elements with higher values (z-index: 1, 2, 3, etc.) appear in front of elements with lower values.

Note: Additional custom classes may also be present, typically with clear and logical names that make their purpose easy to understand

ⓘ Keep in mind

🔐 Locked Classes
Some classes are locked because modifying them is not recommended. If you choose to edit them, be aware and do so at your own risk.

⚠︎ Required Classes
All classes made of multiple parts, like .class a or .class.active, are visible in the class list but aren’t directly attached to any single element. These classes are required, even if they appear as "0" in the list.

ⓘ Editing Classes across layouts
When editing a class, it’s important to check its settings in all 4 layouts (desktop, laptop, tablet, and phone), because a class can have different properties in different layouts. It often happens with padding, margin, and sizes; it can also be used for visibility classes, to show or hide elements (Visibility toggle options)

✎ Testing Class edits safely
If you’re unsure about modifying classes, make progressive copies of the project so you can always revert to a correct version.