🧰 Utilities

Utilities are classes designed to apply CSS properties quickly and consistently.
They are ideal for layout adjustments, visibility rules, alignment, or typographic tweaks.

They offer control over specific declarations like display, position, or text-align.

All utilities follow the naming convention:

.u--{property}-{value}
.u--{property}-{breakpoint}-{value}

🧱 How do we create them?

Utility classes are generated through SCSS loops and mixins, using predefined maps of values and responsive breakpoints.

Types of Utilities

Align items
Display
Flex direction
Font style
Font weigth
Height
Justify content
Overflow
Position
Text align
Width

✅ How to use utilities

You can apply them directly in HTML:

<div class="u--display-flex u--text-align-center u--text-align-tablets-flex-start">
  <p>Hello world</p>
</div>

Or extend them in SCSS if you have a custom class:

.c--card-a {
    @extend .u--display-flex;
    @extend .u--text-align-center;
    @extend .u--text-align-tablets-flex-start;
}