Breakpoints

Variables

desktop-wide:
  max-width: 100vw
  min-width: 1440px
  content: 1440px
  col: xl
  default: '{{!core.mobileFirst}}'
  bleed: 1600px
desktop:
  max-width: 1439px
  min-width: 1024px
  content: 1024px
  col: lg
tablet:
  max-width: 1023px
  min-width: 768px
  content: 768px
  col: md
mobile:
  max-width: 767px
  min-width: 320px
  content: 100%
  col: sm

There is a breakpointHelper() function in the lib/ that is available for use when building out responsive-based mixins. The functions signature requires you to pass in an Object of styles as the first argument and the global config as the last argument. Look at the container.js mixin or grid.js mixin for an example.