Responsive Breakpoints
Our design system follows a mobile-first approach, meaning that styles are optimized for smaller screens by default. As the screen size increases, additional styles are applied to enhance the design for larger devices. This is achieved using media queries with min-width, ensuring that styles apply from the specified width and up.
Here’s a table to explain the breakpoints used in our system:
| Breakpoint Name | min-width Value | Description |
|---|---|---|
| default | 0px | Applies to all devices, starting from 0px. |
| xs | 480px | Styles apply to screens 480px and wider. |
| sm | 568px | Styles apply to screens 568px and wider. |
| md | 768px | Styles apply to screens 768px and wider. |
| lg | 1024px | Styles apply to screens 1024px and wider. |
| xl | 1360px | Styles apply to screens 1360px and wider. |
| xxl | 1440px | Styles apply to screens 1440px and wider. |
How Pillar UI Makes Breakpoints Effortless
- Grid Component: Support breakpoints to ensure layouts adapt seamlessly to any screen size.
- Fluid Style: Dynamically adjusts font sizes and spacing based on the viewport, ensuring readability and balance across all devices.