Container Module

The Container module provides a flexible wrapper with configurable maximum widths and padding. It supports responsive breakpoints (desktop, widescreen, fullhd) and allows custom paddings via registered gap names.

Container content

Signature:

@mixin use-container($paddings: ());

Example:

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

Dependencies

Container module uses the following Termeh global var():

Component	Type	Usage	Default
gap → macro	Number	Default container padding and bottom margin	1.6em
container → desktop	Number	Max-width for desktop and smaller screens	960px
container → widescreen	Number	Max-width for widescreen devices	1200px
container → fullhd	Number	Max-width for full-HD and larger screens	1500px

Modifiers

• .is-fullwidth → makes the container span 100% width
• .is-<gap>-padded → applies a registered gap as spacing