EvoToolkit - v2.3.0 (Changelog)

Spacing

A suite of utility classes to apply margin styles to elements. Use to add spacing between elements. These are generated using the $spacing setting, which you should click here for more info on.

Source

Contributors

Luke Harrison

Base

StandardDisabled

margin-right and margin-bottom variants are available, which each have spacing defined by the values in $spacing.

Note: These are disabled by default. Enable block variables $utility-spacing-bottom and $utility-spacing-right in overrides.scss to use.

<button class="c-button u-margin-bottom-large">Component #1</button> <button class="c-button u-margin-bottom-regular">Component #2</button> <button class="c-button u-margin-right-huge">Component #3</button>

ResponsiveDisabled

Spacing utilities can also be triggered at various breakpoints.

This is disabled by default. Enable block variable $utility-spacing-responsive or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<button class="c-button u-margin-bottom-large u-margin-bottom-none@lg">Component #1</button> <button class="c-button u-margin-bottom-regular u-margin-bottom-small@md">Component #2</button> <button class="c-button u-margin-right-huge@sm">Component #3</button>

Disable Last Child Spacing

Adding this class to an element with a spacing utility means that if that element is also the last child element of its parent, the spacing won't be applied. This is almost exclusively used for programatically generated elements with margins, where the last element in the set needs to be margin free.

<button class="c-button u-margin-bottom-large u-margin-bottom-disable-last-child">Programatically generated component</button> <button class="c-button u-margin-bottom-large u-margin-bottom-disable-last-child">Programatically generated component</button> <button class="c-button u-margin-bottom-large u-margin-bottom-disable-last-child">Programatically generated component</button>