Layout
The responsive system is designed around three core layout sizes that accommodate the vast majority of user devices. Rather than targeting specific devices, the system focuses on content-driven breakpoints that ensure optimal readability and usability across all screen sizes.
Principles
Mobile-First Approach
- Progressive Enhancement: Start with mobile design and enhance for larger screens
- Touch-First: All interactions designed for touch before mouse/keyboard
- Performance Priority: Smallest screens get the fastest, most efficient experience
- Content Priority: Essential content and actions are prioritized on small screens
Flexible Grid System
- Fluid Containers: Content containers scale smoothly within breakpoint ranges
- Consistent Margins: 20px margins on small, 40px on medium/large layouts
- Adaptive Typography: Font sizes and spacing adjust appropriately for each layout
- Flexible Components: All components work seamlessly across all layout sizes
Layout System
12-Column Grid
The entire layout system is built on a 12-column grid. This provides the flexibility to create a wide variety of layouts that are responsive by default.
Masonry Grid
For layouts where items have varying heights, the masonry grid provides a way to create a "waterfall" effect, where items are arranged in columns and flow to fill the available space.
Implementation
CSS Implementation
<!-- Responsive Grid (semantic) -->
<div className="grid-cols-responsive-3" style={{ columnGap: '30px', rowGap: '30px' }}>
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>
<!-- Masonry Grid -->
<div className="grid-masonry" style={{ columnCount: 3 }}>
<div className="card">Card 1</div>
<div className="card">Card 2</div>
<div className="card">Card 3</div>
</div>Spacing Rules
- Inter-column Gap: Always 30px between adjacent columns
- Edge Treatment: The grid container has no internal padding.
- Responsive Scaling: Use semantic responsive grid helpers (e.g., grid-cols-responsive-2/3/4).
- Content Alignment: Content within columns aligns to column boundaries.
This Page as Example
This style guide page demonstrates our 4-column layout system in action. The content spans 3 columns on the left, while the navigation sidebar occupies 1 column on the right, creating an optimal reading experience with easy access to navigation.
Layout Structure
- Content: 3 columns (708.75px - 821.25px)
- Navigation: 1 column (216.25px - 253.75px)
- Gap: 20px between content and navigation
- Responsive: Collapses to single column on smaller screens
Benefits
- Wide content area for better readability
- Navigation always visible on the right
- Optimal line length for reading (45-75 characters)
- Consistent spacing throughout the interface
- Scalable system for different content types