# Breakpoints

The design system's layout, utility, and typography classes are built with responsive web design in mind and is built to be **mobile-first**.

## Breakpoints

Use the breakpoint prefixes `sm`, `md`, `lg`, and `xl` to apply styles at different viewport sizes. For example: `.ds-u-lg-display--none` sets an element's `display` property to `none` when the viewport is `1024px` or wider.

| Prefix | Breakpoint          | Sass variable     | Description                  |
| ------ | ------------------- | ----------------- | ---------------------------- |
|        | `min-width(0px)`    | `$media-width-xs` | Viewports `0px` and wider    |
| `sm`   | `min-width(544px)`  | `$media-width-sm` | Viewports `544px` and wider  |
| `md`   | `min-width(768px)`  | `$media-width-md` | Viewports `768px` and wider  |
| `lg`   | `min-width(1024px)` | `$media-width-lg` | Viewports `1024px` and wider |
| `xl`   | `min-width(1280px)` | `$media-width-xl` | Viewports `1280px` and wider |

### What supports a breakpoint prefix

In order to reduce code bloat, not everything supports a breakpoint prefix. Only the items below support breakpoint prefixes.

- [Display](/utilities/display)
- [Flexbox](/utilities/flexbox#responsive-flexbox)
- [Float](/utilities/float#responsive-float)
- [Font size](/utilities/font/font-size#responsive-font-sizes)
- [Grid](/utilities/layout-grid/#responsive-grids)
- [Margin](/utilities/margin#responsive-margins)
- [Padding](/utilities/padding#responsive-padding)
- [Text align](/utilities/text/text-align#responsive-text-alignment)
- [Typography](/foundation/typography/overview#responsive-typography)
- [Visibility](/utilities/visibility#responsive-visibility)

Additional usage examples are available on the pages listed above.