Breakpoints

The breakpoints tools are a simplified version of the Material specification.

"A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation."

The theme object defines breakpoints for 6 screen ranges with the following default values:

xs (extra small) of 0px.
sm (small) of 600px.
md (medium) of 960px.
lg (large) of 1280px.
xl (extra large) of 1920px.

They can be configured with different values optionally:

tsx

import { createTheme } from '@arwes/design';
const theme = createTheme({
  // In this case, the "small" and "medium" breakpoints
  // are updated accordingly.
  breakpoints: {
    values: {
      sm: 400,
      md: 768
    }
  }
});

These breakpoints values can be used to create CSS media queries dynamically. The breakpoints functions can be executed in the components dynamic styles generation to add specific media queries or browser utilities like matchMedia.

Breakpoint Up

To create a media query from one breakpoint upwards:

tsx

theme.breakpoints.up('lg');
// '@media screen and (min-width: 1920px)'

Upwards large using default values.

Breakpoint Down

To create a media query from one breakpoint downwards minus 1:

tsx

theme.breakpoints.down('lg');
// '@media screen and (max-width: 1919px)'

Downwards large breakpoint using default values.

Only Breakpoint

To create a media query between the provided breakpoint and just before the next:

tsx

theme.breakpoints.only('sm');
// '@media screen and (min-width: 600px) and (max-width: 959px)'

From small to medium range using default values.

Between Breakpoints

To create a media query between two provided breakpoints:

tsx

theme.breakpoints.between('md', 'lg');
// '@media screen and (min-width: 960px) and (max-width: 1919px)'

From medium to large range using default values.