Have ideas to improve npm?Join in the discussion! »

    greact

    1.0.8 • Public • Published

    Greact

    Grid systems are used for creating page layouts through a series of rows and columns that house your content. Greact has been created to render layout as easy as a pie for React users. Greact is based on flexbox and don't have any css dependencies. Keep in mind that flexbox are well supported by most of modern browsers however you can check the compatibility here

    Greact in action just here

    Code Example

    import React from 'react';
    import ReactDOM from 'react-dom';
     
    import {Row, Col} from 'greact';
     
    class App extends React.Component {
      render() {
        return (
          <div>
            <Row cols={12}>
              <Col xs={12} sm={4} md={2} lg={1}>{'1'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'2'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'3'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'4'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'5'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'6'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'7'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'8'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'9'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'10'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'11'}</Col>
              <Col xs={12} sm={4} md={2} lg={1}>{'12'}</Col>
            </Row>
            <Row cols={5}>
              <Col xs={5} md={1}>{'13'}</Col>
              <Col xs={5} md={1}>{'14'}</Col>
              <Col xs={5} md={1}>{'15'}</Col>
              <Col xs={5} md={1}>{'16'}</Col>
              <Col xs={5} md={1}>{'17'}</Col>
            </Row>
          </div
        );
      }
    }
     
    ReactDOM.render(<App />, document.getElementById('app'));

    Installation

    $ npm install --save greact

    Grid System

    Without any suprise greact will allow you to layout your pages through a series of rows and columns. A row can be defined as a horizontal groups of columns and content should be placed within columns (only columns may be immediate children of rows).

    Row

    Create a Row is super easy, so just have a look below:

        <Row>
            ...
        </Row>

    Because sometimes you may want to tweek your grid, a Row can accept some extra options:

    Props Description Default
    cols number of columns 12
    queries an object to define new queries size { xs : 544, sm : 768, md : 992 }

    See the example below for a better idea of how it all works.

        <Row cols={16} queries={{ xs : 500, sm : 800, md : 1000 }}>
            ...
        </Row>

    Col

    Create a Col is as easy as a creating a Row :

        <Row>
            <Col xs={6}>
                ...
            </Col>
            <Col xs={6}>
                ...
            </Col>
        </Row>

    Let's have a look on options:

    Props Description Default
    xs space used by the column for extra small devices 0
    sm space used by the column for small devices 0
    md space used by the column for medium devices 0
    lg space used by the column for large devices 0
    offset object containing offset for all devices size {xs:0, sm:0, md:0, lg:0 }

    Feel free to combine all these options and play with the grid, that's super easy and this is why greact exists:

        <Row>
            <Col xs={12} sm={6} md={4} lg={1}>
                ...
            </Col>
            <Col xs={12} sm={6} md={4} lg={1}>
                ...
            </Col>
        </Row>
        <Row cols={7}>
            <Col xs={6} sm={5}>
                ...
            </Col>
            <Col xs={1} sm={2}>
                ...
            </Col>
        </Row>

    Install

    npm i greact

    DownloadsWeekly Downloads

    0

    Version

    1.0.8

    License

    MIT

    Last publish

    Collaborators

    • avatar