Evolution Toolkit

Choose a download and start using toolkit in minutes. Jump right in with just the CSS files or get the Source Code for full control.

Download

Stylesheet

The simplest way to start with toolkit is by including the following CSS or minified CSS link.

To do that, copy and paste the following code snippet into your project, right before the closing </head> tag.

CSS

Minified CSS

Usage

If you only download the CSS files, you will not be able to change toolkit using elements.

You will only be able to change toolkit using the compiled CSS, 'evo-toolkit.css'.

For full use of toolkit, download the Source Code, which will include '_toolkit.scss'.

Within '_toolkit.scss', you can change classes by targeting their corresponding value.

In the following example, we will change the .evo-button-biggest class. The value we want to target is highlighted in green.

_toolkit.scss

.evo-button-biggest         { @extend %evo-button-16; @extend %evo-button-base; }
.evo-button-bigger         { @extend %evo-button-14; @extend %evo-button-base; }
.evo-button-big            { @extend %evo-button-12; @extend %evo-button-base; }
.evo-button                { @extend %evo-button-10; @extend %evo-button-base; }
.evo-button-small          { @extend %evo-button-8; @extend %evo-button-base; }
.evo-button-smaller        { @extend %evo-button-6; @extend %evo-button-base; }
.evo-button-smallest       { @extend %evo-button-4; @extend %evo-button-base; }

evo-toolkit.css (compiled output)

.evo-button-biggest {
display: inline-block;
padding-top: 1.6225rem;
padding-bottom: 1.53625rem;
padding-left: 1.35rem;
padding-right: 1.35rem;
font-size: 1.83rem;
letter-spacing: -.1rem;
border: 2px solid;

By changing the value, we change the size of .evo-button-biggest.

_toolkit.scss

.evo-button-biggest         { @extend %evo-button-18; @extend %evo-button-base; }
.evo-button-bigger         { @extend %evo-button-14; @extend %evo-button-base; }
.evo-button-big            { @extend %evo-button-12; @extend %evo-button-base; }
.evo-button                { @extend %evo-button-10; @extend %evo-button-base; }
.evo-button-small          { @extend %evo-button-8; @extend %evo-button-base; }
.evo-button-smaller        { @extend %evo-button-6; @extend %evo-button-base; }
.evo-button-smallest       { @extend %evo-button-4; @extend %evo-button-base; }

evo-toolkit.css (compiled output)

.evo-button-biggest {
display: inline-block;
padding-top: 1.755rem;
padding-bottom: 1.6525rem;
padding-left: 1.45rem;
padding-right: 1.45rem;
font-size: 2.01rem;
letter-spacing: -.1rem;
border: 2px solid;

Basic Template

Start with one of these basic HTML templates after you download the CSS files or the Source Code.

There are two templates included. One for toolkit and one for toolkit inverse, called 'evolution-toolkit.html' and 'evolution-toolkit-inverse.html'.

Toolkit Template

Toolkit Inverse Template

Interactions

On the left side is code snippet and on the right is displayed form fields of that code snippet.

Text Links

If applying a link class, place it inside the <a> tag as in the samples below.

brand-color-1

I am a link

brand-color-2

I am a link

brand-color-3

I am a link

brand-color-4

I am a link