Relayout

A simple flex grid system based on columns for React

Because no one should be writing a single line of flex or width anymore.

Installation

npm install relayout --save

Usage

Relayout consists of three Components:

• Relayout
• RelayoutItem
• RelayoutWrapper

JavaScript

import React, { Component } from 'react';
import { Relayout, RelayoutItem, RelayoutWrapper } from 'relayout';
 
export default class App extends Component {
  render() {
    return (
      <RelayoutWrapper>
        <Relayout>
          <RelayoutItem sm="12" md="8" lg="4">
            <h1>Hello World</h1>
          </RelayoutItem>
        </Relayout>
      </RelayoutWrapper>
    );
  }
}

CSS

You can import directly on your CSS if you are using postcss-import.

@import "relayout";

Using with cssnext or SCSS

Alternatively you can use either cssnext or SCSS and allows you to customise breakpoints, gutters and other bits of Relayout.

API and Example

You can have either have a look at the Components API and also see a simple example on how to use Relayout.

Test

npm test

License

MIT