Responsive Object Syntax

Definition

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

Analogie

Un emploi du temps par jour de la semaine : chaque jour (breakpoint) a une activite differente.

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

Definir des styles responsifs de facon declarative sans media queries manuelles.

Termes lies