Planett Layout

Install

  npm install planett-layout --save

Example

  'use strict';

  import React from 'react';
  import ReactDOM from 'react-dom';
  import {Grid, Cell} from 'planett-layout';

  class Example extends React.Component {
    render() {
      return (
        <div>
          <Grid>
            {[1, 1, 1, 1, 1, 1,
              1, 1, 1, 1, 1, 1].map((d, i) => {
              return (
                <Cell key={i}
                      col={[d, d, d]}
                >{d}</Cell>
              );
            })}
          </Grid>

          <Grid>
            {[4, 4, 4].map((d, i) => {
              return (
                <Cell key={i}
                      col={[d, d, d]}
                >{d}</Cell>
              );
            })}
          </Grid>

          <Grid>
            <Cell col={[6, 4, 2]} />
            <Cell col={[6, 4, 2]} />
          </Grid>
        </div>
      );  
    }
  };

  (() => {
    ReactDOM.render(
      <Example />,
      document.getElementById('root')
    );
  })();

• Other example.

History

• Layout deprecated.
• Now use radium to build component.
  • col - [(desktop size), (tablet size), (phone size)] If element in col is 0, this will be set display: none.
  • total - [(desktop size), (tablet size), (phone size)] (default: [12, 8, 4]).