Skip to main content
Design system

Breakpoints

WPDS has 5 breakpoints with the following values

  • sm: 768px
  • md: 900px
  • lg: 1024px
  • xl: 1280px
  • xxl: 1440px

WPDS Media At-Rules

NameValueDescription
sm(max-width: 767px)Targets the small breakpoint only
md(min-width: 768px) and (max-width: 899px)Targets the medium breakpoint only
lg(min-width: 900px) and (max-width: 1023px)Targets the large breakpoint only
xl(min-width: 1024px) and (max-width: 1279px)Targets the extra-large breakpoint only
xxl(min-width: 1280px) and (max-width: 1440px)Targets the extra-extra-large breakpoint only
minSm, notSm(min-width: 768px)A "mobile first" style breakpoint that targets the small breakpoint and above
minMd, notMd(min-width: 900px)A "mobile first" style breakpoint that targets the medium breakpoint and above
minLg, notLg(min-width: 1024px)A "mobile first" style breakpoint that targets the large breakpoint and above
minXl, notXl(min-width: 1280px)A "mobile first" style breakpoint that targets the extra-large breakpoint and above
minXxl, notXxl(min-width: 1441px)A "mobile first" style breakpoint that targets the extra-extra-large breakpoint and above
maxSm(max-width: 767px)A "desktop first" style breakpoint that targets the small breakpoint and below
maxMd(max-width: 900px)A "desktop first" style breakpoint that targets the medium breakpoint and below
maxLg(max-width: 1024px)A "desktop first" style breakpoint that targets the large breakpoint and below
maxXl(max-width: 1280px)A "desktop first" style breakpoint that targets the extra-large breakpoint and below
maxXxl(max-width: 1441px)A "desktop first" style breakpoint that targets the extra-extra-large breakpoint and below

Using Rules

Responsive Variants

Stitches recommends defining variants that are applied responsively to keep component styles immutable.

Breakpoints in Style Objects

While not recommended it is possible to use breakpoints inline

Using the Responsive Screen Size React Hook

The useResponsiveScreenSize hook can be used to get the current screen size and use it in your components.

An example using the hook

Our Spectrum render engine uses the hook to render a drawer on small screens and a dialog on larger screens. This is a simplified version of the code used in the Spectrum render engine.

import {
  useResponsiveScreenSize,
  screenSizesEnums,
  Dialog,
  Drawer,
} from "@washingtonpost/wpds-ui-kit";

export default function Example() {
  const screenSize = useResponsiveScreenSize();

  return (
    <div>
      {screenSize === screenSizesEnums.small ? (
        <Drawer>{/* Drawer content */}</Drawer>
      ) : (
        <Dialog>{/* Dialog content */}</Dialog>
      )}
    </div>
  );
}