Utility Classes

Predefined CSS classes that efficiently apply specific styles to elements.

Last updated:

What are Utility Classes?

Utility Classes are predefined CSS classes that apply specific styles, such as margin, padding, or color, to elements quickly and efficiently. They allow for consistent styling across your website by using simple, reusable classes.

How it Works

Utility Classes are a fundamental part of the Refoundry framework, enabling rapid and consistent styling throughout your website. These classes are automatically generated based on the settings you configure in blocks, including type, heading, button styles, and color names. Each of these settings creates corresponding Utility Classes that can be applied across your site to maintain a cohesive design.

For example, when you adjust the padding or margin settings in a specific block, Refoundry generates a Utility Class that applies those specific styles. These classes are then available for use elsewhere on your site, making it easy to add consistent spacing or styling without having to write custom CSS. Typography and button styles configured in Refoundry also generate Utility Classes, which can be reused across different elements.

Refoundry’s Utility Classes offer flexibility and efficiency, and are best suited for advanced users who are comfortable with CSS and understand the potential implications of overriding default styles. For example, you can use padding or margin Utility Classes to add spacing to elements that don’t have built-in spacing controls. Similarly, button style Utility Classes can be applied to navigation links or list items to give them a button-like appearance. But using these classes in custom CSS or applying them to elements outside their original context can be risky and may lead to unintended design issues.

By using Utility Classes judiciously, you can enhance your site’s design while maintaining consistency and control.

Related
Resources

Find more support docs in this specific category, or just level up your Refoundry knowledge with deeper reading.

All Support Resources

Try Now for Free

Not yet a Refoundry client? Download the plugin and get started building better sites today!

Get Refoundry

Contact Support

Can’t find what you’re looking for? Reach out any time, and one of our real humans will respond.

Contact Support