ComfortCSS Container

Modern container system with container queries, fluid widths, and full-width sections.

Installation

npm install @comfortcss/container @comfortcss/tokens

Usage

@import '@comfortcss/reset';
@import '@comfortcss/tokens';
@import '@comfortcss/container';

Examples

Basic container

<div class="container">
    <h1>Hello, World!</h1>
</div>

Width variants

<div class="container container-sm">...</div>
<div class="container container-lg">...</div>
<div class="container container-full">...</div>

Padding modifiers

<div class="container container--padding-lg">...</div>
<div class="container container--padding-none">...</div>

API

Container classes

| Class | Description| |-------|------------| | .container | Base container with fluid max-width | | .container-xs, .container-sm, .container-md, .container-lg, .container-xl, .container-2xl | Width variants | | .container-full | 100% width, no max-width | | .container-fluid | Fluid width with min/max constraints |

Modifiers

| Class | Description| |-------|------------| | .container--padding-{none,xs,sm,md,lg,xl} | Padding size | | .container--center, .container--center-h, .container--center-v | Alignment | | .container--bleed | Bleed effect | | .container--nested | Resets max-width and padding |

Container query classes

| Class | Description| |-------|------------| | .cq-adaptive | Typography adapts to container width | | .cq-spacing | Padding adapts to container width | | .cq-side-by-side | Flex side-by-side layout | | .cq-image | Image float based on container width | | .cq-sm-adaptive, .cq-md-adaptive, .cq-lg-adaptive | Named container variants |

Customization

Override any token from @comfortcss/tokens:

:root {
    --breakpoint-sm: 480px;
    --breakpoint-xl: 1200px;
    --space-4: 1.5rem;
}

Dependencies

• @comfortcss/tokens

License

MIT