Grid media and media queries about neat-components

[magicink]

Sorry for taking so long to get back to you! Upon reading the documentation, I realize I documented this feature incorrectly and I will be publishing a new version shortly. As for the task you outlined, Here's how you would accomplish this:

// @flow
import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import Neat, {gridColumn, gridMedia, gridContainer} from '../../bundle'

const mobileGrid = Neat({
  columns: 12,
  gutter: '10px',
  media: 'only screen and (max-width: 600px)'
})

const desktopGrid = Neat({
  columns: 12,
  gutter: '20px',
  media: 'only screen and (min-width: 601px)'
})

const Column = styled.div`
  height: 50px;
  background-color: yellow;
  margin-top: 1rem;
  ${gridColumn(mobileGrid, 2)}
  ${gridMedia(desktopGrid, [
    {
      ...gridColumn(desktopGrid, 1),
      'background-color': 'red'
    },
  ])}
`

const Container = styled.div`
  ${gridContainer()}
`

export class GridMedia extends React.Component {
  render () {
    return [
      <h1 key={'header'}><code>gridMedia</code></h1>,
      <ThemeProvider key={'provider'} theme={Neat()}>
        <Container>
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
          <Column />
        </Container>
      </ThemeProvider>
    ]
  }
}

Essentially gridMedia is going to take a theme and then inject the CSS object in the array. There's a bug here because it's only detecting the first argument. This will be fixed shortly, but in the meanwhile the example above should work.

I'm going to include this example in the updated docs as well as with demos I'm including.

Thanks for your feedback.

[magicink]

I've included a demo in the repo. You can run the demo by running npm run build:demo followed by npm run start:demo

[dac09]

Thanks 👍 I'll give it ago soon