Breakpoints
Handling restructuring for different resolutions and devices.
Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across different devices or viewport sizes.
Core concepts
Breakpoints form the foundation of responsive design, allowing layouts to adapt at specific viewport or device sizes using CSS media queries.
Embracing a desktop-first approach, the goal is to start styling for desktop screens and letting zenCSS format for tablet and mobile, improving development time, and enhancing user experience.
Available breakpoints
The framework includes default breakpoints that are used for building responsive designs. These are modifiable when using the source Sass files.
| Breakpoint | Dimensions |
|---|---|
| Extra small | <576px |
| Small | ≥576px |
| Medium | ≥768px |
| Large | ≥992px |
| Extra large | ≥1200px |
| Extra extra large | ≥1400px |
The Zen Test
Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.
So you can be assured it "just works". Try it out below.