SCSS reference / Utilities

Utilities

Overrides with the final say in the cascade — imported last, after base, objects and components.

A utility overrides a component or object rule for a specific condition rather than defining a new look of its own. Fieldcraft ships exactly one utilities partial: utilities/_utilities.responsive.scss, which holds every mobile-first breakpoint override in the stylesheet. Unlike some Sass architectures, Fieldcraft doesn't introduce a separate single-purpose helper-class vocabulary (no .u-mt-small, no .u-hidden-down@tablet) — the responsive partial reuses each component's own existing class names inside @media blocks, so a breakpoint override for .hero still reads as .hero, not a generic utility name.

Format

@media (max-width: <breakpoint>) {
  .existing-component-class { … }
}

Next

See Responsive for the full breakpoint table and what changes at each one.