Figuration v4.4 is now available!

Orientation

Control the orientation of elements.

Rotate

Rotate an element around its center point.

Figuration
Figuration
Figuration
Figuration
Figuration
Figuration
Figuration
Figuration
<!-- `.rotate-0` does not exist, as this is the default rotation -->
<div class="rotate-45">...</div>
<div class="rotate-90">...</div>
<div class="rotate-135">...</div>
<div class="rotate-180">...</div>
<div class="rotate-225">...</div>
<div class="rotate-270">...</div>
<div class="rotate-315">...</div>

Flip

Flip elements along their horizontal or vertical axis;

Flip DOM element horizontally
Flip DOM element vertically
<div class="flip-horizontal">Flip DOM element horizontally</div>
<div class="flip-vertical">Flip DOM element vertically</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-orientation boolean true Enable the generation of the orientation utility classes.
$enable-utility-orientation-rotate boolean true Enable the generation of the rotate utility classes.
$enable-utility-orientation-flip boolean true Enable the generation of the flip utility classes.
$utility-rotate map
("45": rotate(45deg),
"90": rotate(90deg),
"135": rotate(135deg),
"180": rotate(180deg),
"225": rotate(45deg),
"270": rotate(270deg),
"315": rotate(315deg))
Map of rotate names and rules to be generated.

Mixins

No mixins available.