Utility Classes live

This component has variants:

Open the above preview in a new window: With layout Open Component only Open

Utility Classes

npm version

About

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.

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

Install

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

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.

Component information

  • Handle: @vf-utility-classes
  • Filesystem path: ../../components/vf-utility-classes/vf-utility-classes.njk

Code example

<!-- Misc -->
<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 t-shirt sizes from <code>0</code>,<code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xl</code>, <code>xxl</code></p>

    <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--xs</span>
<span class="hljs-selector-class">.vf-u-margin--sm</span>
<span class="hljs-selector-class">.vf-u-margin--md</span>
<span class="hljs-selector-class">.vf-u-margin--lg</span>
<span class="hljs-selector-class">.vf-u-margin--xl</span>
<span class="hljs-selector-class">.vf-u-margin--xxl</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--xxl</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--xxl</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--xxl</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--xxl</span>

</code></pre>
    <h3 id="padding">Padding</h3>
    <p>In t-shirt sizes from <code>0</code>,<code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xl</code>, <code>xxl</code></p>

    <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--xs</span>
<span class="hljs-selector-class">.vf-u-padding--sm</span>
<span class="hljs-selector-class">.vf-u-padding--md</span>
<span class="hljs-selector-class">.vf-u-padding--lg</span>
<span class="hljs-selector-class">.vf-u-padding--xl</span>
<span class="hljs-selector-class">.vf-u-padding--xxl</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--xxl</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--xxl</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--xxl</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--xxl</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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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>
    <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--xs">
            <p><code>.vf-u-grid-gap--xs</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--sm">
            <p><code>.vf-u-grid-gap--sm</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--md">
            <p><code>.vf-u-grid-gap--md</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--lg">
            <p><code>.vf-u-grid-gap--lg</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--xl">
            <p><code>.vf-u-grid-gap--xl</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--xxl">
            <p><code>.vf-u-grid-gap--xxl</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--xs">
            <p><code>.vf-u-grid-gap--xs</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--sm">
            <p><code>.vf-u-grid-gap--sm</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--md">
            <p><code>.vf-u-grid-gap--md</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--lg">
            <p><code>.vf-u-grid-gap--lg</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--xl">
            <p><code>.vf-u-grid-gap--xl</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--xxl">
            <p><code>.vf-u-grid-gap--xxl</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--xs">
            <p><code>.vf-u-grid-gap--xs</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--sm">
            <p><code>.vf-u-grid-gap--sm</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--md">
            <p><code>.vf-u-grid-gap--md</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--lg">
            <p><code>.vf-u-grid-gap--lg</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--xl">
            <p><code>.vf-u-grid-gap--xl</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--xxl">
            <p><code>.vf-u-grid-gap--xxl</code></p>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </article>

    </section>
</div>
<!-- Width -->
<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>

Resources and files

          # Change Log

## 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 (2020-01-24)

* Adds .vf-u-text--break

## 1.0.0 (2019-12-17)

* Initial stable release

        

File information

          
.vf-u-clearfix::before {
  content: '';
  display: table;
}
.vf-u-clearfix::after {
  clear: both;
  content: '';
  display: table;
}

.vf-u-float__left {
  float: left !important;
}

.vf-u-float__right {
  float: right !important;
}

.vf-u-float__none {
  float: none !important;
}

@media (min-width: $vf-breakpoint--xs) {
  .vf-u-float__left--xs {
    float: left !important;
  }
  .vf-u-float__right--xs {
    float: right !important;
  }
  .vf-u-float__none--xs {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--sm) {
  .vf-u-float__left--sm {
    float: left !important;
  }
  .vf-u-float__right--sm {
    float: right !important;
  }
  .vf-u-float__none--sm {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--md) {
  .vf-u-float__left--md {
    float: left !important;
  }
  .vf-u-float__right--md {
    float: right !important;
  }
  .vf-u-float__none--md {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--lg) {
  .vf-u-float__left--lg {
    float: left !important;
  }
  .vf-u-float__right--lg {
    float: right !important;
  }
  .vf-u-float__none--lg {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--xl) {
  .vf-u-float__left--xl {
    float: left !important;
  }
  .vf-u-float__right--xl {
    float: right !important;
  }
  .vf-u-float__none--xl {
    float: none !important;
  }
}

        

File information

          $grid-slug: vf-u-grid__ !default;


$vf-breakpoints-map: map-remove($vf-breakpoints-map, '$vf-breakpoint--xs', '$vf-breakpoint--xl');

@each $name, $size in $vf-breakpoints-map {
  @media (min-width: $size) {

    $name: str-replace($name, 16);

    @for $i from 1 through 11 {
      .#{$grid-slug}col--start-#{$i}--#{$name} {
        grid-column-start: $i;
      }
    }
    @for $i from 2 through 11 {
      .#{$grid-slug}col--end-#{$i}--#{$name} {
        grid-column-end: $i;
      }
    }

    @for $i from 1 through 11 {
      .#{$grid-slug}col--span-#{$i}--#{$name} {
        grid-column-end: span $i;
      }
    }

    @for $i from 1 through 11 {
      .#{$grid-slug}row--start-#{$i}--#{$name} {
        grid-row-start: $i;
      }
    }
    @for $i from 2 through 11 {
      .#{$grid-slug}row--end-#{$i}--#{$name} {
        grid-row-end: $i;
      }
    }

    @for $i from 1 through 11 {
      .#{$grid-slug}row--span-#{$i}--#{$name} {
        grid-row-end: span $i;
      }
    }

  }
};

        

File information

          // Some things should only be show to screen readers
.vf-u-sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

        

File information

          .vf-u-text--nowrap {
  white-space: nowrap;
}

.vf-u-text--break {
  word-break: break-all;
}

.vf-u-text--et-al {
  position: relative;

  &::after {
    color: inherit;
    content: 'et al.';
    font: inherit;
    position: relative;
    right: 0;
  }
}

        

File information

          // Creates responsive sizes like:
// .vf-width__10 { width: 10%; }
// .vf-width__10--sm { width: 10%; }

@for $i from 1 through 20 {
  .vf-u-width__#{$i * 5} { width: $i * 5%; }
}

@media (min-width: $vf-breakpoint--xs) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--xs { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--sm) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--sm { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--md) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--md { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--lg) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--lg { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--xl) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--xl { width: $i * 5%; }
  }
}
        

File information

          // vf-utility-classes

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-u-float.scss';
@import 'vf-u-grid.scss';
@import 'vf-u-text.scss';
@import 'vf-u-screen-reader.scss';
@import 'vf-u-width.scss';


.vf-u-background-color {
  @include color-modifiers($attribute: 'background-color');
}
.vf-u-background-color-ui {
  @include ui-color-modifiers($attribute: 'background-color');
}

.vf-u-border-color {
  @include color-modifiers($attribute: 'border-color');
}
.vf-u-border-color-ui {
  @include ui-color-modifiers($attribute: 'border-color');
}

.vf-u-margin {
  @include spacing-modifiers(margin);
}

.vf-u-padding {
  @include spacing-modifiers;
}

.vf-u-text-color {
  @include color-modifiers;
}
.vf-u-text-color--ui {
  @include ui-color-modifiers;
}

.vf-u-type {
  @include type-modifiers;
}

// Sometimes content needs to escape a grid container, for example full-width content inside of `.vf-body`
.vf-u-grid--reset {
  grid-column: 1 / -1;
}

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

.vf-u-grid {
  @include grid-modifiers;
}

        

File information

All the components

Grids

Put stuff in columns.

Grid

Page Grid

Inlay


Elements

The micro elements of the component library.

Badges

Blockquote

Button

Collapse

Divider

Explainer

Favicon

Figure

Headings

Link

Lists

Logo

No JS

Text


Blocks

Simple components like sections headers, galleries and so on.

Activity List

Article Meta Information

Box

Breadcrumbs

Card

Code Example

Discussion

Embed

Footer

Global Header

Lede

Links List

Masthead

Navigation

Page Header

Pagination

Profile

Search

Section Header

Social icons

Summary

Table

Tabs

Tree

Video

Video Teaser


Container

More complex components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EBI Header and Footer

Acivity List Group

Banner

Card Container

Content

Forms

Header

Hero

Intro

News Container

Summary Container

Video Container


Boilerplates

Whole-page templates that are a collection of many components.

VF Boilerplate


Utilities

Utility classes to help where neeed.

EBI-VF 1.x Compatibility Component

EMBL Notifications

Google Analytics enhancements

Visual Framework Componet Rollup

Design Tokens

Plex Mono Font

Plex Sans Font

JS Polyfill

Sass config

Sass Starter

Full Bleed

Utility classes


EMBL Grids

EMBLs way to put stuff in columns.

EMBL Grid


EMBL Elements

EMBLs micro elements of the component library.

EMBL Conditional Edit

EMBL Favicon

EMBL Logo


EMBL Blocks

Simple components from EMBL like sections headers, galleries and so on.

EMBL Breadcrumbs

EMBL Content meta properties


EMBL Containers

More complex EMBL components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EMBL ContentHub Loader


EMBL Boilerplates

Whole-page templates that are a collection of many components.


Deprecated

These components are no longer maintained.

Deprecated pattern

Sass utilities