The most powerful and flexible grid system for React
Clone or download
Latest commit 25b35ad Sep 18, 2018

README.md

React Rasta

release package license build coverage better code code prettier


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.

Package Version
react 16 or higher
styled-components 3 or higher

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.