EvoToolkit - v2.3.0 (Changelog)

Layout

The layout object is used to arrange content on a web page.

Typically, this object is typically used with the o-container object and width utility classes to form a traditional 1170px grid system. For a more general introduction to grid systems, try here.

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

Basic

Columns automatically resize themselves to fit, and will wrap to a new row when the content can no longer fit.

Column 1
Column 2
Column 3
<div class='o-layout'> <div class='o-layout__item'>Column 1</div> <div class='o-layout__item'>Column 2</div> <div class='o-layout__item'>Column 3</div> </div>

Sized

We can manually size our columns using width utilities, based on 12 columns.

Column 1
Column 2
Column 3
<div class='o-layout'> <div class='o-layout__item u-width-2/12'>Column 1</div> <div class='o-layout__item u-width-5/12'>Column 2</div> <div class='o-layout__item u-width-5/12'>Column 3</div> </div>

Responsive

We can use responsive width utility classes to change column sizes depending on the size of the viewport. Here, on smaller screens, column 1 starts full width, with columns 2 and 3 split 50:50. Then once the md breakpoint is hit, column 3 resizes to 6 columns width and the other 2 resize to 3 columns width each.

Column 1
Column 2
Column 3
<div class='o-layout'> <div class='o-layout__item u-width-12/12 u-width-3/12@md u-margin-bottom-small u-margin-bottom-none@md'>Column 1</div> <div class='o-layout__item u-width-6/12 u-width-3/12@md'>Column 2</div> <div class='o-layout__item u-width-6/12 u-width-6/12@md'>Column 3</div> </div>

Advanced Responsive

Using the u-width-shrink and u-width-grow utility classes, we can also apply more traditional flexbox behaviour to our layout object. In this example, each column starts full width, then at the md breakpoint, column 1 shrinks down to the smallest its content will allow for, whilst column 2 changes to 4 columns width, and finally column 3 expands to fill whatever remaining space is available.

Column 1
Column 2
Column 3
<div class="o-layout"> <div class="o-layout__item u-width-12/12 u-width-shrink@md">Column 1</div> <div class="o-layout__item u-width-12/12 u-width-4/12@md">Column 2</div> <div class="o-layout__item u-width-12/12 u-width-grow@md">Column 3</div> </div>

Offset

We can also use offset utility classes to shift columns across by a certain amount of columns. Here, we have 2 columns of 4, with the second shift 4 columns across, leaving a gap of 4 columns in the middle.

Column 1
Column 2
<div class='o-layout'> <div class='o-layout__item u-width-4/12'>Column 1</div> <div class='o-layout__item u-width-4/12 u-offset-4/12'>Column 2</div> </div>

Modifiers

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

BreakDisabled

Adding a o-layout__item--break modifier moves all subsequent columns, manually sized or not, to a new row.

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

Column 1
Column 2
Column 3
Column 4
Column 5
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 6
<div class="o-layout u-margin-bottom-large"> <div class='o-layout__item'>Column 1</div> <div class='o-layout__item'>Column 2</div> <div class='o-layout__item'>Column 3</div> <div class='o-layout__item o-layout__item--break u-margin-bottom-small'></div> <div class='o-layout__item'>Column 4</div> <div class='o-layout__item'>Column 5</div> </div> <div class="o-layout"> <div class='o-layout__item u-width-4/12'>Column 1</div> <div class='o-layout__item u-width-4/12'>Column 2</div> <div class='o-layout__item o-layout__item--break u-margin-bottom-small'></div> <div class='o-layout__item'>Column 3</div> <div class='o-layout__item'>Column 4</div> <div class='o-layout__item'>Column 5</div> <div class='o-layout__item'>Column 6</div> <div class='o-layout__item o-layout__item--break u-margin-bottom-small'></div> <div class='o-layout__item u-width-6/12'>Column 6</div> </div>

FlushDisabled

The flush modifier removes the spacing between individual columns.

This is disabled by default. Enable block variable $object-layout-flush-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)

Column 1
Column 2
Column 3
<div class='o-layout o-layout--flush'> <div class='o-layout__item u-width-4/12'>Column 1</div> <div class='o-layout__item u-width-4/12'>Column 2</div> <div class='o-layout__item u-width-4/12'>Column 3</div> </div>

Content Flush

This additional flush modifier allows you to remove the spacing from an individual column.

Column 1
Column 2
Column 3
Column 1
Column 2
Column 3
<div class='o-layout u-margin-bottom-regular'> <div class='o-layout__item o-layout__item--flush u-width-4/12'>Column 1</div> <div class='o-layout__item u-width-4/12'>Column 2</div> <div class='o-layout__item u-width-4/12'>Column 3</div> </div> <div class='o-layout'> <div class='o-layout__item u-width-4/12'>Column 1</div> <div class='o-layout__item o-layout__item--flush u-width-4/12'>Column 2</div> <div class='o-layout__item u-width-4/12'>Column 3</div> </div>

FitDisabled

The fit modifier makes all columns fit on a single row which never pushes columns to a new row, regardless of their content.

This is disabled by default. Enable block variable $object-layout-fit-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)

Column 1
Column 2
Column 3
Column 4
Column 5
<div class='o-layout o-layout--fit'> <div class='o-layout__item'>Column 1</div> <div class='o-layout__item'>Column 2</div> <div class='o-layout__item'>Column 3</div> <div class='o-layout__item'>Column 4</div> <div class='o-layout__item'>Column 5</div> </div>

Fit HeightDisabled

o-layout--fit-height makes all columns equal height, no matter their content. A variant class for the individual columns called o-layout__item--fit-height exists for individual columns.

This is disabled by default. Enable block variable $object-layout-fit-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)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.
Column 2
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.
Column 2
Column 3
<div class='o-layout o-layout--fit-height 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. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.</div> <div class='o-layout__item u-width-4/12'>Column 2</div> <div class='o-layout__item u-width-4/12'>Column 3</div> </div> <div class='o-layout'> <div class='o-layout__item u-width-4/12'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.</div> <div class='o-layout__item u-width-4/12'>Column 2</div> <div class='o-layout__item o-layout__item--fit-height u-width-4/12'>Column 3</div> </div>

Fit Height FillDisabled

When a --fit-height modifier has been applied to a layout, any o-layout__fill elements within will automatically stretch to fill all available space, irrespective of their content.

This is disabled by default. Enable block variable $object-layout-fit-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)

<div class="o-layout o-layout--fit-height"> <div class="o-layout__item u-width-12/12 u-width-5/12@md"> <div class="o-box o-box--spacing-small"> <ul class="o-list-bare"> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> <li><a class="c-type-link">Link</a></li> </ul> </div> </div> <div class="o-layout__item"> <div class="o-box o-box--spacing-small o-layout__fill"> <div class="o-box o-box--spacing-small o-layout__fill c-box c-box--rounded u-theme-very-light"> <div class="o-box o-box--spacing-small c-box c-box--rounded u-margin-bottom-small">Hello</div> <div class="o-box o-box--spacing-small o-layout__fill c-box c-box--rounded"> <div class="u-margin-bottom-small">Hello</div> <div class="o-box o-box--spacing-small o-layout__fill c-box c-box--rounded u-theme-very-light">Hello</div> </div> </div> </div> </div> </div>

SpacingDisabled

Spacing modifiers allow you to change the spacing between columns. These use the values defined in $spacing. Responsive variants are also available.

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

Column 1
Column 2
Column 3
<div class='o-layout o-layout--spacing-large'> <div class='o-layout__item u-width-4/12'>Column 1</div> <div class='o-layout__item u-width-4/12'>Column 2</div> <div class='o-layout__item u-width-4/12'>Column 3</div> </div>