Media & Supports

CSS variables can be globally responsive. By updating variables in @media or @supports queries, you can adapt your entire interface instantly.

Pollen supports both of these queries through the media and supports options in pollen.config.js. By updating modules here they will be changed if the query given is matched.

Configuration

module.exports = {
  media: {
    '(min-width: 640px)': {
      scale: {
        0: '1.125rem'
      }      
    }
  },
  supports: {
    '(display: grid)': {
      grid: {
        content: 'var(--grid-12)'
      }
    } 
  }
}

Generated CSS

:root {
  ...Pollen modules
}

@media (min-width: 640px) {
  :root {
    --scale-0: 1.125rem;
  }
}

@supports (display: grid) {
  :root {
    --grid-content: var(--grid-12)
  } 
}