Skip to main content

Responsive Patterns

This recipe focuses on real-world breakpoint usage with at.

Layout switch (column → row)​

<$$
  display="flex"
  gap={16}
  at={{
    'mobile-': { flexDirection: 'column' },
    'mobile+': { flexDirection: 'row' },
  }}
>
  <$$ flex={1}>A</$$>
  <$$ flex={1}>B</$$>
</$$>

Range-specific tweaks​

<$$
  at={{
    'tablet-small': { fontSize: 18 },
    'medium+': { fontSize: 20 },
  }}
>
  Headline
</$$>

Arbitrary ranges​

<$$ at={{ '640-900': { gap: 20 } }}>Constrained gap</$$>

ClassName shorthand​

<div className="mobile:padding:12 tablet:padding:16">Responsive padding</div>