EvoToolkit - v2.3.0 (Changelog)

Alignments

A suite of standard, responsive and flex alignment utility classes to easily align content.

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

StandardDisabled

Used primarily to align text and other inline elements within their parent containers.

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

Left aligned

Center aligned

Right aligned

<h1 class="u-align-left">Left aligned</h1> <h1 class="u-align-center">Center aligned</h1> <h1 class="u-align-right">Right aligned</h1>

ResponsiveDisabled

Responsive variants of the above.

This is disabled by default. Enable block variable $utility-alignments-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)

Center aligned at start, left aligned from `md` up

<h1 class="u-align-center u-align-left@md">Center aligned at start, left aligned from `md` up</h1>

FlexDisabled

Flexbox classes for controlling alignment for nested elements. Useful in a variety of scenarios, especially with objects such as o-layout.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.
I'm vertically centered.
I'm vertically centered.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.
I'm bottom aligned.
I'm bottom aligned.
I'm right aligned.
I'm in the horizontal and vertical center.
<div class="o-layout u-flex-middle u-margin-bottom-regular"> <div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div> <div class="o-layout__item u-width-4/12">I'm vertically centered.</div> <div class="o-layout__item u-width-4/12">I'm vertically centered.</div> </div> <div class="o-layout u-flex-bottom u-margin-bottom-regular"> <div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div> <div class="o-layout__item u-width-4/12">I'm bottom aligned.</div> <div class="o-layout__item u-width-4/12">I'm bottom aligned.</div> </div> <div class="o-box o-box--spacing-small c-box u-flex-right u-margin-bottom-regular"> <div class="o-box o-box--spacing-small u-theme-very-light u-width-6/12">I'm right aligned.</div> </div> <div class="o-box o-box--spacing-small c-box u-height-square u-flex-center-all"> <div class="o-box o-box--spacing-small u-theme-very-light u-width-6/12">I'm in the horizontal and vertical center.</div> </div>

Flex AliasesDisabled

Due to the flexible nature of flexbox (🥁), sometimes certain flex utility classes may not result in the desired behaviour if the parent's flex-direction property has been modified.

To clear up any potential confusion and increase code legibility, aliases for certain flex utilities exist which trigger the same behaviour, but are named more in line with the CSS property they modify.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.
I'm top aligned.
I'm top aligned.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.
I'm bottom aligned.
I'm bottom aligned.
I'm right aligned.
I'm right aligned.
<div class="o-layout u-flex-align-start u-margin-bottom-regular"> <div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div> <div class="o-layout__item u-width-4/12">I'm top aligned.</div> <div class="o-layout__item u-width-4/12">I'm top aligned.</div> </div> <div class="o-layout u-flex-align-end u-margin-bottom-regular"> <div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div> <div class="o-layout__item u-width-4/12">I'm bottom aligned.</div> <div class="o-layout__item u-width-4/12">I'm bottom aligned.</div> </div> <div class="o-box o-box--spacing-small c-box u-flex-justify-start u-margin-bottom-regular"> <div class="o-box o-box--spacing-small u-theme-very-light u-width-6/12">I'm right aligned.</div> </div> <div class="o-box o-box--spacing-small c-box u-flex-justify-end"> <div class="o-box o-box--spacing-small u-theme-very-light u-width-6/12">I'm right aligned.</div> </div>