Responsive Styles

Chakra UI Vue supports responsive styles out of the box. Instead of manually adding @media queries and adding nested styles throughout your code, Chakra UI allows you provide array values to add mobile-first responsive styles.

We use the @media(min-width) media queries to ensure values are mobile-first.

<template>
  <c-box
    height="40px"
    bg="green.400"
    :width="[
      '100%', // base
      '50%', // 480px upwards
      '25%', // 768px upwards
      '15%', // 992px upwards
    ]"
  />
  <!-- responsive font size -->
  <c-box :fontSize="['sm', 'md', 'lg', 'xl']">Font Size</c-box>
  <!-- responsive margin  -->
  <c-box :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
  <!-- responsive padding -->
  <c-box bg="papayawhip" :p="[2, 4, 6, 8]">
    Padding
  </c-box>
</template>

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

What it does#

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

<c-box :width="['100%', 1 / 2, 1 / 4]" />
or
<c-box :width="['100%', 0.5, 0.25]" />

It'll generate a CSS that looks like this

.Box {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box {
    width: 25%;
  }
}

NOTE: In the shortcut example '100%' is used instead of 1 because in the default Chakra UI Vue theme, theme.sizes[1] = 0.25rem. This means that using a prop like :width="1" will render a width of 4px and not '100%'

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

// First, create an alias for breakpoints
const breakpoints = ["30em", "48em", "62em", "80em"];
// aliases
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];

then

<c-box :width="{ base: 1, sm: 1 / 2, md: 1 / 4 }" />

Demo#

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 (resize your browser to see it in action):

<c-box p="4" :display="{ md: 'flex' }">
  <c-box flex-shrink="0">
    <c-image
      rounded="lg"
      :width="{ md: 40 }"
      src="https://bit.ly/2jYM25F"
      alt="Woman paying for a purchase"
    />
  </c-box>
  <c-box :mt="{ base: 4, md: 0 }" :ml="{ md: 6 }">
    <c-text
      font-weight="bold"
      text-transform="uppercase"
      font-size="sm"
      letter-spacing="wide"
      color="vue.600"
    >
      Marketing
    </c-text>
    <c-link
      mt="1"
      display="block"
      font-size="lg"
      line-height="normal"
      color="black"
      font-weight="semibold"
      href="#"
    >
      Finding customers for your new business
    </c-link>
    <c-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.
    </c-text>
  </c-box>
</c-box>