CSS Utilities
Instead of hand-writing the same CSS over and over, reach for a utility class and your theme takes care of the rest. CSS utilities pull directly from your Cornerstone theme and design tokens, so colors, typography, rounding, and spacing stay consistent with every component on the page. They’re framework-agnostic, work on any native HTML element, and can be combined freely.
Using CSS utilities
CSS utilities ship as part of cornerstone.css, so if you’re already including that stylesheet you don’t
need to import anything else. To include the utilities stylesheet on its own:
import '@cruglobal/cornerstone-components/styles/utilities.css';
Or, if you’re self-hosting Cornerstone, link it from your server:
<link rel="stylesheet" href="/dist/styles/utilities.css" />
Layout Utilities
Control cross-axis alignment in flex and grid containers with align-items and align-self utility classes.
Use the `cs-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.
Use the `cs-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.
Flex wrap utilities specify how items within flex containers wrap.
Use the `cs-frame` class to create a responsive container with consistent proportions to enclose content.
Gap utilities set the gap property of flex and grid containers, like other Cornerstone layout utilities.
Use the `cs-grid` class to arrange elements into rows and columns that automatically adapt to the available space.
Justify content utilities determine how space is distributed between items in flex and grid containers.
Use the `cs-split` class to distribute two or more items evenly across available space, either in a row or a column.
Use `cs-stack` to arrange elements in the block direction with even spacing.
Style Utilities
Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
Native styles apply your theme to native HTML elements so they match the look and feel of Cornerstone components.
The cs-prose utility applies hierarchical, asymmetric typographic rhythm to long-form content like documentation, articles, and marketing copy.
Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
Border radius utilities set an element's border radius property.
Text utility classes use design tokens from your Cornerstone theme and standard CSS properties to style text elements on the fly.
The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.