Responsive

Basic example

Stitches allows for an object to be passed on to an entry from the variants object that exist on a component. This object can take an optional initial variant. The rest of the keys are CSS conditions and you can pass on a defined condition by specifying the key, or a custom condition.

import { Text } from '@streamelements/frontend-ui';

<Text.Body variant={{ '@initial': 'body', min1024: 'caption' }}>
  I change from caption to body at defined condition of minimum 1024px window width
</Text.Body>

I change from caption to body at defined condition of minimum 1024px window width

Resize the browser below 1024px to see the text get smaller.

Custom conditions

You can set custom conditions by providing a key to the variant object:

import { Text } from '@streamelements/frontend-ui';

<Text.Body variant={{
  '@initial': 'body',
  '@media (min-width: 1392px)': 'caption'
}}>
  I change my variant value at a weird size of 1392px
</Text.Body>

I change my variant value at a weird size of 1392px

CSS className variants

When generating a className with the css function exposed from the library you can still add variants, and you can still call those variants based on a condition.

If you've got the following styles:

import { css } from '@streamelements/frontend-ui';

const customColor = css({
  variants: {
    paint: {
      primary: {
        color: '$textPrimaryMain'
      },
      accent: {
        color: '$textSuccess'
      }
    }
  }
});

When you call the returned function, pass an object to it:

<Text.Body className={customColor({
  paint: {
    '@initial': 'primary',
    '@min1024': 'accent'
  }
})}>
  I change my color when I'm displayed on Full HD window size
</Text.Body>

I change my color when I'm displayed on Full HD window size

Conditions

The UI library comes with several common breakpoints:

• @min480: @media (min-width: 480px)
• @max480: @media (max-width: 480px)
• @min768: @media (min-width: 768px)
• @max768: @media (max-width: 768px)
• @min1024: @media (min-width: 1024px)
• @max1024: @media (max-width: 1024px)
• @minFullHD: @media (min-width: 1920px)
• @maxFullHD: @media (max-width: 1920px)
• @min1440: @media (min-width: 1440px)
• @max1440: @media (max-width: 1440px)
• @minQHD: @media (min-width: 2560px)
• @maxQHD: @media (max-width: 2560px)
• @min4K: @media (min-width: 3840px)
• @max4K: @media (max-width: 3840px)

If you need to diverge from these, take a look at how to use custom conditions.