Breakpoints - Responsive
Breakpoints define the points at which your interface should adapt to different screen sizes. They are essential for achieving a truly responsive experience across all devices.
- Breakpoints allow you to adjust the layout based on the available width, activating specific styles as the viewport grows. They are the foundation for building interfaces that look good on mobiles, tablets, and desktops.
- Mobile first: We use
@mediaqueries withmin-widthto apply conditional styles from a minimum size upwards. This follows themobile-firstphilosophy, where you start with a simple base for mobiles and progressively enhance it.
Available Breakpoints
| Breakpoint | Prefix | Dimension | px |
|---|---|---|---|
| Mobile | < 30 rem | < 480 px | |
| Small | sm | > 30 rem | > 480 px |
| Medium | md | > 48 rem | > 768 px |
| Large | lg | > 62 rem | > 992 px |
| Extra large | xl | > 80 rem | > 1280 px |
| Extra extra large | xxl | > 96 rem | > 1536 px |
Responsive
The helpers that use breakpoints are as follows:
Display
Examples
| Class | Description |
|---|---|
| Hides the element (display: none) for screens larger than md. |
| Hides the element for mobile screens and makes it a flex container (display: flex) for screens larger than md. |
Spaces
Examples
| Class | Description |
|---|---|
| Adds a padding-top of space 2 when the screen is larger than sm. |
| Adds a padding-bottom of space 3 for mobile screens and sets the padding-bottom to space 2 when the screen is larger than lg. |
Flex columns
Examples
| Class | Description |
|---|---|
| Sets the component's width to a 6/12 ratio for screens larger than md. |
| Sets the component's width to a 12/12 ratio (i.e., 100%) for mobile screens and a 4/12 ratio when the screen is larger than md. |