From 46cb7d01b8506144fa105f5e9a127b861685ec30 Mon Sep 17 00:00:00 2001
From: Florian Mettetal <florian.mettetal@gmail.com>
Date: Fri, 23 Dec 2016 09:40:23 -0700
Subject: [PATCH 1/3] Tests for responsiveHidden

---
 test/components/Col.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/test/components/Col.spec.js b/test/components/Col.spec.js
index 1a681ee..6310df6 100644
--- a/test/components/Col.spec.js
+++ b/test/components/Col.spec.js
@@ -17,6 +17,17 @@ describe('Col', () => {
     expect(className).toContain(style['col-lg-4']);
   });
 
+  it('Should hide elements when cols is 0', () => {
+    renderer.render(<Col xs={0} sm={0} md={0} lg={0} />);
+    const { type, props: { className } } = renderer.getRenderOutput();
+    expect(type).toBe('div');
+    expect(className).toContain('hidden-xs');
+    expect(className).toContain('hidden-sm');
+    expect(className).toContain('hidden-md');
+    expect(className).toContain('hidden-lg');
+  });
+
+
   it('Should add "reverse" class if "reverse" property is true', () => {
     renderer.render(<Col reverse/>);
     expect(renderer.getRenderOutput().props.className).toContain(style.reverse);

From 6c1bfe86309920afd7726adf6990acc7f1b585dc Mon Sep 17 00:00:00 2001
From: Florian Mettetal <florian.mettetal@gmail.com>
Date: Fri, 23 Dec 2016 09:40:36 -0700
Subject: [PATCH 2/3] Docs for responsiveHidden

---
 doc/app/components/home/index.jsx         | 20 ++++++++++++++++++++
 doc/app/components/home/responsiveHide.md | 14 ++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 doc/app/components/home/responsiveHide.md

diff --git a/doc/app/components/home/index.jsx b/doc/app/components/home/index.jsx
index 674c0b0..8d1c725 100644
--- a/doc/app/components/home/index.jsx
+++ b/doc/app/components/home/index.jsx
@@ -8,6 +8,7 @@ import Section from '../section';
 import Box from '../box';
 
 import responsiveMD from './responsive';
+import responsiveHideMD from './responsiveHide';
 import fluidMD from './fluid';
 import offsetMD from './offset';
 import autoWidthMD from './auto-width';
@@ -44,6 +45,25 @@ const Home = () => (
           <Markdown html = {responsiveMD} />
         </Row>
       </Section>
+      <Section title = "Hidden" description = "Set column size option to 0 to hide the contents of a column">
+        <h3><code>Medium and Large Only</code></h3>
+        <Row>
+          <Box type="row" xs={0} sm={0} md={2} lg={9} />
+          <Box type="row" xs={0} sm={0} md={2} lg={1} />
+          <Box type="row" xs={0} sm={0} md={4} lg={1} />
+          <Box type="row" xs={0} sm={0} md={4} lg={1} />
+        </Row>
+        <h3><code>XS and Small Only</code></h3>
+        <Row>
+          <Box type="row" xs={2} sm={1} md={0} lg={0} />
+          <Box type="row" xs={4} sm={1} md={0} lg={0} />
+          <Box type="row" xs={4} sm={9} md={0} lg={0} />
+          <Box type="row" xs={2} sm={1} md={0} lg={0} />
+        </Row>
+        <Row>
+          <Markdown html = {responsiveHideMD} />
+        </Row>
+      </Section>
       <Section title = "Fluid" description = "Percent based width allow fluid resizing of columns and rows.">
         <Row>
           <Box type="row" xs={12} sm={3} md={2} lg={1} />
diff --git a/doc/app/components/home/responsiveHide.md b/doc/app/components/home/responsiveHide.md
new file mode 100644
index 0000000..e964dd1
--- /dev/null
+++ b/doc/app/components/home/responsiveHide.md
@@ -0,0 +1,14 @@
+```jsx
+<Row>
+  <Col xs={0} sm={0} md={2} lg={9} />
+  <Col xs={0} sm={0} md={2} lg={1} />
+  <Col xs={0} sm={0} md={4} lg={1} />
+  <Col xs={0} sm={0} md={4} lg={1} />
+</Row>
+<Row>
+  <Col xs={2} sm={1} md={0} lg={0} />
+  <Col xs={4} sm={1} md={0} lg={0} />
+  <Col xs={4} sm={9} md={0} lg={0} />
+  <Col xs={2} sm={1} md={0} lg={0} />
+</Row>
+```

From 6822eba4c4ff91f25b56939deb95f4437aa78257 Mon Sep 17 00:00:00 2001
From: Florian Mettetal <florian.mettetal@gmail.com>
Date: Fri, 23 Dec 2016 10:38:31 -0700
Subject: [PATCH 3/3] Functionality for responsiveHidden

---
 package.json          |  2 +-
 src/components/Col.js | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 444a5c8..822762a 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "expect": "^1.13.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
-    "flexboxgrid": "^6.3.0",
+    "flexboxgrid": "Zetoff/flexboxgrid#hidden-columns",
     "isparta": "^4.0.0",
     "jsdom": "^7.0.2",
     "karma": "^0.13.3",
diff --git a/src/components/Col.js b/src/components/Col.js
index f0bc2f8..bf5fedb 100644
--- a/src/components/Col.js
+++ b/src/components/Col.js
@@ -30,6 +30,13 @@ const classMap = {
   lgOffset: 'col-lg-offset'
 };
 
+const hiddenMap = {
+  xs: 'hidden-xs',
+  sm: 'hidden-sm',
+  md: 'hidden-md',
+  lg: 'hidden-lg',
+};
+
 function getClassNames(props) {
   const extraClasses = [];
 
@@ -43,7 +50,15 @@ function getClassNames(props) {
 
   return Object.keys(props)
     .filter(key => classMap[key])
-    .map(key => style[Number.isInteger(props[key]) ? (classMap[key] + '-' + props[key]) : classMap[key]])
+    .map(key => {
+      const colsAmount = props[key];
+      if ( Number.isInteger(colsAmount) && colsAmount === 0 ) {
+        return style[hiddenMap[key]];
+      } else if ( Number.isInteger(colsAmount) ) {
+        return style[`${classMap[key]}-${colsAmount}`];
+      }
+      return style[classMap[key]];
+    })
     .concat(extraClasses)
     .join(' ');
 }