@seed-ui/layout v0.8.0

@seed-ui/layout

Components and style-utilities for creating responsive layouts.

• 💅 Styled with SCSS. You can import SCSS to use build-in mixins and variables.
• 🪶 Uses utility-first approach and CSS variables for dynamic styles, so final CSS is much smaller.
• 💪 Has simple API typed with TypeScript.
• 🍞 Compatible with any UI-kit. This package is responsible only for layouts.
• 🛠️ Includes reusable style-utils for creating new components and styles.
• 🍂 Allows tree-shaking. Unused code can be removed by Webpack or another bundler with tree-shaking support.

Install

yarn add @seed-ui/layout

API

Container

Used for sizing and spacings around wrapped components.

import { Container } from '@seed-ui/layout';

function Page() {
  return (
    <Container
      margin={[0, 'auto']}
      maxWidth={{
        xs: 1,
        sm: 540,
        md: 720,
        lg: 960,
        xl: 1140,
        xxl: 1320
      }}
      padding={[0, 2]}
      width={1}
    >
      {/** Inner content  **/}
    </Container>
  )
}

Container props

Row and Col

Used for grid layouts. Must be used together.

import { Row, Col } from '@seed-ui/layout';

function Page() {
  return (
    <Row
      align="center"
      justify={{ xs: 'center', md: 'start' }}
      gutter={[3, 4]}
    >
      <Col xs={6} md={4} xl="auto" >
        {/** Inner content **/}
      </Col>

      <Col xs={6} md={4} xl="auto" >
        {/** Inner content **/}
      </Col>
    </Row>
  )
}

Row props

Col props

Space

Wraps child components into additional divs and creates spacings between them.

import { Space } from '@seed-ui/layout';

function Page() {
  return (
    <Space
      align="start"
      justify="cener"
      gutter={3}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Space>
  )
}

Space props

Bar

Used for sizing, position and offsets.

import { Bar } from '@seed-ui/layout';

function Page() {
  return (
    <Bar
      height={56}
      left={0}
      position="fixed"
      top={0}
      width={1}
    >
      {/** Inner content **/}
    </Bar>
  )
}

Bar props

Background

Used for background-images.

import { Bar } from '@seed-ui/layout';

function Page() {
  return (
    <Background
      backgroundImage={{
        xs: 'pictue.jpg',
        md: 'pictue-md.jpg',
        xl: 'pictue-xl.jpg',
      }}
      backgroundRepeat="no-repeat"
      backgroundSize="cover"
    >
      {/** Inner content **/}
    </Background>
  )
}

Background props

Hidden

Hides elements according to screen size.

import { Hidden } from '@seed-ui/layout';

function Page() {
  return (
    <Hidden
      lgUp
      smDown
    >
      {/** Inner content **/}
    </Hidden>
  )
}

Hidden props

Types