What the heck happened to the rest of the UIF documentation?
All the CSS-only components have been moved across to the Storybook version of our UIF docs.
The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.
Please consider using CSS-only components for maximum ongoing happiness. 💖
Layout Helpers
Generic classes to help with various layout requirements not specifically related to the grid system or other components.
Usage
| Class name | Effect | Remarks |
|---|---|---|
.page-wrapper and .main |
Used to distinguish between page content and the footer, so that the footer can be anchored to the bottom of the page. | Required. |
.hr |
Create a horizontal line separator. | Optional. |
.hr--light |
Lighter colour variation of the horizontal line separator. | Optional. |
.block-center |
Hard override to center block element. | Optional. |
.visually-hidden |
Hides HTML tags, but ensures it is still readable for accessiblity reasons. | Optional. |
.img-respond |
Prevent images from being wider than 100% of their context. | Optional. |
.img-respond--fill |
Make images 100% of their context all of the time. | Optional. |
.circle |
Apply circular radius and hide any overflow of content. | Optional. |
.block-visible-small |
Content is hidden on screens larger than mobile | Optional. |
.block-hidden-small |
Content is hidden on screens larger than mobile. | Optional. |
.bg--grey-xlight |
Sets the background colour to light grey | Optional. |