added prettier

.prettierignore

@@ -0,0 +1 @@
+node_modules/

.storybook/addons.js

@@ -1 +1 @@
-import '@storybook/addon-storysource/register'
+import '@storybook/addon-storysource/register'

.storybook/config.js

@@ -1,8 +1,7 @@
 import { addDecorator, configure } from '@storybook/react'
 
-
 const loadStories = () => {
   require('../stories')
 }
 
-configure(loadStories, module)
+configure(loadStories, module)

.storybook/webpack.config.js

@@ -5,8 +5,8 @@ module.exports = {
         exclude: /node_modules/,
         test: /\.js$/,
         loaders: [require.resolve('@storybook/addon-storysource/loader')],
-        enforce: 'pre',
-      },
-    ],
-  },
-}
+        enforce: 'pre'
+      }
+    ]
+  }
+}

README.md

@@ -9,24 +9,24 @@ View Storybook examples here: https://magicink.github.io/neat-components/
 ### Usage
 
 ```javascript
-import React, { Component } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import Neat, { gridContainer, gridColumn, gridShift } from "neat-components";
+import React, { Component } from 'react'
+import styled, { ThemeProvider } from 'styled-components'
+import Neat, { gridContainer, gridColumn, gridShift } from 'neat-components'
 
 let constants = () => {
   return `
     background-color: blue;
     height: 50px;
     margin-top: 1em;
-  `;
-};
+  `
+}
 
 let Container = styled.div`
   ${gridContainer()};
-`;
+`
 let Column = styled.div`
   ${constants()} ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -41,11 +41,11 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 
-export default App;
+export default App
 ```
 
 ## API
@@ -71,17 +71,17 @@ You can pass in a `settings` object to create a custom grid. The `settings` obje
 **`media`**: Used by `gridMedia()` to specify the media the grid should be applied. It can accept a string (i.e. `only screen and (max-width: 800px)`) or a number (i.e `800`). The later would produce `only screen and (min-width: 800px)`. Defaults to `null`.
 
 ```javascript
-const CustomGrid = Neat({ columns: 3, gutter: "60px" });
+const CustomGrid = Neat({ columns: 3, gutter: '60px' })
 const Container = styled.div`
   margin-top: 1rem;
   ${gridContainer()};
-`;
+`
 const WideColumn = styled.div`
   background-image: linear-gradient(to bottom right, #21e9f4, #00d4ff);
   border-radius: 5px;
   height: 20rem;
   ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -93,7 +93,7 @@ class App extends Component {
           <WideColumn theme={CustomGrid} />
         </Container>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -105,37 +105,37 @@ Used to create grids within grids.
 ```javascript
 const SidebarGrid = Neat({
   columns: 3,
-  gutter: "40px"
-});
+  gutter: '40px'
+})
 
 const GalleryGrid = Neat({
   columns: 4,
-  gutter: "40px"
-});
+  gutter: '40px'
+})
 
 const Container = styled.div`
   ${gridContainer()};
-`;
+`
 
 const SideBar = styled.div`
   height: 19rem;
   ${props => gridColumn(SidebarGrid, 1)};
-`;
+`
 
 const Gallery = styled.div`
   ${props => gridColumn(GalleryGrid, 2)};
-`;
+`
 
 const GalleryContainer = styled.div`
   ${gridCollapse(GalleryGrid)} ${gridContainer()};
-`;
+`
 
 const GalleryItem = styled.div`
   background-color: #496278;
   height: 4rem;
   margin-bottom: 1rem;
   ${gridColumn(GalleryGrid, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -151,7 +151,7 @@ class App extends Component {
           </Gallery>
         </Container>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -163,7 +163,7 @@ Creates a component that occupies `span` number of a given theme's columns
 ```javascript
 let Column = styled.div`
   ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 class App extends Component {
   render() {
@@ -178,7 +178,7 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -190,15 +190,15 @@ Injects a clearfix solution into the component.
 ```javascript
 const Container = styled.div`
   ${gridContainer()};
-`;
+`
 
 class App extends Component {
   render() {
     return (
       <ThemeProvider theme={Neat()}>
         <Container>...</Container>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -225,20 +225,24 @@ const Column = styled.div`
   background-color: yellow;
   margin-top: 1rem;
   ${gridColumn(mobileGrid, 2)}
-  ${gridMedia(desktopGrid, [{
-    ...gridColumn(desktopGrid, 1),
-    'background-color': 'red'
-  }])}
+  ${gridMedia(desktopGrid, [
+    {
+      ...gridColumn(desktopGrid, 1),
+      'background-color': 'red'
+    }
+  ])}
 `
 
 const Container = styled.div`
   ${gridContainer()}
 `
 
 export class GridMedia extends React.Component {
-  render () {
+  render() {
     return [
-      <h1 key={'header'}><code>gridMedia</code></h1>,
+      <h1 key={'header'}>
+        <code>gridMedia</code>
+      </h1>,
       <ThemeProvider key={'provider'} theme={Neat()}>
         <Container>
           <Column />
@@ -258,7 +262,6 @@ export class GridMedia extends React.Component {
     ]
   }
 }
-
 ```
 
 ### gridShift(theme, shift)
@@ -271,21 +274,21 @@ let constants = () => {
     background-color: blue;
     height: 50px;
     margin-top: 1em;
-  `;
-};
+  `
+}
 
 let Container = styled.div`
   ${gridContainer()};
-`;
+`
 let Column = styled.div`
   ${constants()} ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 let Shifted = styled.div`
   ${constants()}
   ${props => gridColumn(props.theme, 1)}
   ${props => gridShift(props.theme, 2)}
-`;
+`
 
 class App extends Component {
   render() {
@@ -298,7 +301,7 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -313,21 +316,21 @@ let constants = () => {
     background-color: blue;
     height: 50px;
     margin-top: 1em;
-  `;
-};
+  `
+}
 
 let Container = styled.div`
   ${gridContainer()};
-`;
+`
 let Column = styled.div`
   ${constants()} ${props => gridColumn(props.theme, 1)};
-`;
+`
 
 let Pushed = styled.div`
   ${constants()}
   ${props => gridColumn(props.theme, 1)}
   ${props => gridPush(props.theme, 2)}
-`;
+`
 
 class App extends Component {
   render() {
@@ -340,7 +343,7 @@ class App extends Component {
           </Container>
         </div>
       </ThemeProvider>
-    );
+    )
   }
 }
 ```
@@ -351,5 +354,5 @@ Creates series of visual guidelines based on the grid system.
 
 ## References
 
-* [Neat 2.x](http://neat.bourbon.io)
-* [styled-components](https://www.styled-components.com/)
+- [Neat 2.x](http://neat.bourbon.io)
+- [styled-components](https://www.styled-components.com/)