Medium #1 - Grid Example 2

Medium #1 - Grid Example 2.jsx

import withResponsiveProps from 'responsive-props'
import styled from 'styled-components'

// A column component created with Styled Components
const Column = styled.div`
  // Base styles
  box-sizing: border-box;
  width: 100%;
  flex: 0 0 auto;
  padding: 1rem,

  // Apply styles from responsive props
  ${({ responsiveProps }) => responsiveProps}
`;

// Span mixin example
// The `cols` argument will be take from the span prop passed to the component 
const span = (cols) => `
  // calculate the width 
  width: ${cols / 12 * 100 }%;
`

export const withResponsiveProps(
  // Wrapped styled component
  Column,
  // Mixins
  {span: span}
)