Section 5
Layout & Responsiveness
Breakpoints, grid systems, and responsive design principles for all Manateq digital products.
Breakpoints
Mobile
< 640px
sm:Tablet
640px - 1023px
md:Desktop
1024px - 1439px
lg:Large Desktop
≥ 1440px
xl:| Breakpoint | Range | Columns | Gutter | Margin |
|---|---|---|---|---|
| Mobile | < 640px | 4 | 16px | 16px |
| Tablet | 640px - 1023px | 8 | 24px | 24px |
| Desktop | 1024px - 1439px | 12 | 24px | 32px |
| Large Desktop | ≥ 1440px | 12 | 32px | auto |
Grid System
A 12-column grid system provides flexibility for various layout needs. Content areas should align to grid columns.
12-Column Grid Visualization
1
2
3
4
5
6
7
8
9
10
11
12
Common Layout Patterns
Full Width (12 columns)
Two Equal Columns (6 + 6)
Sidebar + Content (3 + 9)
Three Equal Columns (4 + 4 + 4)
Responsive Patterns
Navigation
- Desktop: Horizontal top navigation bar
- Tablet: Collapsed to hamburger menu
- Mobile: Full-screen overlay menu
Side Menu
- Desktop: Permanently visible sidebar
- Tablet: Collapsible drawer
- Mobile: Hidden, accessible via toggle
Tables
- Desktop: Full table with all columns
- Tablet: Horizontal scroll if needed
- Mobile: Card-based layout or stacked rows
Forms
- Desktop: Multi-column layouts
- Tablet: Two-column where appropriate
- Mobile: Single column, stacked fields
Container Widths
| Content Type | Max Width | Usage |
|---|---|---|
| Full-width container | 1280px | Main content area |
| Narrow container | 768px | Article content, forms |
| Reading width | 65ch | Long-form text for readability |