Gallery Module

The Gallery module provides a flexible grid for displaying images or content items with configurable gaps and responsive heights. It supports stackable layouts on mobile devices and allows custom spacing via registered gap names.

Signature:

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

Example:

@include termeh.use-gallery();

Dependencies

Gallery module uses the following Termeh global var():

Component	Type	Usage	Default
gap → micro	Number	Default gap between gallery items	8px
gallery → height	Number	Default item height in gallery	300px
gallery → height-tablet	Number	Item height for tablet screens	200px
gallery → height-mobile	Number	Item height for mobile screens	100px

Modifiers

• .is-gapless → removes all spacing between items
• .is-<gap>-gap → applies a registered gap as spacing
• .is-stackable → stacks items vertically on mobile

Child Elements

• .item → individual gallery item
  • .thumbnail → applied to nested or custom elements representing an image

Child Modifiers

• .is-block → makes item full width with automatic height