From d717f2356b88756ca31755139822ff6f2f138e9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Mon, 24 Oct 2016 17:38:35 +0100
Subject: [PATCH] grid component

---
 ui/docs/root.js                  |  2 +-
 ui/src/components/grid/index.js  | 22 ++++++++++++++++++
 ui/src/components/grid/readme.md | 16 +++++++++++++
 ui/src/components/grid/style.css | 40 ++++++++++++++++++++++++++++++++
 ui/src/constants/breakpoints.css |  8 +++++++
 ui/src/constants/sizes.css       | 38 ++++++++++++++++++++++++++++++
 6 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/grid/index.js
 create mode 100644 ui/src/components/grid/readme.md
 create mode 100644 ui/src/components/grid/style.css
 create mode 100644 ui/src/constants/breakpoints.css
 create mode 100644 ui/src/constants/sizes.css

diff --git a/ui/docs/root.js b/ui/docs/root.js
index 8d066a68..700a7282 100644
--- a/ui/docs/root.js
+++ b/ui/docs/root.js
@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactHotLoader = require('react-hot-loader');
-const Button = require('../src/components/button/readme.md');
+const Button = require('../src/components/grid/readme.md');
 const InnerHTML = require('dangerously-set-inner-html');
 
 const {
diff --git a/ui/src/components/grid/index.js b/ui/src/components/grid/index.js
new file mode 100644
index 00000000..d2b0e98c
--- /dev/null
+++ b/ui/src/components/grid/index.js
@@ -0,0 +1,22 @@
+// based on https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
+
+const React = require('react');
+const style = require('./style.css');
+
+const Grid = module.exports = ({
+  fluid = false,
+  children
+}) => {
+  const className = style[fluid ? 'container-fluid' : 'container'];
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+Grid.propTypes = {
+  fluid: React.PropTypes.bool,
+  children: React.PropTypes.node
+}
diff --git a/ui/src/components/grid/readme.md b/ui/src/components/grid/readme.md
new file mode 100644
index 00000000..3a0d806c
--- /dev/null
+++ b/ui/src/components/grid/readme.md
@@ -0,0 +1,16 @@
+# `<Grid>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Grid = require('./index.js');
+const Button = require('../button');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Grid><Button>Hello World</Button></Grid>
+);
+```
+
+## usage
diff --git a/ui/src/components/grid/style.css b/ui/src/components/grid/style.css
new file mode 100644
index 00000000..d84c891d
--- /dev/null
+++ b/ui/src/components/grid/style.css
@@ -0,0 +1,40 @@
+/*
+ * based on
+ * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
+ */
+
+@value outer-margin, container-sm, container-md, container-lg from "../../constants/sizes.css";
+@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
+
+:root {
+  --outer-margin: outer-margin;
+  --container-sm: container-sm;
+}
+
+.container-fluid, .container {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container-fluid {
+  padding-right: var(--outer-margin);
+  padding-left: var(--outer-margin);
+}
+
+@media sm-viewport {
+  .container {
+    width: var(--container-sm, 46rem);
+  }
+}
+
+@media md-viewport {
+  .container {
+    width: var(--container-md, 61rem);
+  }
+}
+
+@media lg-viewport {
+  .container {
+    width: var(--container-lg, 71rem);
+  }
+}
diff --git a/ui/src/constants/breakpoints.css b/ui/src/constants/breakpoints.css
new file mode 100644
index 00000000..d200c9b6
--- /dev/null
+++ b/ui/src/constants/breakpoints.css
@@ -0,0 +1,8 @@
+/*
+ * based on
+ * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
+ */
+
+@value sm-viewport: only screen and (min-width: 48em);
+@value md-viewport: only screen and (min-width: 64em);
+@value lg-viewport: only screen and (min-width: 75em);
diff --git a/ui/src/constants/sizes.css b/ui/src/constants/sizes.css
new file mode 100644
index 00000000..69d08deb
--- /dev/null
+++ b/ui/src/constants/sizes.css
@@ -0,0 +1,38 @@
+/*
+ * based on
+ * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
+ */
+
+:root {
+  --gutter-width: 1rem;
+  --outer-margin: 2rem;
+  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
+  --half-gutter-width: calc((var(--gutter-width) * 0.5));
+  --xs-min: 30;
+  --sm-min: 48;
+  --md-min: 64;
+  --lg-min: 75;
+  --screen-xs-min: var(--xs-min)em;
+  --screen-sm-min: var(--sm-min)em;
+  --screen-md-min: var(--md-min)em;
+  --screen-lg-min: var(--lg-min)em;
+  --container-sm: calc(var(--sm-min) + var(--gutter-width));
+  --container-md: calc(var(--md-min) + var(--gutter-width));
+  --container-lg: calc(var(--lg-min) + var(--gutter-width));
+}
+
+@value gutter-width: var(--gutter-width);
+@value outer-margin: var(--outer-margin);
+@value gutter-compensation: var(--gutter-compensation);
+@value half-gutter-width: var(--half-gutter-width);
+@value xs-min: var(--xs-min);
+@value sm-min: var(--sm-min);
+@value md-min: var(--md-min);
+@value lg-min: var(--lg-min);
+@value screen-xs-min: var(--screen-xs-min);
+@value screen-sm-min: var(--screen-sm-min);
+@value screen-md-min: var(--screen-md-min);
+@value screen-lg-min: var(--screen-lg-min);
+@value container-sm: var(--container-sm);
+@value container-md: var(--container-md);
+@value container-lg: var(--container-lg);