HTTPS SSH

Minus minus grid | React.js

A simple wrapper around the Minus minus Grid

API Documentation
Sass Documentation
Demo

npm Coveralls branch bitHound Overall Score Standard Version js-standard-style Commitizen friendly
Travis David David
GitHub license GitHub issues GitHub forks GitHub stars

import React from 'react'
import {render} from 'react-dom'
import {Grid, Column, Row} from '../src'
import vars from '../vars'
const columns = vars['column-count']

const App = () => {
  const half = `calc(var(${columns}) / 2)`
  const oneFourth = `calc(var(${columns}) / 4)`
  const threeFourth = `calc(var(${columns}) / 4 * 3)`

  return (
    <Grid padding={10} margin={5}>
      <Column>1</Column>
      <Column m={2}>2</Column>
      <Column m={3}>3</Column>
      <Column m={4}>4</Column>
      <Column m={2} l={4}>2 || 4</Column>
      <Column m={4} l={8}>4 || 8</Column>
      <Column m={half} l={oneFourth}>1/2 || 1/4</Column>
      <Column m={half} l={threeFourth}>1/2 || 1/4 * 3 </Column>
      <Column m={half}>
        1/2
        <Row>
          <Column m={half}> 1/2</Column>
          <Column m={half}> 1/2</Column>
        </Row>
      </Column>
    </Grid>
  )
}

const mountPoint = document.getElementById('mountPoint')
render(<App/>, mountPoint)