Layout
Grid system and layout utilities for building responsive interfaces.
Containers
Two container types: .z-container (max-width breakpoints) and .z-container-fluid (full width).
.z-container (centered, max-width at breakpoints)
.z-container-fluid (100% width)
<div class="z-container">
<!-- Centered content with max-width -->
</div>
<div class="z-container-fluid">
<!-- Full-width content -->
</div>
Container Max-Widths
| Breakpoint | Max-Width |
|---|---|
<576px |
100% |
≥576px |
540px |
≥768px |
720px |
≥992px |
960px |
≥1200px |
1140px |
≥1400px |
1320px |
Grid System
Rows and columns build layouts. Use .z-row as wrapper, .z-col-* for columns.
z-col-md-8
z-col-md-4
z-col-md-4
z-col-md-4
z-col-md-4
z-col-md-3
z-col-md-3
z-col-md-3
z-col-md-3
<div class="z-row">
<div class="z-col-md-8">8 columns</div>
<div class="z-col-md-4">4 columns</div>
</div>
<div class="z-row">
<div class="z-col-md-4">4 columns</div>
<div class="z-col-md-4">4 columns</div>
<div class="z-col-md-4">4 columns</div>
</div>
Breakpoints
Column classes apply at specified viewport widths. Mobile-first: unclassed columns stack, then expand at breakpoints.
| Prefix | Breakpoint | Viewport Width |
|---|---|---|
.z-col |
Mobile (default) | < 768px |
.z-col-md-* |
Tablet | ≥ 768px |
.z-col-lg-* |
Desktop | ≥ 992px |
Responsive Stacking Example
Columns stack on mobile, become horizontal at tablet width.
Stacks on mobile, 50% on tablet
Stacks on mobile, 50% on tablet
<div class="z-row">
<div class="z-col z-col-md-6">Left column</div>
<div class="z-col z-col-md-6">Right column</div>
</div>
Column Sizing
12-column grid. Specify column span (1-12) for each breakpoint.
| Class | Columns | Width |
|---|---|---|
.z-col-*-1 |
1 | 8.33% |
.z-col-*-2 |
2 | 16.67% |
.z-col-*-3 |
3 | 25% |
.z-col-*-4 |
4 | 33.33% |
.z-col-*-5 |
5 | 41.67% |
.z-col-*-6 |
6 | 50% |
.z-col-*-7 |
7 | 58.33% |
.z-col-*-8 |
8 | 66.67% |
.z-col-*-9 |
9 | 75% |
.z-col-*-10 |
10 | 83.33% |
.z-col-*-11 |
11 | 91.67% |
.z-col-*-12 |
12 | 100% |
Spacing Utilities
Use CSS custom properties for consistent spacing. --z-gutter (1.5rem) for grid spacing, --z-cut (12px) for chamfers.
/* Use in custom styles */
.element {
margin-bottom: var(--z-gutter);
padding: var(--z-cut);
}
Display Utilities
Text alignment and font utilities.
| Class | Purpose |
|---|---|
.text-center |
Center-align text |
.text-right |
Right-align text |
.text-mono |
Use monospace font |
.text-muted |
Muted text color |
.text-primary |
Primary accent color |
.text-danger |
Danger color |
.text-success |
Success color |