Utility Classes utility

Utility Classes provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles. When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.

github location npm version

Usage

  • Utility Classes are designed to do one job well and one job only, are immutable, and on occasion are an acceptable approach to overriding component styles.
  • Utility Classes should clearly describe the job they do.
  • Utility Classes are to be namespaced with vf-u-

Variants

Misc variant

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

.vf-u-text-color--

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.
.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

Grid layout

.vf-u-grid--reset {
  grid-column: 1 / -1;
}

Visibility

.vf-u-display-none {
  display: none;
}

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 

.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

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 

.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

Todo: This should be autogenerated from the Sass, but to best do that we might look at some sort of css documentation tool.

HTML 
<div class="vf-content">

  <h3 id="et-al">Et al.</h3>
  <ul>
    <li><code>.vf-u-text--et-al</code> for use in publications lists and similar</li>
  </ul>
  <p><span class="vf-u-text--et-al">Jon Smith, Jane Johnson, </span></p>
  <h3 id="screenreader-text">Screenreader text</h3>
  <ul>
    <li><code>.vf-u-sr-only</code> some things should only be shown to screen readers</li>
  </ul>
  <p><span class="vf-u-sr-only">Like this text</span></p>
  <h3 id="no-wrap">No wrap</h3>
  <ul>
    <li><code>.vf-u-text--nowrap</code> keep text together, as much as possible</li>
  </ul>
  <p>I&#39;m some words that can break awkwardly but keep the <span class="vf-u-text--nowrap">Company Name</span> together.</p>
  <h3 id="break-text">Break text</h3>
  <ul>
    <li><code>.vf-u-text--break</code> break long strings of text</li>
  </ul>
  <p>Here&#39;s some long text that would otherwise run off the side of the page <span class="vf-u-text--break">evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6evock2OTIhUP5N9ZgsNCzgYrfFuKd3ktVLTYnVTfX1NPpzjxmYC0RwLiOxwqi7n7VLWgRFUiTa7UK77exxWkpbJwLoERCAU5L0Z8ebvYpjKCtCboKgAxYx4CxmlsP3U66rabF3nxA6sNDhZnYWW6zr1QfR7J7nzKhQG9P2oSnOFNoK7xPr6hgxpePl3Jq9Ml2n5eAeV6</span>.</p>
  <h3 id="text-colours">Text-colours</h3>
  <p>Same colour options as background colours, with a prefix of</p>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-text-color--</span>
</code></pre>
  <h3 id="text-and-heading-sizes">Text and heading sizes</h3>
  <ul>
    <li>Text: From 1 to 6, with 1 being the largest.</li>
    <li>Button: From 1 to 2, with 1 being the largest.</li>
    <li>Heading: From 1 to 5, with 1 being the largest.</li>
  </ul>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-type__text-body--1</span>
<span class="hljs-selector-class">.vf-u-type__text-body--6</span>

<span class="hljs-selector-class">.vf-u-type__text-button--1</span>
<span class="hljs-selector-class">.vf-u-type__text-button--2</span>

<span class="hljs-selector-class">.vf-u-type__text-heading--1</span>
<span class="hljs-selector-class">.vf-u-type__text-heading--5</span>
</code></pre>
  <h3 id="grid-layout">Grid layout</h3>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-grid--reset</span> {
  <span class="hljs-attribute">grid-column</span>: <span class="hljs-number">1</span> / -<span class="hljs-number">1</span>;
}
</code></pre>
  <h3 id="visibility">Visibility</h3>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-display-none</span> {
  <span class="hljs-attribute">display</span>: none;
}
</code></pre>
  <h3 id="margins">Margins</h3>
  <p>In a increasing numerical order, basing the actual value of <code>.125rem</code> as <code>100</code> increments.</p>
  <table>
    <thead>
      <tr>
        <th>classname</th>
        <th>size (in <code>rem</code>)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>.vf-u-margin--0</td>
        <td>0rem</td>
      </tr>
      <tr>
        <td>.vf-u-margin--100</td>
        <td>.25rem</td>
      </tr>
      <tr>
        <td>.vf-u-margin--200</td>
        <td>.5rem</td>
      </tr>
      <tr>
        <td>.vf-u-margin--400</td>
        <td>1rem</td>
      </tr>
      <tr>
        <td>.vf-u-margin--500</td>
        <td>1.25rem</td>
      </tr>
      <tr>
        <td>.vf-u-margin--600</td>
        <td>1.5rem</td>
      </tr>
      <tr>
        <td>.vf-u-margin--800</td>
        <td>2rem</td>
      </tr>
      <tr>
        <td>.vf-u-margin--1200</td>
        <td>3rem</td>
      </tr>
      <tr>
        <td><br></td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-margin--0</span>
<span class="hljs-selector-class">.vf-u-margin--100</span>
<span class="hljs-selector-class">.vf-u-margin--200</span>
<span class="hljs-selector-class">.vf-u-margin--400</span>
<span class="hljs-selector-class">.vf-u-margin--500</span>
<span class="hljs-selector-class">.vf-u-margin--600</span>
<span class="hljs-selector-class">.vf-u-margin--800</span>
<span class="hljs-selector-class">.vf-u-margin--1200</span>

<span class="hljs-selector-class">.vf-u-margin__bottom--0</span>
<span class="hljs-selector-class">.vf-u-margin__bottom--</span>..
<span class="hljs-selector-class">.vf-u-margin__bottom--1200</span>

<span class="hljs-selector-class">.vf-u-margin__top--0</span>
<span class="hljs-selector-class">.vf-u-margin__top--</span>..
<span class="hljs-selector-class">.vf-u-margin__top--1200</span>

<span class="hljs-selector-class">.vf-u-margin__left--0</span>
<span class="hljs-selector-class">.vf-u-margin__left--</span>..
<span class="hljs-selector-class">.vf-u-margin__left--1200</span>

<span class="hljs-selector-class">.vf-u-margin__right--0</span>
<span class="hljs-selector-class">.vf-u-margin__right--</span>..
<span class="hljs-selector-class">.vf-u-margin__right--1200</span>

</code></pre>
  <h3 id="padding">Padding</h3>
  <p>In a increasing numerical order, basing the actual value of <code>.125rem</code> as <code>100</code> increments.</p>
  <table>
    <thead>
      <tr>
        <th>classname</th>
        <th>size (in <code>rem</code>)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>.vf-u-padding--0</td>
        <td>0rem</td>
      </tr>
      <tr>
        <td>.vf-u-padding--100</td>
        <td>.25rem</td>
      </tr>
      <tr>
        <td>.vf-u-padding--200</td>
        <td>.5rem</td>
      </tr>
      <tr>
        <td>.vf-u-padding--400</td>
        <td>1rem</td>
      </tr>
      <tr>
        <td>.vf-u-padding--500</td>
        <td>1.25rem</td>
      </tr>
      <tr>
        <td>.vf-u-padding--600</td>
        <td>1.5rem</td>
      </tr>
      <tr>
        <td>.vf-u-padding--800</td>
        <td>2rem</td>
      </tr>
      <tr>
        <td>.vf-u-padding--1200</td>
        <td>3rem</td>
      </tr>
      <tr>
        <td><br></td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <pre class="vf-code-example__pre"><code class="Code Code--lang-css vf-code-example"><span class="hljs-selector-class">.vf-u-padding--0</span>
<span class="hljs-selector-class">.vf-u-padding--100</span>
<span class="hljs-selector-class">.vf-u-padding--200</span>
<span class="hljs-selector-class">.vf-u-padding--400</span>
<span class="hljs-selector-class">.vf-u-padding--500</span>
<span class="hljs-selector-class">.vf-u-padding--600</span>
<span class="hljs-selector-class">.vf-u-padding--800</span>
<span class="hljs-selector-class">.vf-u-padding--1200</span>

<span class="hljs-selector-class">.vf-u-padding__bottom--0</span>
<span class="hljs-selector-class">.vf-u-padding__bottom--</span>..
<span class="hljs-selector-class">.vf-u-padding__bottom--1200</span>

<span class="hljs-selector-class">.vf-u-padding__top--0</span>
<span class="hljs-selector-class">.vf-u-padding__top--</span>..
<span class="hljs-selector-class">.vf-u-padding__top--1200</span>

<span class="hljs-selector-class">.vf-u-padding__left--0</span>
<span class="hljs-selector-class">.vf-u-padding__left--</span>..
<span class="hljs-selector-class">.vf-u-padding__left--1200</span>

<span class="hljs-selector-class">.vf-u-padding__right--0</span>
<span class="hljs-selector-class">.vf-u-padding__right--</span>..
<span class="hljs-selector-class">.vf-u-padding__right--1200</span>

</code></pre>
  <p>Todo: This should be autogenerated from the Sass, but to best do that we might look at some sort of
    css documentation tool.</p>

</div>

Background variant

Background Colours

.vf-u-background-color--green

.vf-u-background-color--green--darkest

.vf-u-background-color--green--dark

.vf-u-background-color--green--light

.vf-u-background-color--green--lightest

.vf-u-background-color--grey

.vf-u-background-color--grey--darkest

.vf-u-background-color--grey--dark

.vf-u-background-color--grey--light

.vf-u-background-color--grey--lightest

.vf-u-background-color--red

.vf-u-background-color--red--dark

.vf-u-background-color--red--light

.vf-u-background-color--blue

.vf-u-background-color--blue--dark

.vf-u-background-color--blue--light

.vf-u-background-color--purple

.vf-u-background-color--purple--dark

.vf-u-background-color--purple--light

.vf-u-background-color--orange

.vf-u-background-color--orange--dark

.vf-u-background-color--orange--light

.vf-u-background-color--yellow

.vf-u-background-color--yellow--dark

.vf-u-background-color--yellow--light

.vf-u-background-color--bright-green

.vf-u-background-color--bright-green--dark

.vf-u-background-color--bright-green--light

.vf-u-background-color-ui--black

.vf-u-background-color-ui--grey

.vf-u-background-color-ui--grey--light

.vf-u-background-color-ui--yellow

.vf-u-background-color-ui--red

.vf-u-background-color-ui--white

.vf-u-background-color-ui--off-white

HTML 
<style>
  .vf-utility__examples {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 1em;
  }

  .vf-utility--example {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / -1;
    grid-column-gap: 1em;
    grid-template-columns: subgrid;
  }

  .vf-utility--example p {
    grid-column: 1 / span 1;
  }

  .vf-utility--example span {
    grid-column: 2 / span 1;
    height: 1em;
    width: 100%;
  }
</style>
<div class="vf-content">

  <h3 id="background-colours">Background Colours</h3>
  <section class="vf-utility__examples">
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green</code></p>
      <span class="vf-u-background-color--green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--darkest</code></p>
      <span class="vf-u-background-color--green--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--dark</code></p>
      <span class="vf-u-background-color--green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--light</code></p>
      <span class="vf-u-background-color--green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--green--lightest</code></p>
      <span class="vf-u-background-color--green--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey</code></p>
      <span class="vf-u-background-color--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--darkest</code></p>
      <span class="vf-u-background-color--grey--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--dark</code></p>
      <span class="vf-u-background-color--grey--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--light</code></p>
      <span class="vf-u-background-color--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--grey--lightest</code></p>
      <span class="vf-u-background-color--grey--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--red</code></p>
      <span class="vf-u-background-color--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--red--dark</code></p>
      <span class="vf-u-background-color--red--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--red--light</code></p>
      <span class="vf-u-background-color--red--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--blue</code></p>
      <span class="vf-u-background-color--blue"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--blue--dark</code></p>
      <span class="vf-u-background-color--blue--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--blue--light</code></p>
      <span class="vf-u-background-color--blue--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--purple</code></p>
      <span class="vf-u-background-color--purple"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--purple--dark</code></p>
      <span class="vf-u-background-color--purple--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--purple--light</code></p>
      <span class="vf-u-background-color--purple--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--orange</code></p>
      <span class="vf-u-background-color--orange"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--orange--dark</code></p>
      <span class="vf-u-background-color--orange--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--orange--light</code></p>
      <span class="vf-u-background-color--orange--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--yellow</code></p>
      <span class="vf-u-background-color--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--yellow--dark</code></p>
      <span class="vf-u-background-color--yellow--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--yellow--light</code></p>
      <span class="vf-u-background-color--yellow--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--bright-green</code></p>
      <span class="vf-u-background-color--bright-green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--bright-green--dark</code></p>
      <span class="vf-u-background-color--bright-green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color--bright-green--light</code></p>
      <span class="vf-u-background-color--bright-green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--black</code></p>
      <span class="vf-u-background-color-ui--black"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--grey</code></p>
      <span class="vf-u-background-color-ui--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--grey--light</code></p>
      <span class="vf-u-background-color-ui--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--yellow</code></p>
      <span class="vf-u-background-color-ui--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--red</code></p>
      <span class="vf-u-background-color-ui--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--white</code></p>
      <span class="vf-u-background-color-ui--white"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-background-color-ui--off-white</code></p>
      <span class="vf-u-background-color-ui--off-white"></span>
    </article>
  </section>
</div>

Border variant

Border colours

.vf-u-border-color--green

.vf-u-border-color--green--darkest

.vf-u-border-color--green--dark

.vf-u-border-color--green--light

.vf-u-border-color--green--lightest

.vf-u-border-color--grey

.vf-u-border-color--grey--darkest

.vf-u-border-color--grey--dark

.vf-u-border-color--grey--light

.vf-u-border-color--grey--lightest

.vf-u-border-color--red

.vf-u-border-color--red--dark

.vf-u-border-color--red--light

.vf-u-border-color--blue

.vf-u-border-color--blue--dark

.vf-u-border-color--blue--light

.vf-u-border-color--purple

.vf-u-border-color--purple--dark

.vf-u-border-color--purple--light

.vf-u-border-color--orange

.vf-u-border-color--orange--dark

.vf-u-border-color--orange--light

.vf-u-border-color--yellow

.vf-u-border-color--yellow--dark

.vf-u-border-color--yellow--light

.vf-u-border-color--bright-green

.vf-u-border-color--bright-green--dark

.vf-u-border-color--bright-green--light

.vf-u-border-color-ui--black

.vf-u-border-color-ui--grey

.vf-u-border-color-ui--grey--light

.vf-u-border-color-ui--yellow

.vf-u-border-color-ui--red

.vf-u-border-color-ui--white

.vf-u-border-color-ui--off-white

HTML 
<style>
  .vf-utility__examples {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 1em;
  }

  .vf-utility--example {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / -1;
    grid-column-gap: 1em;
    grid-template-columns: subgrid;
  }

  .vf-utility--example p {
    grid-column: 1 / span 1;
  }

  .vf-utility--example span {
    border-style: solid;
    border-width: 1px;
    grid-column: 2 / span 1;
    height: 1em;
    width: 100%;
  }
</style>
<div class="vf-content">

  <h3 id="border-colours">Border colours</h3>
  <section class="vf-utility__examples">
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green</code></p>
      <span class="vf-u-border-color--green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--darkest</code></p>
      <span class="vf-u-border-color--green--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--dark</code></p>
      <span class="vf-u-border-color--green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--light</code></p>
      <span class="vf-u-border-color--green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--green--lightest</code></p>
      <span class="vf-u-border-color--green--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey</code></p>
      <span class="vf-u-border-color--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--darkest</code></p>
      <span class="vf-u-border-color--grey--darkest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--dark</code></p>
      <span class="vf-u-border-color--grey--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--light</code></p>
      <span class="vf-u-border-color--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--grey--lightest</code></p>
      <span class="vf-u-border-color--grey--lightest"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--red</code></p>
      <span class="vf-u-border-color--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--red--dark</code></p>
      <span class="vf-u-border-color--red--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--red--light</code></p>
      <span class="vf-u-border-color--red--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--blue</code></p>
      <span class="vf-u-border-color--blue"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--blue--dark</code></p>
      <span class="vf-u-border-color--blue--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--blue--light</code></p>
      <span class="vf-u-border-color--blue--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--purple</code></p>
      <span class="vf-u-border-color--purple"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--purple--dark</code></p>
      <span class="vf-u-border-color--purple--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--purple--light</code></p>
      <span class="vf-u-border-color--purple--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--orange</code></p>
      <span class="vf-u-border-color--orange"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--orange--dark</code></p>
      <span class="vf-u-border-color--orange--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--orange--light</code></p>
      <span class="vf-u-border-color--orange--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--yellow</code></p>
      <span class="vf-u-border-color--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--yellow--dark</code></p>
      <span class="vf-u-border-color--yellow--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--yellow--light</code></p>
      <span class="vf-u-border-color--yellow--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--bright-green</code></p>
      <span class="vf-u-border-color--bright-green"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--bright-green--dark</code></p>
      <span class="vf-u-border-color--bright-green--dark"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color--bright-green--light</code></p>
      <span class="vf-u-border-color--bright-green--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--black</code></p>
      <span class="vf-u-border-color-ui--black"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--grey</code></p>
      <span class="vf-u-border-color-ui--grey"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--grey--light</code></p>
      <span class="vf-u-border-color-ui--grey--light"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--yellow</code></p>
      <span class="vf-u-border-color-ui--yellow"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--red</code></p>
      <span class="vf-u-border-color-ui--red"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--white</code></p>
      <span class="vf-u-border-color-ui--white"></span>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-border-color-ui--off-white</code></p>
      <span class="vf-u-border-color-ui--off-white"></span>
    </article>
  </section>
</div>

Float variant

Layout

Floats

Use the utility clasees .vf-u-float__left and .vf-u-float__right to set elements to float. Use .vf-u-clearfix to clear elements if needed on the parent element.

.vf-u-float__left

Lorem ipsum dolor sit

.vf-u-float__right

Lorem ipsum dolor sit

.vf-u-float__none

Lorem ipsum dolor sit

Responsive Floats

At 360px

.vf-u-float__left--xs

Lorem ipsum dolor sit

.vf-u-float__right--xs

Lorem ipsum dolor sit

.vf-u-float__none--xs

Lorem ipsum dolor sit

At 699px

.vf-u-float__left--sm

Lorem ipsum dolor sit

.vf-u-float__right--sm

Lorem ipsum dolor sit

.vf-u-float__none--sm

Lorem ipsum dolor sit

At 800px

.vf-u-float__left--md

Lorem ipsum dolor sit

.vf-u-float__right--md

Lorem ipsum dolor sit

.vf-u-float__none--md

Lorem ipsum dolor sit

At 1024px

.vf-u-float__left--lg

Lorem ipsum dolor sit

.vf-u-float__right--lg

Lorem ipsum dolor sit

.vf-u-float__none--lg

Lorem ipsum dolor sit

At 1200px

.vf-u-float__left--xl

Lorem ipsum dolor sit

.vf-u-float__right--xl

Lorem ipsum dolor sit

.vf-u-float__none--xl

Lorem ipsum dolor sit
HTML 
<style>
  .vf-utility__examples {
    /* display: grid; */
    /* grid-template-columns: max-content 1fr; */
    /* grid-column-gap: 1em; */
  }

  .vf-utility--example {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column: 1 / -1;
    grid-column-gap: 1em;
    margin-bottom: 1em;
    /* grid-template-columns: subgrid; */
  }

  .vf-utility--example p {
    grid-column: 1 / span 1;
    margin-bottom: 0 !important;
  }

  .vf-utility--example div {
    align-self: center;
    grid-column: 2 / span 1;
    height: 1em;
  }
</style>
<div class="vf-content">

  <h3 id="layout">Layout</h3>
  <section class="vf-utility__examples | vf-content">
    <h4>Floats</h4>
    <p>Use the utility clasees <code>.vf-u-float__left</code> and <code>.vf-u-float__right</code> to set elements to float. Use <code>.vf-u-clearfix</code> to clear elements if needed on the parent element.</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <h4>Responsive Floats</h4>
    <p>At 360px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--xs</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--xs">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--xs</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--xs">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--xs</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--xs">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 699px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--sm</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--sm">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--sm</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--sm">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--sm</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--sm">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 800px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--md</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--md">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--md</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--md">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--md</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--md">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 1024px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--lg</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--lg">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--lg</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--lg">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--lg</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--lg">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <p>At 1200px</p>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__left--xl</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__left--xl">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__right--xl</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__right--xl">Lorem ipsum dolor sit</span>
      </div>
    </article>
    <article class="vf-utility--example">
      <p><code>.vf-u-float__none--xl</code></p>
      <div class="vf-u-clearfix">
        <span class="vf-u-float__none--xl">Lorem ipsum dolor sit</span>
      </div>
    </article>

  </section>

</div>

Grid variant

.vf-u-grid__col--span-1--xs
.vf-u-grid__col--span-2--xs
.vf-u-grid__col--span-3--xs

.vf-u-grid__col--span-1--sm

.vf-u-grid__col--span-2--lg

.vf-u-grid__col--span-3--xl

.vf-u-grid__col--span-1--sm

.vf-u-grid__col--span-2--lg

.vf-u-grid__col--span-3--xl

.vf-u-grid__col--span-1--sm

.vf-u-grid__col--span-2--lg

.vf-u-grid__col--span-3--xl

HTML 
<style>
  .vf-u-grid-example {
    grid-row-gap: 16px;
    margin-bottom: 32px;
  }

  .vf-u-grid-example>div {
    background-color: var(--vf-color--green);
    padding: 16px;
  }
</style>

<div class="vf-u-grid-example | vf-grid vf-grid__col-6">
  <div class="vf-u-grid__col--span-1--xs">.vf-u-grid__col--span-1--xs</div>
  <div class="vf-u-grid__col--span-2--xs">.vf-u-grid__col--span-2--xs</div>
  <div class="vf-u-grid__col--span-3--xs">.vf-u-grid__col--span-3--xs</div>
</div>


<div class="vf-content | vf-u-grid-example | vf-grid vf-grid__col-6">
  <div class="
    vf-u-grid__col--span-1--sm
    vf-u-grid__col--span-2--lg
    vf-u-grid__col--span-3--xl
  ">
    <p>.vf-u-grid__col--span-1--sm</p>
    <p>.vf-u-grid__col--span-2--lg</p>
    <p>.vf-u-grid__col--span-3--xl</p>
  </div>
  <div class="
    vf-u-grid__col--span-1--sm
    vf-u-grid__col--span-2--lg
    vf-u-grid__col--span-3--xl
  ">
    <p>.vf-u-grid__col--span-1--sm</p>
    <p>.vf-u-grid__col--span-2--lg</p>
    <p>.vf-u-grid__col--span-3--xl</p>
  </div>
  <div class="
    vf-u-grid__col--span-1--sm
    vf-u-grid__col--span-2--lg
    vf-u-grid__col--span-3--xl
  ">
    <p>.vf-u-grid__col--span-1--sm</p>
    <p>.vf-u-grid__col--span-2--lg</p>
    <p>.vf-u-grid__col--span-3--xl</p>
  </div>
</div>

Grid Gap variant

Grid Gap

The gap or gutter between grid items makes use of the spacing design tokens which use an incremental scale to determine the size computed in the browser in rems. This is where a value of 100 is equal to .25rem.

value size (in rem)
100 .25rem
200 .5rem
400 1rem
500 1.25rem
600 1.5rem
800 2rem
1200 3rem

vf-u-grid-gap

.vf-u-grid-gap--100


.vf-u-grid-gap--200


.vf-u-grid-gap--400


.vf-u-grid-gap--500


.vf-u-grid-gap--600


.vf-u-grid-gap--800



vf-u-grid-column-gap

.vf-u-grid-gap--100


.vf-u-grid-gap--200


.vf-u-grid-gap--400


.vf-u-grid-gap--500


.vf-u-grid-gap--600


.vf-u-grid-gap--800



vf-u-grid-row-gap

.vf-u-grid-gap--100


.vf-u-grid-gap--200


.vf-u-grid-gap--400


.vf-u-grid-gap--500


.vf-u-grid-gap--600


.vf-u-grid-gap--800

HTML 
<style>
  .vf-utility--example div {
    background: green;
    height: 40px;
  }

  .vf-utility--example p {
    grid-column: 1 / -1;
    margin-bottom: 0 !important;
  }

  .vf-utility__examples h4 {}
</style>
<div class="vf-content">

  <h3 id="grid-gap">Grid Gap</h3>
  <p>The <code>gap</code> or gutter between grid items makes use of the <code>spacing</code> design tokens which use an incremental scale to determine the size computed in the browser in <code>rem</code>s.
    This is where a value of <code>100</code> is equal to <code>.25rem</code>.</p>
  <table>
    <thead>
      <tr>
        <th>value</th>
        <th>size (in <code>rem</code>)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>100</td>
        <td>.25rem</td>
      </tr>
      <tr>
        <td>200</td>
        <td>.5rem</td>
      </tr>
      <tr>
        <td>400</td>
        <td>1rem</td>
      </tr>
      <tr>
        <td>500</td>
        <td>1.25rem</td>
      </tr>
      <tr>
        <td>600</td>
        <td>1.5rem</td>
      </tr>
      <tr>
        <td>800</td>
        <td>2rem</td>
      </tr>
      <tr>
        <td>1200</td>
        <td>3rem</td>
      </tr>
      <tr>
        <td><br></td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <section class="vf-utility__examples | vf-content">
    <h4>vf-u-grid-gap</h4>

    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-gap--100">
      <p><code>.vf-u-grid-gap--100</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-gap--200">
      <p><code>.vf-u-grid-gap--200</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-gap--400">
      <p><code>.vf-u-grid-gap--400</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-gap--500">
      <p><code>.vf-u-grid-gap--500</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-gap--600">
      <p><code>.vf-u-grid-gap--600</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-gap--800">
      <p><code>.vf-u-grid-gap--800</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <br>
    <hr class="vf-divider">
    <h4>vf-u-grid-column-gap</h4>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-column-gap--100">
      <p><code>.vf-u-grid-gap--100</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-column-gap--200">
      <p><code>.vf-u-grid-gap--200</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-column-gap--400">
      <p><code>.vf-u-grid-gap--400</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-column-gap--500">
      <p><code>.vf-u-grid-gap--500</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-column-gap--600">
      <p><code>.vf-u-grid-gap--600</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-column-gap--800">
      <p><code>.vf-u-grid-gap--800</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <br>
    <hr class="vf-divider">
    <h4>vf-u-grid-row-gap</h4>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-row-gap--100">
      <p><code>.vf-u-grid-gap--100</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-row-gap--200">
      <p><code>.vf-u-grid-gap--200</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-row-gap--400">
      <p><code>.vf-u-grid-gap--400</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-row-gap--500">
      <p><code>.vf-u-grid-gap--500</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-row-gap--600">
      <p><code>.vf-u-grid-gap--600</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
    <br>
    <article class="vf-utility--example vf-grid vf-grid__col-3 vf-u-grid-row-gap--800">
      <p><code>.vf-u-grid-gap--800</code></p>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>

  </section>
</div>

Width variant

Width

Use the utility clasees .vf-u-width__20 to set responive width in 5 percentage increments.

.vf-u-width__5

.vf-u-width__10

.vf-u-width__15

.vf-u-width__20

.vf-u-width__30

.vf-u-width__40

And so on up to 100.

Responsive

You can also make these conditional on screen size with --xs, --sm, --md, --lg or --xl.

.vf-u-width__20--sm

.vf-u-width__20--xl

HTML 
<style>
  .vf-utility--example div[class^='vf-u-width'] {
    background: green;
    height: 40px;
  }
</style>
<div class="vf-content">

  <h3 id="width">Width</h3>
  <section class="vf-utility__examples | vf-content">
    <h4></h4>
    <p>Use the utility clasees <code>.vf-u-width__20</code> to set responive width in 5 percentage increments.</p>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__5</code></p>
      <div class="vf-u-width__5"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__10</code></p>
      <div class="vf-u-width__10"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__15</code></p>
      <div class="vf-u-width__15"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__20</code></p>
      <div class="vf-u-width__20"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__30</code></p>
      <div class="vf-u-width__30"></div>
    </article>

    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__40</code></p>
      <div class="vf-u-width__40"></div>
    </article>

    And so on up to 100.
  </section>

  <section class="vf-utility__examples | vf-content">
    <h4>Responsive</h4>

    <p>You can also make these conditional on screen size with <code>--xs</code>, <code>--sm</code>, <code>--md</code>, <code>--lg</code> or <code>--xl</code>.</p>


    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__20--sm</code></p>
      <div class="vf-u-width__20--sm"></div>
    </article>


    <article class="vf-utility--example vf-u-clearfix">
      <p><code>.vf-u-width__20--xl</code></p>
      <div class="vf-u-width__20--xl"></div>
    </article>




  </section>

</div>

Examples

Installation info

This component is distributed with npm. After installing npm, you can install the vf-utility-classes with this command.

$ yarn add --dev @visual-framework/vf-utility-classes

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-utility-classes/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

2.0.0

  • all utility classes that make use of spacing tokens now use numerical naming
  • updates documentation pages, as needed
  • requires v2.0.0 of the vf-design-tokens package or newer

1.1.0

  • adds utility classes for grid row and columns gaps

1.0.3

  • adds utility classes for grid row/columns spans and start positions

1.0.2

  • the one that removes a parent class for the screen reader only class #847
  • https://github.com/visual-framework/vf-core/pull/847

1.0.1

  • Adds .vf-u-text--break

1.0.0

  • Initial stable release

Assets


File system location: components/vf-utility-classes

Find an issue on this page? Propose a change or discuss it.