Skip to content

Naming convention

This section of the documentation is a WIP

Default naming convention

This is the default naming convention for classes generated by Carapace.

Base classes

<!-- root-variant:modifier -->
<div class="m-b:xl">

Responsive classes

<!-- breakpoint(root-variant:modifier) -->
<div class="tablet(m-b:2xl)">

Stateful classes

<!-- state(root-variant:modifier) -->
<div class="hover(c:black)">

Stateful, responsive classes

<!-- state(breakpoint(root-variant:modifier)) -->
<div class="hover(tablet(c:white))">