Responsive

Utilities include helpers for responsive layout functionality.

Responsive UI

Responsive layouts in Unifi adapt to any possible screen size. We provide the following helpers to make the UI responsive:

• Grid: The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs.
• Breakpoints: We provide a low-level API that enables the use of breakpoints in a wide variety of contexts.
• Media: Include the media package for responsive images.
• Media Query Mixins: Use in custom SASS to make implementation-specific customizations.

Breakpoints

For optimal user experience, interfaces need to be able to adapt their layout at various breakpoints.

Each breakpoint matches with a fixed screen width:

• xs, extra-small: 0px or larger
• sm, small: 600px or larger
• md, medium: 960px or larger
• lg, large: 1280px or larger
• xl, extra-large: 1920px or larger

These values can be customized by updating the following map. You may submit the entire map, or change just one value.

// Mimic Bootstrap 4 breakpoints
$u-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200
);

The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them for controlling the layout of your application through the Grid.

Media

By default, the global rule targets all img, compiling to:

img {
  max-width: 100%;
  height: auto;
}

Media Query Mixins

Use in custom SASS to make implementation-specific customizations.

Offered to meet 4 conditions, where name is the breakpoint key:

• u-media-breakpoint-up($name) - from that breakpoint and larger
• u-media-breakpoint-down($name) - from that breakpoint and smaller
• u-media-breakpoint-between($lower, $upper) - between the defined breakpoints
• u-media-breakpoint-only($name) - applies from the defined breakpoint up until the next largest breakpoint registered in the breakpoint map

@use "@nelnet/unifi-components-web/src/sass/core/util/breakpoints/mixins";

// Default to hidden, display once `sm` breakpoint reached
.custom-element {
  display: none;
}

@include mixins.u-media-breakpoint-up(sm) {
  .custom-element {
    display: block;
  }
}