ChilliCream / React Rasta

The most powerful and flexible grid system for React

React Rasta is a 12 column grid system built on top of the CSS flexbox layout and styled-components.

Getting Started

Here you will find all you need to get started quickly.

Install Package

First things first. Install the package react-rasta with yarn or npm.

When using yarn it looks like this.

yarn add react-rasta

And when using npm it looks like this.

npm install react-rasta --save

Required Dependencies

React Rasta depends on the following packages which need to be installed manually.

Code Examples

import React, {Component} from "react";
import {Column, Container, Row} from "react-rasta";

export default class App extends Component {
  render() {
    return (
      <Container>
        <Row>
          <Column size={3}>Left</Column>
          <Column size={{xs: 9, md: 3}}>Middle 1</Column>
          <Column size={{xs: 9, md: 3}}>Middle 2</Column>
          <Column size={3}>Right</Column>
        </Row>
      </Container>
    );
  }
}

Breakpoints (which will end up in media queries) could be redefined via ThemeProvider.

import React, {Component} from "react";
import {Column, Container, Row, ThemeProvider} from "react-rasta";

const breakpoints = {
  phone: 0,
  tablet: 600,
  desktop: 800,
};

const containerWidth = {
  // do not specify phone here
  tablet: 560,
  desktop: 760,
};

export default class App extends Component {
  render() {
    return (
      <ThemeProvider theme={{breakpoints, containerWidth}}>
        <Container>
          <Row>
            <Column size={3}>Left</Column>
            <Column size={{phone: 9, tablet: 3}}>Middle 1</Column>
            <Column size={{phone: 9, tablet: 3}}>Middle 2</Column>
            <Column size={3}>Right</Column>
          </Row>
        </Container>
      </ThemeProvider>
    );
  }
}

Documentation

Click here for the documentation.