Breakpoints

Reverb Design System supports ready-to-use responsive styles. Instead of manually adding @media-queries and nested styles throughout your code, Reverb Design System lets you provide object and array values ​​to add mobile-first responsive styles.

Responsive syntax relies on the breakpoints defined in the theme object. Reverb provides default breakpoints, here’s what it looks like:

Here’s how to interpret this syntax:

• 320px: From 0em upwards;
• 428px: From 20em upwards;
• 768px: From 26.75em upwards;
• 992px: From 48em upwards;
• 1280px: From 62em upwards;
• 1680px: From 80em upwards;
• > 1680px: From 105em upwards;

To make styles responsive, you can use either the array or object syntax.

All style props that arrays as values for mobile-first responsive styles. This is the recommended method.

Let’s say you have a Box with the following properties:

<Box bg="red.200" w="400px">
  This is a box
</Box>

To make the “width” or “w” props responsive using the array syntax, here’s what you need to do:

<Box bg="red.200" w={[300, 400, 500]}>
  This is a box
</Box>

Here’s how to interpret this syntax:

• 320px: From 0em upwards;
• 428px: From 20em upwards;
• 768px: From 26.75em upwards;

To interpret array responsive values, Reverb converts the values defined in theme.breakpoints and sorts them in ascending order. Afterward, we map the values defined in the array to the breakpoints.

// This is the default breakpoint
const breakpoints = {
  base: "0rem",
  mobileXs: "20em",
  mobileSm: "26.75em",
  tabletMd: "48em",
  desktopLg: "62em",
  desktopXl: "80em",
  desktop2xl: "105em",
};
// Internally, we transform to this
const breakpoints = ["0em", "20em", "26.75em", "48em", "62em", "80em", "105em"];

You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value.

Let’s say you have a Text that looks like this:

<Text fontSize="40px">This is a text</Text>

To make the “fontSize” prop responsive using the object syntax, here’s what you need to do:

<Text fontSize={{ base: "24px", tabletMd: "40px", desktopXl: "56px" }}>
  This is responsive text
</Text>

Remember, Reverb uses the min-width media query for responsive design.

The breakpoints are:

 base = 0rem,
 mobileXs = 20em,
 mobileSm = 26.75em,
 tabletMd = 48em,
 desktopLg = 62em,
 desktopXl = 80em,
 desktop2xl = 105em,

Here’s how to interpret this syntax:

• base: From 0em upwards;
• tabletMd: From 48em upwards;
• desktopXl: From 80em upwards;

You can use our responsively layout following this guideline.

This works for every style prop in the theme specification, which means you can change the style of most properties at a given breakpoint.

<>
  <Box
    height={{
      base: "100%", // 0-48em
      tabletMd: "50%", // 48em-80em,
      desktopXl: "25%", // 80em+
    }}
    bg="teal.400"
    width={[
      "100%", // 0-20em
      "50%", // 20em-26.75em
      "25%", // 26.75em-48em
      "15%", // 62em+
    ]}
  />
  {/* responsive font size */}
  <Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
  {/* responsive margin */}
  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
  {/* responsive padding */}
  <Box bg="papayawhip" p={[2, 4, 6, 8]}>
    Padding
  </Box>
</>

This shortcut is an alternative to writing media queries out by hand. Given the following:

<Box width={[1, 1 / 2, 1 / 4]} />

It’ll generate a CSS using percentage as value, that looks like this:

.Box {
  width: 100%;
}
/* 'mobileXs': '20em' */
@media screen and (min-width: 20em) {
  .Box {
    width: 50%;
  }
}
/* 'mobileSm': '26.75em' */
@media screen and (min-width: 26.75em) {
  .Box {
    width: 25%;
  }
}

The equivalent of this style if you passed it as an object.

In some scenarios, you might need to define custom breakpoints for your application. We recommended using common aliases like sm, md, lg, and xl.

To define custom breakpoints, install @reverb-ui/react, and use the createBreakpoints utility we provide.

// 1. Import the utilities
import { extendTheme, createBreakpoints } from "@reverb-ui/react";
// 2. Update the breakpoints as key-value pairs
const breakpoints = createBreakpoints({
  sm: "320px",
  md: "768px",
  lg: "960px",
  xl: "1200px",
});
// 3. Extend the theme
const theme = extendTheme({ breakpoints });
// 4. Now you can use the custom breakpoints
function Example() {
  return <Box width={{ base: "100%", sm: "50%", md: "25%" }} />;
}

Here’s a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens.

<Box p={4} display={{ tabletMd: "flex" }}>
  <Box flexShrink={0}>
    <Image
      borderRadius="lg"
      width={{ tabletMd: 40 }}
      src="https://bit.ly/2jYM25F"
      alt="Woman paying for a purchase"
    />
  </Box>
  <Box mt={{ base: 4, tabletMd: 0 }} ml={{ tabletMd: 6 }}>
    <Text
      fontWeight="bold"
      textTransform="uppercase"
      fontSize="sm"
      letterSpacing="wide"
      color="teal.600"
    >
      Marketing
    </Text>
    <Link mt={1} display="block" fontSize="lg" lineHeight="normal" fontWeight="semibold" href="#">
      Finding customers for your new business
    </Link>
    <Text mt={2} color="gray.500">
      Getting a new business off the ground is a lot of hard work. Here are five ideas you can use
      to find your first customers.
    </Text>
  </Box>
</Box>