Responsive Object Syntax

Définition

Syntaxe objet pour définir des valeurs responsives dans les librairies CSS-in-JS (Chakra, Panda, Theme UI). Chaque breakpoint est une clé de l'objet.

Analogie

Un emploi du temps par jour de la semaine : chaque jour (breakpoint) a une activité différente.

Exemple de code

// Chakra UI / Panda CSS
<Box
  p={{ base: '4', md: '8', lg: '12' }}
  display={{ base: 'block', md: 'flex' }}
  fontSize={{ base: 'sm', lg: 'xl' }}
/>

Cas d'usage

Définir des styles responsifs de façon déclarative sans média queries manuelles.

Termes liés