Predefined breakpoints via custom-media.

Note: This section is not automatically updated in case the actual breakpoints are changed. Please make sure to update both the source file and the markdown when making changes. Also, double check whether the the values here are up-to-date and correct.

New Breakpoints

Note: These breakpoints are designed for a mobile-first approach. Furthermore, max-width should only be used in special cases in implementation. Specifically when some CSS rules are better off not being shared with larger screen sizes. If you find yourself often overwriting smaller screen styles that's possibly an opportunity to restrict those with max-width - in some cases with a media query combining both min-width and max-width. Otherwise mobile-first with min-width should be always preferred.

const breakpointStyles = { display: 'flex', listStyle: 'none', flexWrap: 'wrap', padding: 0, flexDirection: 'column' };
const breakpoints = {
  '--screen-XXS-max': '(max-width: 639px)',

  '--screen-XS-min': '(min-width: 640px)',
  '--screen-XS-max': '(max-width: 767px)',

  '--screen-S-min': '(min-width: 768px)',
  '--screen-S-max': '(max-width: 1023px)',

  '--screen-M-min': '(min-width: 1024px)',
  '--screen-M-max': '(max-width: 1279px)',

  '--screen-L-min': '(min-width: 1280px)',
  '--screen-L-max': '(max-width: 1339px)',

  '--screen-XL-min': '(min-width: 1440px)',
  '--screen-XL-max': '(max-width: 1979px)',

  '--screen-XXL-min': '(min-width: 1980px)',
};

<dl style={breakpointStyles}>
  {Object.entries(breakpoints).map(([name, query]) => {
    return (
      <React.Fragment key={name}>
        <dt>
          <Code>{name}</Code>
        </dt>
        <dd>
          <Code>{query}</Code>
        </dd>
      </React.Fragment>
    );
  })}
</dl>;

For use in projects

Requires postcss-custom-media

@media (--screen-M-min) {
  ...;
}

Deprecated Breakpoints

Note: These breakpoints are still used in projects and in components inside this library, but should be phased out as soon as possible.

const breakpointStyles = { display: 'flex', listStyle: 'none', flexWrap: 'wrap', padding: 0, flexDirection: 'column' };
const breakpoints = {
  // measures below are deprecated
  '--small-device': '(max-width: 825px)',
  '--medium-device': '(min-width: 826px)',
  '--large-device': '(min-width: 1280px)',
};

<dl style={breakpointStyles}>
  {Object.entries(breakpoints).map(([name, query]) => {
    return (
      <React.Fragment key={name}>
        <dt>
          <Code>{name}</Code>
        </dt>
        <dd>
          <Code>{query}</Code>
        </dd>
      </React.Fragment>
    );
  })}
</dl>;