Responsive Design

Pixel 3 support responsive design by using css() utility function that lets you write responsive styles directly in your code.

How to use

Pixel 3 comes with 4 predefined breakpoints:

Breakpoint	Min Width (em)	Min Width (px)	Description
base	—	—	Default (applies to all screen sizes)
sm	22.5em	360px	Small screens (e.g., phones)
md	48em	768px	Medium screens (e.g., tablets)
lg	64em	1024px	Large screens (e.g., laptops)
xl	80em	1280px	Extra-large screens (e.g., desktops)

base acts as the default style, used before any breakpoint overrides apply.

Example: Responsive backgroundColor

<template>
  <div
    :class="
      css({
        backgroundColor: {
          base: 'orange.500', // default
          sm: 'lime.100', // ≥ 22.5em
          md: 'fuchsia.100', // ≥ 48em
          lg: 'leaf.100', // ≥ 64em
          xl: 'dark' // ≥ 80em
        }
      })
    "
  >
    Responsive background
  </div>
</template>

<script setup lang="ts">
  import { css } from '@mekari/pixel3'
</script>

Result Overview

Screen Width	Background Color
< 22.5em	orange.500
≥ 22.5em	lime.100
≥ 48em	fuchsia.100
≥ 64em	leaf.100
≥ 80em	dark

---

Simplify With Array Syntax

Pixel 3 also accepts arrays as value.

<template>
  <div
    :class="
      css({
        backgroundColor: ['orange.500', 'lime.100', 'fuchsia.100', 'leaf.100', 'dark']
      })
    "
  >
    Responsive background
  </div>
</template>

<script setup lang="ts">
  import { css } from '@mekari/pixel3'
</script>