Responsive design

Our products should look great, no matter what device you’re using.

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.

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)