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.