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:
JavaScript
import React Component from 'react';import Relayout RelayoutItem RelayoutWrapper from 'relayout'; { return <RelayoutWrapper> <Relayout> <RelayoutItem ="12" ="8" ="4"> <h1>Hello World</h1> </RelayoutItem> </Relayout> </RelayoutWrapper> ; }
CSS
You can import directly on your CSS if you are using postcss-import.
;
cssnext or SCSS
Using withAlternatively 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