Layout

• LLMs

Responsive layout, breakpoints and grids.

Overview

Layouts in Nebula respond to screen size through shared breakpoints and media queries, so every product changes layout at the same points.

Breakpoints

Responsive tokens define breakpoints and media queries. They are based on screen size, not device type. Therefore, a mobile device or tablet will change layout based on breakpoints.

Theme tokens

Token	Default Value
breakpoints.small	480px
breakpoints.medium	768px
breakpoints.large	1208px

Media Queries

Theme tokens

Token	Default Value
mediaQueries.largeAndUp	@media screen and (min-width: 1208px)
mediaQueries.mediumAndUp	@media screen and (min-width: 768px)
mediaQueries.smallAndUp	@media screen and (min-width: 480px)