Options for structuring your pages, including global styles, required scaffolding, grid system, and more.
For faster mobile-friendly and responsive development, Figuration includes utility classes for showing, hiding, aligning, and spacing content. Below is a primer on what's included, and how these utilities can help you with layout.
Use the display utilities for responsively toggling common values of the
display property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
Flexbox options #
Figuration is built with some flexbox support, but not every element's
display been changed to
display: flex as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Many of the components are built with support for flexbox enabled modes.
Should you need to add
display: flex to an element, do so with
.d-flex or one of the responsive variants (e.g.,
.d-sm-flex). You'll need this class or
display value to allow the use of our extra flexbox utilities for sizing, alignment, spacing, and more.
Margin and Padding #
padding spacing utilities to control how elements and components are spaced and sized. Figuration includes scaled spacing utilities, based on a
1rem value default
$spacer variable. Choose values for all viewports (e.g.,
margin-right: 1rem), or pick responsive variants to target specific viewports (e.g.,
margin-right: 0.5rem starting at the
display isn't needed, you can toggle the
visibility of an element with our visibility utilities. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.