WPDS has 5 breakpoints with the following values
- sm: 768px
- md: 900px
- lg: 1024px
- xl: 1280px
- xxl: 1440px
WPDS Media At-Rules
| Name | Value | Description |
|---|---|---|
| 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.
The hook is only available in the browser and will return
unknown on the server.
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>
);
}