Widths

Layout width variables used for breakpoints. Viewports equal to or smaller than @lineLength are generally considered small, i.e. mobile.

@layoutUltraWideWidth
@layoutWideWidth
@layoutWidth (75em)
@lineLength (50em)
@columnWideWidth (26em)
@columnWidth (20.5em)

Breakpoints

Breakpoints are not based on arbitrary numbers such as a certain device resolution, but solely on the available layout widths. Each width variable has two corresponding breakpoints, prefixed either by gt or lte which translates to greater than and less than or equal, respectively.

The list of available breakpoints: