Utilities are single-purpose class names that can be used to make quick, targeted changes or create entirely new layouts. Many utilities work within the constraints that you define in your settings, ensuring that changes to colors, spacing, typography and everything else are consistent throughout the theme while also being highly configurable.

For example, text alignment utilities like .text-left provide direct control over the alignment of text within an element and can be combined with other utilities to quickly and easily change the appearance of an element or even the entire page.

Although nothing is stopping you from adding additional class names to elements and then styling those classes, once you experience the benefits of this atomic or utility-first approach you’ll have trouble working any other way. Adopting utilities as part of your workflow will allow you to:

  • Achieve consistency

    Define foundational styles using settings and ensure that all changes are made in accordance with it.

  • Work efficiently

    Avoid inventing arbitrary class names for elements which differ only slightly in appearance.

  • Make changes confidently

    Make changes confidently without having to worry about affecting other parts of the Help Center.

  • Rapidly prototype ideas

    Copy compositions and layouts between themes or from the Pattern Library, given they are modular.

  • Avoid writing CSS

    Because you don’t have to write custom CSS your attention can remain focused on page templates.

  • Maintain and scale easily

    Ensure that your theme code is easier to maintain and scale in the future.

Because utilities are low-level you’re never encouraged to build the same layout twice. Even without changing a single setting it’s easy to make elements and entire layout look completely different. Once you’ve spent some time using them you’ll wonder how you got by without them!

Next steps

  1. Read about how responsive and hover-state variants allow you to make changes to specific screen sizes or hover states, allowing you to build fully responsive layouts without having to write custom media queries in your CSS.

  2. Review the documented set of utilities to learn how to change specific aspects of your theme’s appearance quickly and easily.