Breakpoints

To deliver an optimal and seamless user experience, our components are designed to be responsive, utilizing different breakpoints to target different screen sizes and deliver the best possible user experience.

To provide a consistent user experience, we strongly recommend using the same breakpoint values in your application, as the ones used in our components. Breakpoints are exported from the @kinsta/stratus package.

import { breakpoints} from '@kinsta/stratus'
Copy

#Available breakpoints

Breakpoint values don't specifically target every device, rather they offer solid foundation for creating layouts that work on almost any device.

Stratus utilizes and provides five breakpoints, for building responsive layouts:

#Usage

Every breakpoint has a media queries that can be used to target different screen sizes with preferred styling approach.

Each breakpoint has 'up' and 'down' media queries, where 'up' means that the breakpoint is applied from the breakpoint value and up (mobile first approach), and 'down' means that the breakpoint is applied from the breakpoint value and down (desktop first approach).

We strongly recommend to choose one approach either mobile first or desktop first and stick to it throughout your application.

For any custom media queries, you can directly use the breakpoint values from the breakpoints.values object.

#Mobile first pattern

import { css } from '@emotion/react'
import { breakpoints } from '@kinsta/stratus'


const mobileFirstStyles = css({

  backgroundColor: 'red',

  [breakpoints.m.up]: {
    backgroundColor: 'green',
  },

  /** Which is the same as
  ['@media (min-width: 768px)']: { backgroundColor: 'green' }
  */
})
Copy

#Desktop first pattern

import { breakpoints,
} from '@kinsta/stratus'

const desktopFirstStyles = {

  backgroundColor: 'green',

  [breakpoints.m.down]: {
    backgroundColor: 'red',
  },
}
Copy

#Custom composed media queries using breakpoints values

const customComposedStyles = {

  backgroundColor: 'red',

  [`@media (min-width: ${breakpoints.values.m}px) and (max-width: ${breakpoints.values.l}px)`]: {
    backgroundColor: 'green',
  },
}
Copy