Opattern is based on the principles of responsive design: Instead of having a single static layout, our layouts adapt to fit the screen.
Responsive layouts should:
- Keep users focused on the most important thing in an interface
- Make use of the interface’s entire canvas
- Optimize menus, controllers, and navigation based on the device
Principles of responsive design
Relative sizing
Use relative proportions to assign width, don't use pixels. For example, instead of assigning an element to be 300px wide, use a percentage (25%). That way, the content adapts nicely and scales to any width. Better yet: think in terms of the grid layout and assign width as a partition of twelve columns.
Conditional styling
Modern browsers can detect the user’s viewport size, which allows them to apply styles based on different conditions.
Our components are built with mobile-first CSS, which follows the idea of progressive enhancement. This means we style layouts for a small screen first. If the user has a larger screen and a web browser that understands media queries, we apply CSS overrides to take advantage of a wider canvas.
![]()
Design for different sizes and use media queries for conditional styling.
![]()
Don’t forget to design the mobile experience too.
Design for different sizes and use media queries for conditional styling.
Don’t forget to design the mobile experience too.
Media query reference
| Sass variable | Default range | Description |
|---|---|---|
$small-only | 0px - 640px | Only for small screens, like smartphones |
$small-up | 0px and up | For screens of any size |
$medium-only | 641px - 1024px | Only for medium screens, like large phones or tablets |
$medium-up | 641px and up | For any screen larger than a tablet |
$large-only | 1025px - 1440px | Only for large screens, like laptop or desktop computers |
$large-up | 1025px and up | For any screen larger than a laptop |
$xlarge-only | 1441px to 1920px | Only high-resolution computer screens, like 4K or retina displays |
$xlarge-up | 1441px and up | For any high-resolution screen |
$xxlarge-only | 1921px - 99999999px | Only for full-screen, high-resolution devices (a very low percentage of users |
$xxlarge-up | 1921px and up | Functionally identical to the $xxlarge-only media query |
$landscape | - | For screens where the device is rotated horizontally (only available for smartphones and tablets) |
$portrait | - | For screens where the device is rotated vertically (only available for smartphones and tablets) |
