{# This file should eventually be deleted with each type of utility classes having its own variant documentation. #}
{% markdown %}
### Et al.
- `.vf-u-text--et-al` for use in publications lists and similar
Jon Smith, Jane Johnson,
### Screenreader text
- `.vf-u-sr-only` some things should only be shown to screen readers
Like this text
### No wrap
- `.vf-u-text--nowrap` keep text together, as much as possible
I'm some words that can break awkwardly but keep the Company Name together.
### Break text
- `.vf-u-text--break` break long strings of text
Here's some long text that would otherwise run off the side of the page evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6.
### Text-colours
Same colour options as background colours, with a prefix of
{% endmarkdown %}
{% codeblock 'css' -%}
.vf-u-text-color--
{% endcodeblock %}
{% markdown %}
### Text and heading sizes
- Text: From 1 to 6, with 1 being the largest.
- Button: From 1 to 2, with 1 being the largest.
- Heading: From 1 to 5, with 1 being the largest.
{% endmarkdown %}
{% codeblock 'css' -%}
.vf-u-type__text-body--1
.vf-u-type__text-body--6
.vf-u-type__text-button--1
.vf-u-type__text-button--2
.vf-u-type__text-heading--1
.vf-u-type__text-heading--5
{% endcodeblock %}
{% markdown %}
### Grid layout
{% endmarkdown %}
{% codeblock 'css' -%}
.vf-u-grid--reset {
grid-column: 1 / -1;
}
{% endcodeblock %}
{% markdown %}
### Visibility
{% endmarkdown %}
{% codeblock 'css' -%}
.vf-u-display-none {
display: none;
}
{% endcodeblock %}
{% markdown %}
### Margins
In a increasing numerical order, basing the actual value of `.125rem` as `100` increments.
| classname | size (in `rem`) |
|-----------|-----------------|
| .vf-u-margin--0 | 0rem |
| .vf-u-margin--100 | .25rem |
| .vf-u-margin--200 | .5rem |
| .vf-u-margin--400 | 1rem |
| .vf-u-margin--500 | 1.25rem |
| .vf-u-margin--600 | 1.5rem |
| .vf-u-margin--800 | 2rem |
| .vf-u-margin--1200 | 3rem |
{% endmarkdown %}
{% codeblock 'css' -%}
.vf-u-margin--0
.vf-u-margin--100
.vf-u-margin--200
.vf-u-margin--400
.vf-u-margin--500
.vf-u-margin--600
.vf-u-margin--800
.vf-u-margin--1200
.vf-u-margin__bottom--0
.vf-u-margin__bottom--..
.vf-u-margin__bottom--1200
.vf-u-margin__top--0
.vf-u-margin__top--..
.vf-u-margin__top--1200
.vf-u-margin__left--0
.vf-u-margin__left--..
.vf-u-margin__left--1200
.vf-u-margin__right--0
.vf-u-margin__right--..
.vf-u-margin__right--1200
{% endcodeblock %}
{% markdown %}
### Padding
In a increasing numerical order, basing the actual value of `.125rem` as `100` increments.
| classname | size (in `rem`) |
|-----------|-----------------|
| .vf-u-padding--0 | 0rem |
| .vf-u-padding--100 | .25rem |
| .vf-u-padding--200 | .5rem |
| .vf-u-padding--400 | 1rem |
| .vf-u-padding--500 | 1.25rem |
| .vf-u-padding--600 | 1.5rem |
| .vf-u-padding--800 | 2rem |
| .vf-u-padding--1200 | 3rem |
{% endmarkdown %}
{% codeblock 'css' -%}
.vf-u-padding--0
.vf-u-padding--100
.vf-u-padding--200
.vf-u-padding--400
.vf-u-padding--500
.vf-u-padding--600
.vf-u-padding--800
.vf-u-padding--1200
.vf-u-padding__bottom--0
.vf-u-padding__bottom--..
.vf-u-padding__bottom--1200
.vf-u-padding__top--0
.vf-u-padding__top--..
.vf-u-padding__top--1200
.vf-u-padding__left--0
.vf-u-padding__left--..
.vf-u-padding__left--1200
.vf-u-padding__right--0
.vf-u-padding__right--..
.vf-u-padding__right--1200
{% endcodeblock %}
Todo: This should be autogenerated from the Sass, but to best do that we might look at some sort of
css documentation tool.