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 variableDefault rangeDescription
$small-only0px - 640pxOnly for small screens, like smartphones
$small-up0px and upFor screens of any size
$medium-only641px - 1024pxOnly for medium screens, like large phones or tablets
$medium-up641px and upFor any screen larger than a tablet
$large-only1025px - 1440pxOnly for large screens, like laptop or desktop computers
$large-up1025px and upFor any screen larger than a laptop
$xlarge-only1441px to 1920pxOnly high-resolution computer screens, like 4K or retina displays
$xlarge-up1441px and upFor any high-resolution screen
$xxlarge-only1921px - 99999999pxOnly for full-screen, high-resolution devices (a very low percentage of users
$xxlarge-up1921px and upFunctionally 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)