From 9a8d86b09e79ddfc3be2c9aa10ffef64c029734b Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Sat, 9 Apr 2016 13:54:08 -0700
Subject: [PATCH] Replace JS driven Breakpoint component with one using media
 queries

---
 components/Breakpoint.js   | 28 ++++++++++++++++++++++++++++
 components/breakpoints.css | 16 ++++++++++++++++
 pages/docs/_template.jsx   |  9 +++++----
 3 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 components/Breakpoint.js
 create mode 100644 components/breakpoints.css

diff --git a/components/Breakpoint.js b/components/Breakpoint.js
new file mode 100644
index 00000000..8d381cf1
--- /dev/null
+++ b/components/Breakpoint.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+require('./breakpoints.css')
+
+class Breakpoint extends Component {
+  render () {
+    const { mobile, children } = this.props
+    if (mobile) {
+      return (
+        <div className="breakpoint-min-width-700">
+          {children}
+        </div>
+      )
+    } else {
+      return (
+        <div className="breakpoint-max-width-700">
+          {children}
+        </div>
+      )
+    }
+  }
+}
+
+Breakpoint.propTypes = {
+  children: React.PropTypes.object,
+  mobile: React.PropTypes.bool,
+}
+
+export default Breakpoint
diff --git a/components/breakpoints.css b/components/breakpoints.css
new file mode 100644
index 00000000..d447679b
--- /dev/null
+++ b/components/breakpoints.css
@@ -0,0 +1,16 @@
+@media only screen and (min-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: block;
+  }
+  .breakpoint-max-width-700 {
+    display: none;
+  }
+}
+@media only screen and (max-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: none;
+  }
+  .breakpoint-max-width-700 {
+    display: block;
+  }
+}
diff --git a/pages/docs/_template.jsx b/pages/docs/_template.jsx
index 5433c01f..e6852e77 100644
--- a/pages/docs/_template.jsx
+++ b/pages/docs/_template.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router'
-import { Breakpoint } from 'react-responsive-grid'
+import Breakpoint from 'components/Breakpoint'
 import find from 'lodash/find'
 import { prefixLink } from 'gatsby-helpers'
 import { config } from 'config'
@@ -58,10 +58,11 @@ module.exports = React.createClass({
         </li>
       )
     })
-
     return (
       <div>
-        <Breakpoint minWidth={700}>
+        <Breakpoint
+          mobile
+        >
           <div
             style={{
               overflowY: 'auto',
@@ -90,7 +91,7 @@ module.exports = React.createClass({
             {this.props.children}
           </div>
         </Breakpoint>
-        <Breakpoint maxWidth={700}>
+        <Breakpoint>
           <strong>Topics:</strong>
           {' '}
           <select