Responsiveness

Breakpoints

Breakpoint	Minimum Width
xs	0
sm	576px
md	768px
lg	992px
xl	1200px
2xl	1600px
3xl	1920px

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. This is a (very logical) CSS limitation.

:root {
  --tng-breakpoint-sm: 576px;
  --tng-breakpoint-md: 768px;
  --tng-breakpoint-lg: 992px;
  --tng-breakpoint-xl: 1200px;
  --tng-breakpoint-2xl: 1600px;
  --tng-breakpoint-3xl: 1920px;
}

Container Queries

The good news is we have a work-around for this limitation: Container Queries.

@container tng-root style(--tng-viewport-size-md: var(--tng-breakpoint-md)) {
  /* Styles for medium screens and above */
}

Caution

Container style queries don’t work in Firefox yet. Firefox is marked as “Priority 2: graceful degradation range” in our browser support. This means for responsive design you’ll have to decide if you want to support Firefox or not.

• If responsive behaviour is critical towards UX, you should use media queries.
• If responsive behaviour is nice-to-have, you can use container queries and let Firefox users miss out on it. They will get the mobile experience on all screen sizes.

Built-in Responsiveness

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

Layouts

• Containers

Utilities

• Visibility