Display your content with responsive breakpoints
Breakpoints
Mytril makes it easy to create responsive layouts with predefined breakpoints for different screen sizes. These breakpoints help you control how your content is displayed across devices, ensuring that your application is optimized for everything from small tablets to large desktop screens.
Breakpoint key guide:
| Breakpoint prefix | Minimum with | CSS |
|---|---|---|
| xs | 28rem (448px) | @media (width >= 28rem) |
| sm | 40rem (640px) | @media (width >= 40rem) |
| md | 48rem (768px) | @media (width >= 48rem) |
| lg | 64rem (1024px) | @media (width >= 64rem) |
| xl | 80rem (1280px) | @media (width >= 80rem) |
| 2xl | 96rem (1536px) | @media (width >= 96rem) |
| 3xl | 112rem (1792px) | @media (width >= 112rem) |
With these breakpoints, you can create responsive components that adjust seamlessly depending on the user’s device. You can target these breakpoints in your CSS or JavaScript, or use them directly in your Mytril components to define how content is displayed at different sizes.
Example usage with Mytril:
Mytril’s breakpoints can be used to easily define media queries or set conditional styles based on the screen size directly on your html.
Default breakpoint values:
Mytril provides the following default breakpoint values in the mytril.config.js file:
Working mobile-first
Mytril uses a mobile-first breakpoint system, similar to that to which you may be accustomed in other frameworks such as Tailwind or Bootstrap.
This means that non-prefixed utilities (such as uppercase) take effect on all screen sizes, while prefixed utilities (such as md:uppercase) only take effect at the specified breakpoint and above.
Customizing breakpoints:
You can also modify or add new breakpoints to suit the specific needs of your project. Simply update the mytril.config.js file with your preferred values:
With this flexibility, Mytril allows you to fine-tune the responsiveness of your application to ensure a seamless experience on all screen sizes, from small mobile devices to extra-large desktops.
Mobile breakpoint
Mytril directly proposes a breakpoint to predefine when you switch from a mobile/laptop interface. With certain Mytril components, such as BottomNavigation, this allows you to define a display state according to the mobile view and the classic view.
You can customize this parameter in the mytril.config.js file, allowing you to adapt it to your design system.