Add media queries

.eslintrc

@@ -1,6 +1,11 @@
 {
-  "extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:react/recommended"],
-  "plugins": ["prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended"
+  ],
+  "plugins": ["jsx-a11y"],
   "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 2018,
@@ -17,15 +22,12 @@
   "rules": {
     "no-console": ["error", { "allow": ["warn", "error"] }],
 
-    // Best Practices
     "curly": "error",
     "eqeqeq": "error",
     "no-eq-null": "error",
 
-    // Variables
     "no-use-before-define": ["error", "nofunc"],
 
-    // Stylistic Issues
     "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
     "comma-dangle": ["error", "always-multiline"],
     "comma-spacing": "error",
@@ -41,15 +43,13 @@
     "space-before-function-paren": ["error", "never"],
     "space-infix-ops": "error",
 
-    // ECMAScript 6
     "arrow-spacing": "error",
     "no-duplicate-imports": "error",
     "no-useless-constructor": "error",
     "no-var": "error",
     "prefer-const": "error",
     "prefer-template": "error",
 
-    // React
     "react/no-unescaped-entities": ["error", { "forbid": [">", "\"", "}"] }]
   }
 }

package.json

@@ -50,6 +50,7 @@
     "babel-eslint": "^8.2.6",
     "eslint": "^5.3.0",
     "eslint-config-prettier": "^3.0.1",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.11.1",
     "husky": "^0.14.3",

src/style/index.js

@@ -1,6 +1,7 @@
 import theme from './theme';
 import base from './base';
 import mixins from './mixins';
+import media from './media';
 import Img from './Img';
 import A from './A';
 import Button from './Button';
@@ -20,6 +21,7 @@ export {
   theme,
   base,
   mixins,
+  media,
   Img,
   A,
   Button,

src/style/media.js

@@ -0,0 +1,30 @@
+import { css } from 'styled-components';
+
+const sizes = {
+  giant: 1440,
+  desktop: 1000,
+  tablet: 768,
+  phablet: 480,
+  phone: 376,
+};
+
+// iterate through the sizes and create a media template
+export const media = Object.keys(sizes).reduce((accumulator, label) => {
+  // use em in breakpoints to work properly cross-browser and support users
+  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
+  const emSize = sizes[label] / 16;
+  accumulator[label] = (...args) => css`
+    @media (max-width: ${emSize}em) {
+      ${css(...args)};
+    }
+  `;
+  return accumulator;
+}, {});
+
+// Usage
+// const Container = styled.div`
+//   color: #333;
+//   ${media.desktop`padding: 0 20px;`}
+//   ${media.tablet`padding: 0 10px;`}
+//   ${media.phone`padding: 0 5px;`}
+// `;