Breakpoints

Breakpoints are the screen widths where layouts change. Each one applies from its width upward, so md covers 768px and wider. Components use the same widths, and the bpSm, bpMd, bpLg and bpXl endings on component tokens match sm through xl.

CSS can’t read a custom property inside a media query, so write the width itself in @media, using a value from the table:

@media (min-width: 768px) {
  .tile {
    grid-template-columns: 1fr 1fr;
  }
}

In JavaScript, read the width from the token package instead of typing it:

import tokens from '@fbin-web/neighborhood-tokens/dist/neighborhood.tokens.json' with { type: 'json' };

const desktop = window.matchMedia(`(min-width: ${tokens.breakpoint.lg.$value})`);