Skip to main content

Layouts

Simple layout classes for static element layouts.

Basics​

import { Layout } from '@streamelements/frontend-ui';
import { BotRounded } from '@streamelements/frontend-icons';

export function MyComponent() {
  return <div className={Layout.stylesWithStartIcon()}>
    <BotRounded />
    <span>
      Content
    </span>
  </div>
}

Note the parenthesis, it's a function call. See Extending styles for an explanation.

I'm a layout with a column to the left reserved for an icon :)

Layouts​

stylesWithStartIcon​

Creates a 2-column grid layout where the first one will take up max-content space and the 2nd one will take up the remaining space.

max-content

1fr

stylesWithEndIcon​

Creates a 2-column grid layout where the first one will take up all the space, leaving room just for max-content for the 2nd column.

1fr

max-content

stylesWithStartAndEndIcons​

Creates a 3-column grid layout where the 2 outer columns take up max-content and the middle one is left to use the remaining space.

max-content

1fr

max-content

Extending styles​

Stitches allows you to compose multiple styles using the css function. You can do that simply by passing on the return value of a single css call, and then extending that with a CSS object.

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

const myCustomGridLayout = css(Layout.stylesWithStartAndEndIcons, {
  columnGap: '24px'
});
Note how when we pass the value to css we don't call it as a function.