Getting Started

PeerDependencies#

react: >= 16.8.0,
react-dom: >= 16.8.0,
styled-components: >= 5.2.0

Install#

Install all dependencies with your favourite package-manager:

Yarn
npm

yarn add react-raster styled-components react react-dom

Basic Usage#

react-raster has only one component called Box.
Define brekpoints, gap (row/column) and a colspan to start a new Grid and nest Box-Elements inside each other, preserving the Grid.
Further style your Box-Elements directly via props.
Boxes and Grids can be freely nested inside each other.
If you set control, you can press Esc to see the grid.

import Box from "react-raster";

Live Editor

function BasicExample() {
  return (
    <Box
      breakpoints={[0, 400, 800, 1200]}
      colspan={12}
      padding={"1rem"}
      gap="0.5rem 1rem"
      control
    >
      <Box as="h3" marginBottom="1.5rem">
        Press ESC to see the Grid
      </Box>

      <Box
        as="h1"
        margin="0px"
        cols={[6]}
        padding="2rem"
        height={"500px"}
        background="lightblue"
        display="flex"
        alignItems="stretch"
        justifyContent="stretch"
        padding="1"
      >
        <Box
          background="#111"
          margin="0px"
          color="coral"
          display="flex"
          width="100%"
          alignItems="center"
          justifyContent="center"
        >
          Hello World!
        </Box>
      </Box>
      <Box cols={[6]} height="500px">
        <Box
          as="p"
          margin="0px 0px 1 1"
          display="flex"
          color="white"
          alignItems="center"
          justifyContent="center"
          background="darkblue"
          fontSize="1.5rem"
          fontWeight="bold"
        >
          Stop
        </Box>
        <Box
          as="p"
          margin="0px"
          display="flex"
          color="white"
          alignItems="center"
          justifyContent="center"
          background="coral"
          fontSize="1.5rem"
          fontWeight="bold"
        >
          Wars
        </Box>
      </Box>
    </Box>
  );
}

function BasicExample() {
  return (
    <Box
      breakpoints={[0, 400, 800, 1200]}
      colspan={12}
      padding={"1rem"}
      gap="0.5rem 1rem"
      control
    >
      <Box as="h3" marginBottom="1.5rem">
        Press ESC to see the Grid
      </Box>
      <Box
        as="h1"
        margin="0px"
        cols={[6]}
        padding="2rem"
        height={"500px"}
        background="lightblue"
        display="flex"
        alignItems="stretch"
        justifyContent="stretch"
        padding="1"
      >
        <Box
          background="#111"
          margin="0px"
          color="coral"
          display="flex"
          width="100%"
          alignItems="center"
          justifyContent="center"
        >
          Hello World!
        </Box>
      </Box>
      <Box cols={[6]} height="500px">
        <Box
          as="p"
          margin="0px 0px 1 1"
          display="flex"
          color="white"
          alignItems="center"
          justifyContent="center"
          background="darkblue"
          fontSize="1.5rem"
          fontWeight="bold"
        >
          Stop
        </Box>
        <Box
          as="p"
          margin="0px"
          display="flex"
          color="white"
          alignItems="center"
          justifyContent="center"
          background="coral"
          fontSize="1.5rem"
          fontWeight="bold"
        >
          Wars
        </Box>
      </Box>
    </Box>
  );
}

Result

Press ESC to see the Grid

Hello World!

Stop

Wars