Responsive Utilities

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.
• Hidden: The hidden component can be used to change the visibility of the elements.

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 always be customized. You will find them in the theme, in the breakpoints.values object (Theme Guide coming soon).

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 and Hidden components.

Utility Components

Hidden

Quickly and responsively toggle the visibility value of components and more with the hidden utilities.

All elements are visible unless they are explicitly hidden. To ease integration with the responsive breakpoints, this component can be used to hide any content, or you can use it in conjunction with the Grid component.

How it works

Hidden works with a range of breakpoints e.g. xsUp or mdDown, or one or more breakpoints e.g. only='sm' or only={['md', 'xl']}. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints.

Implementations

js

By default, the js implementation is used, responsively hiding content based on using a higher-order component that watches screen size. This has the benefit of not rendering any content at all unless the breakpoint is met.

css

If you are using server-side rendering, you can set implementation="css" if you don't want the browser to re-flow your content on the screen.

Breakpoint up

Using any breakpoint up property, the given children will be hidden at or above the breakpoint.

<Grid container spacing={8}>
  <Hidden xsUp>
    <Grid item xs>
      <Paper padding={2}>xsUp</Paper>
    </Grid>
  </Hidden>
  <Hidden smUp>
    <Grid item xs>
      <Paper padding={2}>smUp</Paper>
    </Grid>
  </Hidden>
  <Hidden mdUp>
    <Grid item xs>
      <Paper padding={2}>mdUp</Paper>
    </Grid>
  </Hidden>
  <Hidden lgUp>
    <Grid item xs>
      <Paper padding={2}>lgUp</Paper>
    </Grid>
  </Hidden>
  <Hidden xlUp>
    <Grid item xs>
      <Paper padding={2}>xlUp</Paper>
    </Grid>
  </Hidden>
</Grid>

Breakpoint down

Using any breakpoint down property, the given children will be hidden at or below the breakpoint.

<Grid container spacing={8}>
  <Hidden xsDown>
    <Grid item xs>
      <Paper padding={2}>xsDown</Paper>
    </Grid>
  </Hidden>
  <Hidden smDown>
    <Grid item xs>
      <Paper padding={2}>smDown</Paper>
    </Grid>
  </Hidden>
  <Hidden mdDown>
    <Grid item xs>
      <Paper padding={2}>mdDown</Paper>
    </Grid>
  </Hidden>
  <Hidden lgDown>
    <Grid item xs>
      <Paper padding={2}>lgDown</Paper>
    </Grid>
  </Hidden>
  <Hidden xlDown>
    <Grid item xs>
      <Paper padding={2}>xlDown</Paper>
    </Grid>
  </Hidden>
</Grid>

Breakpoint only

Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s).

The only property can be used in two ways:

• list a single breakpoint
• list an array of breakpoints

<Grid container>
  <Hidden only="lg">
    <Grid item xs>
      <Paper padding={2}>Hidden on lg</Paper>
    </Grid>
  </Hidden>
  <Hidden only="sm">
    <Grid item xs>
      <Paper padding={2}>Hidden on sm</Paper>
    </Grid>
  </Hidden>
  <Hidden only={['sm', 'lg']}>
    <Grid item xs>
      <Paper padding={2}>Hidden on sm and lg</Paper>
    </Grid>
  </Hidden>
</Grid>