BRAID
Braid Logo
 

breakpoints

v30.1.0

Jul 8, 2021

  • Add wide breakpoint of 1200px

    This adds support for wide to the following touchpoints:

    • Responsive values, e.g.
      { mobile: 'small', wide: 'large' }
    • Responsive range props, e.g.
      <Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
    • The responsiveStyle function, e.g.
      export const className = style(responsiveStyle({ wide: '...' }));
    • The breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.
      {
  mobile: 0,
  tablet: 740,
  desktop: 940,
  wide: 1200
}

v30.0.0

Jun 21, 2021

  • Add breakpoints object for accessing standard breakpoint values

    The breakpoints object provides a named set of screen sizes that form the basis of all responsive rules in Braid, available in the following format:

    {
  mobile: 0,
  tablet: 740,
  desktop: 992
}