Responsiveness

Breakpoints

Breakpoint	Minimum Width
xs (default)	–
sm	390px
md	768px
lg	1024px
xl	1440px
2xl	1920px

xs is the default, not a step you target: unqualified styles apply from the smallest screens up, so there is no --tng-breakpoint-xs and no media query to write for it.

Build mobile-first from sm — author your base (no-media-query) styles for the sm layout, which also covers xs, then layer the larger breakpoints on top with min-width queries. Design defines xs as its own breakpoint (for example, the container’s 20px side margin below 390px), but in component work you rarely target it directly.

You can use these breakpoints in your CSS using media queries:

@media (min-width: 768px) {
  /* Styles for medium screens and above */
}

Note

We have provided CSS custom properties for these breakpoints, but they cannot be used in media queries as they get evaluated before CSS custom properties are available.

:root {
  --tng-breakpoint-sm: 390px;
  --tng-breakpoint-md: 768px;
  --tng-breakpoint-lg: 1024px;
  --tng-breakpoint-xl: 1440px;
  --tng-breakpoint-2xl: 1920px;
}

Built-in Responsiveness

Some of our styleguide is responsive out-of-the-box.

Foundation

• Typography

Layouts

• Container

Components

• Modal

Utilities

• Display