EvoToolkit - v3.0.0 (Changelog)

Icon

A suite of object classes to allow for easy sizing of icons. These sizes are programatically generated using key/value pairs in $icon-sizes.

Source

Contributors

Luke Harrison

Table of contents

Base

Standard

<svg class="o-icon-micro u-mb-small"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> <svg class="o-icon-tiny u-mb-small"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> <svg class="o-icon-small u-mb-small"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> <svg class="o-icon-regular u-mb-small"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> <svg class="o-icon-increased u-mb-small"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> <svg class="o-icon-large u-mb-small"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> <svg class="o-icon-huge"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg>

Responsive

<svg class="o-icon-tiny o-icon-regular@md o-icon-huge@lg"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg>

Modifiers

A list of modifiers for the icon component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Disable Value

These modifiers allow you to disable the width or height values.

So for example, applying o-icon--height to o-icon-huge mean the huge sizings only apply to the icon's height.

The benefit of this is it allows you to better size non-square icons, as long as they have their viewbox attribute present to maintain aspect ratio.

In the example below, the first set of icons just uses default icon classes. For non-square icons like the arrow, the aspect ratio is automatically retained, but because of this, the icons aren't the same height, despite having the same array of classes.

The second adds the modifier to the non-sqaure arrow, which means both icons are exactly the same height.

<div class="o-layout u-mb-huge"> <div class="o-layout__item u-width-shrink"> <svg class="o-icon-huge"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> </div> <div class="o-layout__item u-width-shrink"> <svg class="o-icon-huge"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#arrow-fill" ></use></svg> </div> </div> <div class="o-layout"> <div class="o-layout__item u-width-shrink"> <svg class="o-icon-huge"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#cat"></use></svg> </div> <div class="o-layout__item u-width-shrink"> <svg class="o-icon-huge o-icon--height" viewBox="0 0 447.6 234.8"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#arrow-fill"></use></svg> </div> </div>

Circle

By default, the icon will have the default square focus area which all elements share. This is why when the first icon is focused, the yellow area is square.

This approach means the focus area looks a little weird with circular icons, so the o-icon--circle modifier was created. Try focusing the second icon and you will notice the focus area is now circular.


<p class="u-align-center"> <a href="/" class="o-icon-huge u-mb-regular"><svg><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon"></use></svg></a><br /> <a href="/" class="o-icon-huge o-icon--circle"><svg><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon"></use></svg></a> </p>

Flip

A suite of modifiers to rotate icons in 90deg sets.

<svg class="o-icon-huge u-mb-regular"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon"></use></svg> <svg class="o-icon-huge o-icon--flip u-mb-regular"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon"></use></svg> <svg class="o-icon-huge o-icon--flip-1/4 u-mb-regular"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon"></use></svg> <svg class="o-icon-huge o-icon--flip-3/4"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon"></use></svg>

Spin

Adds a spinning animation to the icon. This is particulary useful for things like loading icons, which need to be animating whilst the page is still loading (which animated SVGs won't do).

<svg class="o-icon-huge o-icon--spin"><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#loading"></use></svg>