Breakpoints
The Design 2.0 framework has several built-in breakpoints that can be used for responsive designs.
| Title | Abbreviation | Width (px) | Device |
|---|---|---|---|
| Extra Small | xs | 480 | Smartphone, Landscape |
| Small | sm | 768 | Tablet, Portrait |
| Medium | md | 992 | Tablet, Landscape |
| Large | lg | 1200 | Laptop, Desktop |
| Extra Large | xl | 1600 | Desktop, big display |
| Extra Extra Large | xxl | 1800 | Desktop, really big display |
Additional Notes:
- The abbreviations (e.g., "xs," "s") are used in CSS classes, particularly in the grid-related classes.
- The breakpoint widths are intended to be helpful, sensible defaults. They can (and should) be overridden if a design requires different breakpoints.