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

Base

Standard

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>

Responsive

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>

Offsets

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

By default, these aren't compiled by SASS unless the $compile-offsets variable in overrides.scss is true. This is because most usecases for these can be accomplished using flex alignment utilities.

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>

Special

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-no-shrink - Prevents the flex element from shrinking beyond its minimum size.
u-width-auto - Allows you to reset widths. Useful if you need to cancel certain width behaviour in certain viewports.

All of these, with exception to 'no-shrink' 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>