npm

Need private packages and team management tools?Check out npm Orgs. »

relayout

1.1.3 • Public • Published

Build Status

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';
 
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

install

npm i relayout

Downloadsweekly downloads

17

version

1.1.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability