Responsive Design

O "mediaQueries" e o "useBreakpoint" são utilitários para facilitar o desenvolvimento de layouts responsivos, fazendo uso dos breakpoints do Copan.

mediaQueries

useBreakpoint

O mediaQueries é um objeto que funciona como um atalho de media queries para se escrever CSS responsivo.
Utilizando por trás nossos tokens de layout/breakpoint, você consegue escrever de forma mais prática as media queries necessárias.

Como as mediaQueries possuem o mesmo valor para "up" e "down" em um mesmo breakpoint, o ideal é utilizar somente mediaQueries "up", ou somente "down" para construção dos estilos responsivos.

De-Para

Um de-para de todos os valores disponibilizados e o código refletido, já puxando de nossos tokens de layout.

<List>
  <ListItem>{mediaQueries.xs.up}</ListItem>
  <ListItem>{mediaQueries.sm.down}</ListItem>
  <ListItem>{mediaQueries.sm.up}</ListItem>
  <ListItem>{mediaQueries.md.down}</ListItem>
  <ListItem>{mediaQueries.md.up}</ListItem>
  <ListItem>{mediaQueries.lg.down}</ListItem>
  <ListItem>{mediaQueries.lg.up}</ListItem>
  <ListItem>{mediaQueries.xl.down}</ListItem>
  <ListItem>{mediaQueries.xl.up}</ListItem>
  <ListItem>{mediaQueries.xxl.down}</ListItem>
  <ListItem>{mediaQueries.xxl.up}</ListItem>
</List>

<List>
  <ListItem>{mediaQueries.xs.up}</ListItem>
  <ListItem>{mediaQueries.sm.down}</ListItem>
  <ListItem>{mediaQueries.sm.up}</ListItem>
  <ListItem>{mediaQueries.md.down}</ListItem>
  <ListItem>{mediaQueries.md.up}</ListItem>
  <ListItem>{mediaQueries.lg.down}</ListItem>
  <ListItem>{mediaQueries.lg.up}</ListItem>
  <ListItem>{mediaQueries.xl.down}</ListItem>
  <ListItem>{mediaQueries.xl.up}</ListItem>
  <ListItem>{mediaQueries.xxl.down}</ListItem>
  <ListItem>{mediaQueries.xxl.up}</ListItem>
</List>

Utilização mediaQueries (up)

Exemplo de uso na construção de CSS responsivo com "up".

() => {
  const customClassName = css({
    display: 'none',
    [mediaQueries.md.up]: { display: 'block' },
    [mediaQueries.lg.up]: { marginTop: spacing.layout.base05 },
  })().className;

  return (
    <Flex className={customClassName}>
      <Typography textStyle="h4">Conteúdo responsivo</Typography>
      <Typography>Escondido no mobile e com marginTop em telas maiores ou iguais a 960px (lg).</Typography>
    </Flex>
  );
}

() => {
  const customClassName = css({
    display: 'none',
    [mediaQueries.md.up]: { display: 'block' },
    [mediaQueries.lg.up]: { marginTop: spacing.layout.base05 },
  })().className;

  return (
    <Flex className={customClassName}>
      <Typography textStyle="h4">Conteúdo responsivo</Typography>
      <Typography>Escondido no mobile e com marginTop em telas maiores ou iguais a 960px (lg).</Typography>
    </Flex>
  );
}

Utilização mediaQueries (down)

Exemplo de uso na construção de CSS responsivo com "down".

() => {
  const customClassName = css({
    marginTop: spacing.layout.base05,
    [mediaQueries.md.down]: { display: 'none' },
    [mediaQueries.lg.down]: { marginTop: 0 },
  })().className;

  return (
    <Flex className={customClassName}>
      <Typography textStyle="h4">Conteúdo responsivo</Typography>
      <Typography>Escondido no mobile e com marginTop em telas maiores que 960px (lg).</Typography>
    </Flex>
  );
}

() => {
  const customClassName = css({
    marginTop: spacing.layout.base05,
    [mediaQueries.md.down]: { display: 'none' },
    [mediaQueries.lg.down]: { marginTop: 0 },
  })().className;

  return (
    <Flex className={customClassName}>
      <Typography textStyle="h4">Conteúdo responsivo</Typography>
      <Typography>Escondido no mobile e com marginTop em telas maiores que 960px (lg).</Typography>
    </Flex>
  );
}