A suite of utilities to influence element height.
Note: Some examples feature light grey backgrounds so it's easier to see what's going on. In the toolkit itself, these are transparent.
Makes the element height the same as the browser viewport. Useful for minimalist designs where you require content to be vertically centered across all device types.
<div class="u-height-viewport">This will always be the same height as the browser viewport.</div>
Makes the element height always stay in proportion to width; creating a square.
<div class="u-height-square">This will always be square.</div>