Gaper Module

The Gaper module provides a flexible container for aligning and spacing elements. It supports both horizontal and vertical layouts, configurable gaps, dividers, and responsive stacking.

Child

Filler

Child

Child

Signature:

@mixin use-gaper($gaps: ());

Example:

@include termeh.use-gaper(("small", "medium", "large"));

Module:

This module is registered as gaper in the presented modules.

Dependencies

Gaper module uses the following Termeh global var():

Component	Type	Usage	Default
base → separator	Color	Default background color for separator elements	null
gap → micro	Number	Default gap between gaper items	8px

Modifiers

• .is-gapless → removes spacing between children
• .is-auto → applies auto margins instead of gutters/dividers
• .is-stacked → sets vertical layout
• .is-stacked-reverse → sets reversed vertical layout
• .is-<align>-align → sets vertical alignment
• .is-<justify>-justify → sets horizontal distribution
• .is-<gap>-gap → applies a registered gap as spacing
• .is-<device>-stacked → stacks layout at a specific breakpoint
• .is-<device>-stacked-reverse → reversed vertical layout at a breakpoint
• .is-<device>-<align>-align → responsive vertical alignment
• .is-<device>-<justify>-justify → responsive horizontal distribution

Child Elements

• .gutter → empty spacing element
• .divider → thin line separator

Child Modifiers

• .filler → flexible spacer that grows to fill remaining space