Labs projects are experimental packages available for early feedback.

Responsive Layout - Viewport

By optionally importing the responsive viewport layout module, you extend the nve-layout system using CSS Media Queries for adaptive responsive design based on the browser viewport width rather than the container element's width.

Learn more about media queries in this Mozilla MDN documentation.

The responsive layout API applies conditional styling based on browser viewport width. Supported features include gap, padding, row vs column, reversing flex direction, and varying grid structure across defined pixel width breakpoints.

The following set of viewport breakpoint-values defines:

sm = 576px
md = 768px
lg = 1024px
xl = 1280px
xxl = 1440px

The at-symbol-based @breakpoint-size|... API adds the breakpoint size before the layout modifier.

Conditional gap sizing example: nve-layout="row @sm|gap:xxxs @md|gap:md @lg|gap:xxxl". The size value after the : corresponds to one of the nine spacing/padding system values.

Viewport-based responsive layout responds to the browser window size, not the container size. Use Container Queries if you need container-aware responsive behavior.

Responsive Gap Sizing

The following media query breakpoints are available for gap, replace ... with one of the 9 gap spacing values:

@sm|gap:...
@md|gap:...
@lg|gap:...
@xl|gap:...
@xxl|gap:...

Responsive Padding

The following media query breakpoints are available for padding, replace ... with one of the 9 padding values:

@sm|pad:...
@md|pad:...
@lg|pad:...
@xl|pad:...
@xxl|pad:...

Breakpoints for Switching Flexbox Layout Direction

The following media query breakpoints are available for swapping flex direction:

Horizontally

@sm|row
@md|row
@lg|row
@xl|row
@xxl|row

Vertically

@sm|column
@md|column
@lg|column
@xl|column
@xxl|column

Reverse Direction

Also, you can use the following syntax for flipping the flex direction:

@...|row-reverse
@...|column-reverse

Responsive Grid

You can vary grid structure based on viewport size using the following syntax with nve-layout=grid...:

Or:

Responsive Grid Parent

Responsive Grid Items

Hiding Elements Based on Viewport Size

Since hiding elements only affects the display of the element itself and not the layout of its children, responsive visibility control uses the nve-display attribute.

Element visibility (hiding) uses the separate nve-display attribute rather than nve-layout. This distinction exists because visibility control only affects the element itself, while layout properties affect how the parent arranges children.

The following attributes are available for hiding elements at specific viewport breakpoints and below:

nve-display="hide"
nve-display="@sm|hide"
nve-display="@md|hide"
nve-display="@lg|hide"
nve-display="@xl|hide"
nve-display="@xxl|hide"

You may want to now show elements at smaller viewport widths. The following attributes are available for showing elements at specific viewport breakpoints and below:

nve-display="@sm|show"
nve-display="@md|show"
nve-display="@lg|show"
nve-display="@xl|show"
nve-display="@xxl|show"

Summary

The viewport query responsive system allows elements to adapt based on the browser window width using the @ prefix. Remember:

Layout properties (gap, padding, row/column, grid) use nve-layout
Visibility control (hide/show) uses nve-display
Viewport queries respond to the entire browser window
Breakpoints range from sm (576px) to xxl (1440px)

Example combining both: