Responsiveness

Breakpoints

Breakpoint	Minimum Width
xs (default)	–
sm	576px
md	768px
lg	992px
xl	1200px
2xl	1600px

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 smallest screens (xs), then layer the larger breakpoints on top with min-width queries. In component work you rarely target xs 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: 576px;
  --tng-breakpoint-md: 768px;
  --tng-breakpoint-lg: 992px;
  --tng-breakpoint-xl: 1200px;
  --tng-breakpoint-2xl: 1600px;
}

A breakpoint realignment is staged

A future major will realign these tiers to design’s shared grid (sm 390, lg 1024, xl 1440, 2xl 1920). That realignment already powers the opt-in .tng-grid and full-width container primitives, but it is not the system default yet — the values above are what every component and utility switches on today. Don’t build against the grid-aligned tiers directly; adopt them through those primitives.

Built-in Responsiveness

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

Fundamentals

• Typography

Layouts

• Container

Components

• Modal

Utilities

• Display