Utility Classes

Definition

Utilities are CSS classes that override pre-defined component styles.

Usage

{% include "@bolt/component-name.twig" with {
  prop1: "string",
  prop2: true,
  attributes: {
    class: [
      "u-bolt-utility-name-1",
      "u-bolt-utility-name-2"
    ]
  }
} only %}

Dos

1. Fully understand a specific component's props before turning to utilities as the last resort
2. Use utilities to override a style that a component does not offer
3. Use utilities to achieve something that's one off

Good Example

{% include "@bolt/text.twig" with {
  attributes: {
    class: [
      "u-bolt-color-indigo"
    ]
  }
} only %}

Don'ts

1. Use utilities to build something

Bad Example

<div class="u-bolt-padding-medium u-bolt-color-white u-bolt-background-color-indigo-dark u-bolt-font-size-xxxlarge u-bolt-text-align-center>
 ...
</div>

Common Utils

.u-bolt-spacing-option and .u-bolt-spacing-direction-option

spacing: margin, padding
direction: top, right, bottom, left
options: xsmall, small, medium, large, xlarge

.u-bolt-color-option

options: indigo, yellow, orange, teal, black, white, gray

.u-bolt-text-align-option

options: right, left, center, justified

.u-bolt-display-option

options: inline, inline-block, block, flex, inline-flex

.u-bolt-flex-option

options: grow, shrink, basis-auto

.u-bolt-opacity-option

options: 0, 20, 40, 60, 80, 100

.u-bolt-text-decoration-option

options: none, underline, line-through

.u-bolt-visuallyhidden