VBox

Appearance

Responsive Design ​

Breakpoints ​

v-box includes a default set of responsive breakpoints that can be customized via the theme configuration. The default breakpoints are: sm, md, lg, and xl.

ts
// Default breakpoints
{
  sm: '40rem', // ~640px
  md: '48rem', // ~768px
  lg: '64rem', // ~1024px
  xl: '80rem', // ~1280px
}
vue
<template>
  <v-box
    display="grid"
    gap="1rem"
    :sm="{
      gridTemplateColumns: 'repeat(2, 1fr)',
    }"
    :md="{
      gridTemplateColumns: 'repeat(3, 1fr)',
    }"
    :lg="{
      gridTemplateColumns: 'repeat(4, 1fr)',
    }"
  >
    <v-box v-for="n in 8" :key="n" w="100%" h="150px" bg="tomato" :sm="{ width: '150px' }" />
  </v-box>
</template>

Resize the screen

Media queries ​

The mq prop allows you to provide arbitrary media queries for responsive styling.

vue
<template>
  <v-box
    fs="1rem"
    bg="tomato"
    py="2rem"
    text-align="center"
    color="white"
    :mq="{
      '@media (min-width: 48rem)': {
        fontSize: '2rem',
        backgroundColor: 'indigo',
      },
    }"
    >Responsive font size</v-box
  >
</template>
Responsive font size

The mq prop can also be used for other media features such as

prefers-color-scheme, orientation, hover etc.

js
// e.g
<v-box
  :mq="{
    '@media (prefers-color-scheme: dark)': {
      backgroundColor: 'black',
      color: 'white',
    },
  }"
/>

Container queries ​

Similar to the mq prop, the cq prop allows you to provide container queries for responsive styling based on the size of the parent container. To use container queries, ensure that the parent v-box has container-type and an optional container-name prop. Checkout container queries MDN docs for more information.

vue
<template>
  <v-box
    container-name="responsive-box"
    container-type="inline-size"
    border="2px dashed gray"
    padding="1rem"
  >
    <v-box
      w="100%"
      max-w="400px"
      border="1px solid black"
      p="1rem"
      bg="tomato"
      color="white"
      :cq="{
        '@container responsive-box (min-width: 40rem)': {
          backgroundColor: 'indigo',
        },
      }"
    >
      Resize to see background color change.
    </v-box>
  </v-box>
</template>
Resize to see background color change.

TIP

All the responsive style props discussed above also support valid CSS selectors

vue
<template>
  <v-box
    :sm="{
      '&:has(p)': {
        color: 'cl-cyan-500',
      },
    }"
  >
    <p>A little brown fox</p>
  </v-box>
</template>

A little brown fox