EvoToolkit - v2.3.0 (Changelog)

Widths

A suite of utility classes to change the widths of elements. Typically used to size columns in the layout object, but works with any element.

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.

  • Overview
  • Options

Base

StandardDisabled

Width classes closely resemble those featured in many popular grid frameworks, and consist of a u-width-NUMBER-OF-COLUMNS/TOTAL-COLUMNS format. For full width variants such as u-width-12/12, a u-full-width alias exists for them to increase readability where you just need an easy way to make an elementthe full width of its parent container.

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

My button
<div class="c-button u-width-6/12">My button</div>

ResponsiveDisabled

This is disabled by default. Enable block variable $utility-widths 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"> <div class="o-layout__item u-width-12/12 u-width-4/12@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-4/12@md"> Column 3 </div> </div>

OffsetsDisabled

Offset width classes allow you push content along by the specified number of columns.

This is disabled by default. Enable block variable $utility-widths-offsets 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 1
Column 2
<div class="o-layout u-margin-bottom-regular"> <div class="o-layout__item u-width-4/12 u-offset-4/12"> Column 1 </div> <div class="o-layout__item u-width-4/12"> Column 2 </div> </div> <div class="o-layout"> <div class="o-layout__item u-width-4/12 u-offset-4/12 u-width-2/12@md u-offset-1/12@md"> Column 1 </div> <div class="o-layout__item u-width-4/12"> Column 2 </div> </div>

Fixed WidthDisabled

Fixed width utility classes allow you to specify behaviour where an element will stay at a fixed width no matter what, forcing other elements with regular width utility classes to work around it. This is mainly useful for top level layouts where you may want certain columns (Such as a navigation area) to stay at a fixed size throughout.

This is disabled by default. Enable block variable $utility-widths-fixed 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. Integer eu bibendum tortor, pellentesque dictum mauris. Fusce tincidunt accumsan leo, eu tincidunt urna dapibus quis. Vestibulum lacus massa, laoreet commodo diam in, aliquam pulvinar metus. Curabitur quam felis, accumsan sit amet arcu at, venenatis convallis felis.
<div class="o-layout"> <div class="o-layout__item u-width-12/12 u-width-fixed-2/12@md u-bg"> <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> </ul> </div> <div class="o-layout__item u-width-12/12 u-width-auto@md"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu bibendum tortor, pellentesque dictum mauris. Fusce tincidunt accumsan leo, eu tincidunt urna dapibus quis. Vestibulum lacus massa, laoreet commodo diam in, aliquam pulvinar metus. Curabitur quam felis, accumsan sit amet arcu at, venenatis convallis felis. </div> </div>

SpecialDisabled

A number of special width utility class variants exist, which allow you to introduce more classical flexbox behavour:-

  • u-width-grow - Makes the element grow to its maxiumum available size.
  • u-width-shrink - Makes the element shrink to its smallest possible size.
  • u-width-auto - Allows you to reset widths. Useful if you need to cancel certain width behaviour in certain viewports.

All of these have responsive variables, as per the usual methods.

This is disabled by default. Enable block variable $utility-widths-misc 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"> <div class="o-layout__item u-width-shrink@md u-width-auto@lg">Column 1</div> <div class="o-layout__item u-width-shrink@md u-width-auto@lg">Column 2</div> <div class="o-layout__item u-width-grow@md u-width-auto@lg">Column 3</div> </div>

You can customize the widths utility by updating its SASS variables .

CSS

This widths utility has various SASS variables available. Some may tweak certain functionality, whilst others are block variables which enable classe suites.

See Configuring EvoToolkit for more info on the latter.

Name
Name $utility-widths-filter
Description
Description Local filter where you can specify specific classes to be rendered. Accepts a comma seperated SASS list of class names.
Name
Name $utility-widths-sets
Description
Description

Determines how many width sets are generated. For example, if set to 16, you would get width utilities up to u-width-16/16 etc.

Default
Default 12