Multi-property utilities combine several CSS properties and values to perform common actions. They are not meant to override default functionality, but to aid in things like accessibility or layout.
These utilities are related to accessibility. These should be used to make the experience more accessible.
| Class | Description |
|---|---|
| .sprk-u-ScreenReaderText | Makes content invisible while still being read by a screen reader. |
| .sprk-u-ShowOnFocus | When combined with .sprk-u-ScreenReaderText , the element will become visible on focus. This is helpful for users who only use a keyboard to navigate. An example is a "Skip to content" link that should become visible to a user on focus. |
These utilities are related to layout.
| Class | Description |
|---|---|
| .sprk-u-AbsoluteCenter | When placed on a container, its children will align in the absolute center (vertically and horizontally) of the box. |
|
Clearfix is a method of float containment. When applied to a container with floated children it forces the container to span the entire vertical extent of the children as if they weren't pulled out of the document flow by the floats. Elements that come after the Clearfixed element will no longer wrap around the floated children. The primary way to use Clearfix in Spark is by extending the placeholder (e.g. `@extend %ClearFix;`). It can also be used by applying the class directly to the parent element. This is typically only used for debugging. |
| .sprk-u-FullWidth | When placed on a container, it will cause it to fill the viewport, even if it's inside a limiting container (such as .sprk-o-CenteredColumn). |
These utilities are related to type.
| Class | Description |
|---|---|
| .sprk-b-Truncate | When placed on an element that contains text, it will limit the text to one line and adds an ellipsis when it overflows. |