Samples for material-ui `next` responsive layout/grid using JSS (originally based on flexboxgrid.com)

Box.js

// @flow
import React, {Element, PropTypes} from 'react'
import pure from 'recompose/pure'
import {createStyleSheet} from 'jss-theme-reactor'
import classNames from 'classnames'
import Logger from '../../../util/Logger'

type Props = {
  type: ?string,
  children: ?Element<any>
}

export const styleSheet = createStyleSheet('AfSampleGridBox', (theme) => {
  const { breakpoints } = theme

  return {
    box: {
      position: 'relative',
      boxSizing: 'border-box',
      minHeight: '1rem',
      marginBottom: 0,
      background: '#007FFF',
      border: '1px solid #FFF',
      borderRadius: 2,
      overflow: 'hidden',
      textAlign: 'center',
      color: '#fff'
    },
    boxrow: {
      extend: 'box',
      marginBottom: '1rem'
    },
    boxcontainer: {
      extend: 'box',
      boxSizing: 'border-box',
      padding: '.5em'
    },
    boxfirst: {
      background: '#06C',
      borderColor: '#007FFF'
    },
    boxnested: {
      extend: 'box',
      background: '#036',
      borderColor: '#007FFF'
    },
    boxlarge: {
      extend: 'box',
      height: '8rem'
    },
    [breakpoints.up('sm')]: {
      box: { padding: '1rem' },
      boxrow: { padding: '1rem' },
      boxcontainer: { padding: '1rem' },
      boxnested: { padding: '1rem' },
      boxlarge: { padding: '1rem' }
    }
  }
})

const Box = (props: Props, context: { styleManager: Object }) => {
  const classes = context.styleManager.render(styleSheet)
  const type = props.type ? props.type : 'box' // default value
  const allClasses = type.split(' ').map((name) => {
    const resolvedName = name !== 'box' ? `box${name}` : 'box'
    // log.debug('resolvedName', resolvedName)
    return classes[ resolvedName ]
  })
  // log.debug('allClasses', allClasses)
  return (
    <div className={classNames(...allClasses)}>
      {props.children}
    </div>
  )
}

Box.contextTypes = {
  styleManager: PropTypes.object.isRequired
}

const log = Logger.get(Box) // eslint-disable-line

export default pure(Box)

Hero.js

// @flow
import React, {PropTypes} from 'react'
import pure from 'recompose/pure'
import {createStyleSheet} from 'jss-theme-reactor'
import {Row} from '../../../components/Layout'
import Button from 'material-ui-build/Button'

export const stylesheet = createStyleSheet('AfSampleGridHero', (theme) => {
  const { breakpoints } = theme
  return {
    hero: {
      background: 'white',
      boxSizing: 'border-box',
      padding: '2rem',
      border: '1px solid white',
      borderRadius: '2px'
    },
    headline: {
      fontSize: '2.5rem',
      whiteSpace: 'nowrap'
    },
    description: {
      fontSize: '.95rem',
      marginBottom: '2rem'
    },
    [breakpoints.up('sm')]: {
      headline: {
        fontSize: '4rem',
        marginBottom: '2rem'
      },
      description: {
        fontSize: '1.35rem'
      }
    }
  }
})

const Hero = (props: any, context: { styleManager: Object }) => {
  const classes = context.styleManager.render(stylesheet)
  return (
    <header className={classes.hero}>
      <Row center>
        <h1 className={classes.headline}>material-ui-grid</h1>
      </Row>
      <Row center className={classes.description}>
        <code>React Responsive Layout for material-ui breakpoints (original css code flexboxgrid.com)</code>
      </Row>
      <Row center>
        <Button raised href='https://github.com/alienfast/material-ui-layout'>Github??</Button>
      </Row>
    </header>
  )
}

Hero.contextTypes = {
  styleManager: PropTypes.object.isRequired
}

export default pure(Hero)

index.js

// @flow
import LayoutSample from './LayoutSample'
export default LayoutSample

LayoutSample.js

// @flow
import React, {PropTypes} from 'react'
import pure from 'recompose/pure'
import {Container, Row, Col} from '../../../components/Layout'
import Hero from './Hero'
import Section from './Section'
import Box from './Box'

const Responsive = () => {
  return (
    <Section
      title='Responsive'
      description='Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.'>
      <Row>
        <Col xs={12} sm={3} md={2} lg={1}>
          <Box type='row' />
        </Col>
        <Col xs={6} sm={6} md={8} lg={10}>
          <Box type='row' />
        </Col>
        <Col xs={6} sm={3} md={2} lg={1}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={12} sm={3} md={2} lg={1}>
          <Box type='row' />
        </Col>
        <Col xs={12} sm={9} md={10} lg={11}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={10} sm={6} md={8} lg={10}>
          <Box type='row' />
        </Col>
        <Col xs={2} sm={6} md={4} lg={2}>
          <Box type='row' />
        </Col>
      </Row>
    </Section>
  )
}
const Fluid = () => {
  return (
    <Section title='Fluid' description='Percent based width allow fluid resizing of columns and rows.'>
      <Row>
        <Col xs={12}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={1}>
          <Box type='row' />
        </Col>
        <Col xs={11}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={2}>
          <Box type='row' />
        </Col>
        <Col xs={10}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={3}>
          <Box type='row' />
        </Col>
        <Col xs={9}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={4}>
          <Box type='row' />
        </Col>
        <Col xs={8}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={5}>
          <Box type='row' />
        </Col>
        <Col xs={7}>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs={6}>
          <Box type='row' />
        </Col>
        <Col xs={6}>
          <Box type='row' />
        </Col>
      </Row>
    </Section>
  )
}
const Offsets = () => {
  return (
    <Section title='Offsets' description='Offset a column.'>
      <Row>
        <Col xsOffset={11} xs={1}>
          <Box type='row' />
        </Col>
        <Col xsOffset={10} xs={2}>
          <Box type='row' />
        </Col>
        <Col xsOffset={9} xs={3}>
          <Box type='row' />
        </Col>
        <Col xsOffset={8} xs={4}>
          <Box type='row' />
        </Col>
        <Col xsOffset={7} xs={5}>
          <Box type='row' />
        </Col>
        <Col xsOffset={6} xs={6}>
          <Box type='row' />
        </Col>
        <Col xsOffset={5} xs={7}>
          <Box type='row' />
        </Col>
        <Col xsOffset={4} xs={8}>
          <Box type='row' />
        </Col>
        <Col xsOffset={3} xs={9}>
          <Box type='row' />
        </Col>
        <Col xsOffset={2} xs={10}>
          <Box type='row' />
        </Col>
        <Col xsOffset={1} xs={11}>
          <Box type='row' />
        </Col>
      </Row>
    </Section>
  )
}
const AutoWidth = () => {
  return (
    <Section
      title='Auto Width'
      description='Add any number of auto sizing columns to a row. Let the grid figure it out.'>
      <Row>
        <Col xs>
          <Box type='row' />
        </Col>
        <Col xs>
          <Box type='row' />
        </Col>
      </Row>
      <Row>
        <Col xs>
          <Box type='row' />
        </Col>
        <Col xs>
          <Box type='row' />
        </Col>
        <Col xs>
          <Box type='row' />
        </Col>
      </Row>
    </Section>
  )
}
const NestedGrids = () => {
  return (
    <Section
      title='Nested Grids'
      description='Nest grids inside grids inside grids.'>
      <Row>
        <Col xs={7}>
          <Box type='container'>
            <Row>
              <Col xs={9}>
                <Box type='first container'>
                  <Row>
                    <Col xs={4}>
                      <Box type='nested' />
                    </Col>
                    <Col xs={8}>
                      <Box type='nested' />
                    </Col>
                  </Row>
                </Box>
              </Col>
              <Col xs={3}>
                <Box type='first container'>
                  <Row>
                    <Col xs>
                      <Box type='nested' />
                    </Col>
                  </Row>
                </Box>
              </Col>
            </Row>
          </Box>
        </Col>
        <Col xs={5}>
          <Box type='container'>
            <Row>
              <Col xs={12}>
                <Box type='first container'>
                  <Row>
                    <Col xs={6}>
                      <Box type='nested' />
                    </Col>
                    <Col xs={6}>
                      <Box type='nested' />
                    </Col>
                  </Row>
                </Box>
              </Col>
            </Row>
          </Box>
        </Col>
      </Row>
    </Section>
  )
}
const Alignment = () => {
  return (
    <Section
      title='Alignment'
      description='Add classes to align elements to the start or end of row as well as the top, bottom, or center of a column'>
      <h3><code>.start-</code></h3>
      <Row>
        <Col xs={12}>
          <Box type='container'>
            <Row start='xs'>
              <Col xs={6}>
                <Box type='nested' />
              </Col>
            </Row>
          </Box>
        </Col>
      </Row>
      <h3><code>.center-</code></h3>
      <Row>
        <Col xs={12}>
          <Box type='container'>
            <Row center='xs'>
              <Col xs={6}>
                <Box type='nested' />
              </Col>
            </Row>
          </Box>
        </Col>
      </Row>
      <h3><code>.end-</code></h3>
      <Row>
        <Col xs={12}>
          <Box type='container'>
            <Row end='xs'>
              <Col xs={6}>
                <Box type='nested' />
              </Col>
            </Row>
          </Box>
        </Col>
      </Row>
      <h3>Example at different viewport sizes</h3>
      <Row>
        <Col xs={12}>
          <Box type='container'>
            <Row center='xs' end='sm' start='lg'>
              <Col xs={6}>
                <Box type='nested' />
              </Col>
            </Row>
          </Box>
        </Col>
      </Row>
      <h3><code>.top-</code></h3>
      <Row top='xs'>
        <Col xs={6}>
          <Box type='large' />
        </Col>
        <Col xs={6}>
          <Box type='box' />
        </Col>
      </Row>
      <h3><code>.middle-</code></h3>
      <Row middle='xs'>
        <Col xs={6}>
          <Box type='large' />
        </Col>
        <Col xs={6}>
          <Box type='box' />
        </Col>
      </Row>
      <h3><code>.bottom-</code></h3>
      <Row bottom='xs'>
        <Col xs={6}>
          <Box type='large' />
        </Col>
        <Col xs={6}>
          <Box type='box' />
        </Col>
      </Row>
    </Section>
  )
}
const Distribution = () => {
  return (
    <Section title='Distribution' description='Add classes to distribute the contents of a row or column.'>
      <h3><code>.around-</code></h3>
      <Row>
        <Box type='container' xs={12}>
          <Row around='xs'>
            <Col xs={2}>
              <Box type='nested' />
            </Col>
            <Col xs={2}>
              <Box type='nested' />
            </Col>
            <Col xs={2}>
              <Box type='nested' />
            </Col>
          </Row>
        </Box>
      </Row>
      <h3><code>.between-</code></h3>
      <Row>
        <Box type='container' xs={12}>
          <Row between='xs'>
            <Col xs={2}>
              <Box type='nested' />
            </Col>
            <Col xs={2}>
              <Box type='nested' />
            </Col>
            <Col xs={2}>
              <Box type='nested' />
            </Col>
          </Row>
        </Box>
      </Row>
    </Section>
  )
}
const Reordering = () => {
  return (
    <Section title='Reordering' description='Add classes to reorder columns'>
      <h3><code>.first-</code></h3>
      <Row>
        <Col xs={12}>
          <Box type='container'>
            <Row>
              <Col xs={2}><Box type='first'>1</Box></Col>
              <Col xs={2}><Box type='first'>2</Box></Col>
              <Col xs={2}><Box type='first'>3</Box></Col>
              <Col xs={2}><Box type='first'>4</Box></Col>
              <Col xs={2}><Box type='first'>5</Box></Col>
              <Col xs={2} first='xs'><Box type='nested'>6</Box></Col>
            </Row>
          </Box>
        </Col>
      </Row>
      <h3><code>.last-</code></h3>
      <Row>
        <Col xs={12}>
          <Box type='container'>
            <Row>
              <Col xs={2} last='xs'><Box type='nested'>1</Box></Col>
              <Col xs={2}><Box type='first'>2</Box></Col>
              <Col xs={2}><Box type='first'>3</Box></Col>
              <Col xs={2}><Box type='first'>4</Box></Col>
              <Col xs={2}><Box type='first'>5</Box></Col>
              <Col xs={2}><Box type='first'>6</Box></Col>
            </Row>
          </Box>
        </Col>
      </Row>
    </Section>
  )
}
const Reversing = () => {
  return (
    <Section title='Reversing' description='Add class to reverse columns'>
      <h3><code>.reverse-</code></h3>
      <Row>
        <Col xs={12}>
          <Box type='container'>
            <Row reverse>
              <Col xs={2}><Box type='nested'>1</Box></Col>
              <Col xs={2}><Box type='nested'>2</Box></Col>
              <Col xs={2}><Box type='nested'>3</Box></Col>
              <Col xs={2}><Box type='nested'>4</Box></Col>
              <Col xs={2}><Box type='nested'>5</Box></Col>
              <Col xs={2}><Box type='nested'>6</Box></Col>
            </Row>
          </Box>
        </Col>
      </Row>
    </Section>
  )
}

const GridSample = () => {
  // const classes = context.styleManager.render(stylesheet)
  return (
    <div>
      <Hero />
      <Container>
        <Responsive />
        <Fluid />
        <Offsets />
        <AutoWidth />
        <NestedGrids />
        <Alignment />
        <Distribution />
        <Reordering />
        <Reversing />
      </Container>
    </div>
  )
}

GridSample.contextTypes = {
  styleManager: PropTypes.object.isRequired
}

export default pure(GridSample)

Section.js

// @flow
import React, {Element, PropTypes} from 'react'
import pure from 'recompose/pure'
import {createStyleSheet} from 'jss-theme-reactor'

type Props = {
  title: string,
  description: string,
  children: Element<any>

}

export const stylesheet = createStyleSheet('AfSampleGridSection', () => {
  return {
    section: {
      paddingTop: '3rem'
    }
  }
})

const Section = (props: Props, context: { styleManager: Object }) => {
  const classes = context.styleManager.render(stylesheet)
  return (
    <section className={classes.section}>
      <h2>{props.title}</h2>
      <p>{props.description}</p>
      {props.children}
    </section>
  )
}

Section.contextTypes = {
  styleManager: PropTypes.object.isRequired
}

export default pure(Section)