johnnyBira

function reduce(arr, fn, initial) {
	let result;
  function recursive(i = 0, acc = initial) {
    if (i < arr.length) {
          result = fn(acc, arr[i], i)
      recursive(i + 1, result)
    }
    return result
  }
  recursive();

johnnyBira

import React from 'react'
// Import ThemeProvider from Styled Components
import { ThemeProvider } from 'styled-components'

// The components we created in the previous step
import { Row, Column } from './Grid'

// Create a theme
const theme = {
  // Responsove Props config object

johnnyBira

// Notice how the prop names matches the names of the mixins/functions passed to Responsive Props
<Row>
  <Column span={{ s: 6, l: 3, xl: 2 }} order={{ l: 2 }} />
  <Column span={{ s: 6, l: 3, xl: 2 }} order={{ l: 1 }} />
  <Column span={{ s: 6 }} hidden={{ l: true }} />
  <Column span={{ s: 6 }} hidden={{ l: true }} />
</Row>

// 🎉 Works just as well with single values 🎉
<Row>

johnnyBira

...

const span = (cols) => `
  // calculate the width 
  width: ${cols / 12 * 100 }%;
`

const offset = (cols) => `
  // calculate the offset
  margin: ${cols / 12 * 100 }%;

johnnyBira

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,

johnnyBira

<Row>
  <Column span={{ m: 8 }} />
  <Column span={{ m: 4 }} />
</Row>

johnnyBira

// Pass multiple values that will apply different styles at differetn media queries
<MyStyledComponent someProp={{xs: 'val1', l: 'val2', xl: 'val3' }} />

// Optionally pass one value what will apply styles without media queries, i.e all window sizes
<MyStyledComponent someProp="val1" />

johnnyBira

<Column
  columns={{ m: 6, l: 3, xl: 2 }}
  offset={{ m: 2, l: 3, xl: 4 }}
  direction={{ m: 'reverse' }}
  verticalAlignSelf={{ l: 'center' }}
/>

johnnyBira

<Column columns={{ m: 6, l: 3, xl: 2 }} />