EvoToolkit - v3.0.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

Table of contents

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-mb-small u-mb-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.

Break

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

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-mb-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-mb-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-mb-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-mb-small'></div> <div class='o-layout__item u-width-6/12'>Column 6</div> </div>

Flush

The flush modifier removes the spacing between individual columns.

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-mb-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>

Fit

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

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 Height

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.

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-mb-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 Fill

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.

<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 u-p-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 u-p-small o-layout__fill"> <div class="o-box u-p-small o-layout__fill c-box c-box--rounded u-theme-very-light"> <div class="o-box u-p-small c-box c-box--rounded u-mb-small">Hello</div> <div class="o-box u-p-small o-layout__fill c-box c-box--rounded"> <div class="u-mb-small">Hello</div> <div class="o-box u-p-small o-layout__fill c-box c-box--rounded u-theme-very-light">Hello</div> </div> </div> </div> </div> </div>

Spacing

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

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>