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
}