EvoToolkit - v2.3.0 (Changelog)

Box

A simple undecorated object pattern which allows you to box off content. Takes inspiration from the island object first detailed in this article.

Note: Some examples feature light grey backgrounds so it's easier to see what's going on. In the toolkit itself, these are transparent.

Source

Contributors

Luke Harrison

Dependents
This part is required by one or more components to display properly. If the dependent is enabled and this isn't, it will automatically be imported.

Base

A standard box object by itself doesn't do much, and typically would only be used in combination with modifiers.

Hello, I'm a box
<div class='o-box'>Hello, I'm a box</div>

Modifiers

A list of modifiers for the box 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.

SpacingDisabled

You can apply padding to the box using spacing modifiers.

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

Hello, I'm a box object with micro spacing
Hello, I'm a box object with tiny spacing
Hello, I'm a box object with small spacing
Hello, I'm a box object with regular spacing
Hello, I'm a box object with large spacing
Hello, I'm a box object with huge spacing
<div class='o-box o-box--spacing-micro u-margin-bottom-regular'>Hello, I'm a box object with micro spacing</div> <div class='o-box o-box--spacing-tiny u-margin-bottom-regular'>Hello, I'm a box object with tiny spacing</div> <div class='o-box o-box--spacing-small u-margin-bottom-regular'>Hello, I'm a box object with small spacing</div> <div class='o-box o-box--spacing-regular u-margin-bottom-regular'>Hello, I'm a box object with regular spacing</div> <div class='o-box o-box--spacing-large u-margin-bottom-regular'>Hello, I'm a box object with large spacing</div> <div class='o-box o-box--spacing-huge'>Hello, I'm a box object with huge spacing</div>

Spacing FiltersDisabled

You can tweak the behaviour of spacing modifiers with these filter modifiers. o-box--spacing-vertical makes the padding only apply vetically, whilst o-box--spacing-horizontal only applies the padding horizontally.

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

Hello, I'm a box object with regular vertical spacing
Hello, I'm a box object with regular horizontal spacing
<div class='o-box o-box--spacing-regular o-box--spacing-vertical u-margin-bottom-regular'>Hello, I'm a box object with regular vertical spacing</div> <div class='o-box o-box--spacing-regular o-box--spacing-horizontal'>Hello, I'm a box object with regular horizontal spacing</div>

Disable SpacingDisabled

Additional modifiers also exist which allow you to disable spacing on one particular side of the box object.

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

Hello, I'm a box object with top spacing disabled
Hello, I'm a box object with right spacing disabled
Hello, I'm a box object with bottom spacing disabled
Hello, I'm a box object with left spacing disabled
<div class='o-box o-box--spacing-regular o-box--spacing-disable-top u-margin-bottom-regular'>Hello, I'm a box object with top spacing disabled</div> <div class='o-box o-box--spacing-regular o-box--spacing-disable-right u-margin-bottom-regular'>Hello, I'm a box object with right spacing disabled</div> <div class='o-box o-box--spacing-regular o-box--spacing-disable-bottom u-margin-bottom-regular'>Hello, I'm a box object with bottom spacing disabled</div> <div class='o-box o-box--spacing-regular o-box--spacing-disable-left'>Hello, I'm a box object with left spacing disabled</div>

FixedDisabled

When active, these modifiers will fix a box to either the top or bottom of the viewport and keep it in place as the user scrolls. These are useful for bringing maximum attention to a box, as the user isn't likely to miss it.

By default, examples aren't shown. Click the button below to toggle them.

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

I'm fixed to the top of the viewport.
I'm fixed to the bottom of the viewport.
<button class="c-button js-toggle-fixed">Toggle Fixed Boxes</button> <div class="o-box o-box--fixed-top u-theme-primary u-hide">I'm fixed to the top of the viewport.</div> <div class="o-box o-box--fixed-bottom u-theme-pop u-hide">I'm fixed to the bottom of the viewport.</div>