EvoToolkit - v3.0.0 (Changelog)


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.



Luke Harrison



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.

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


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>


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

Column 1
Column 2
Column 1
Column 2
<div class="o-layout u-mb-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>


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.

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>