grid component

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 {

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
+}

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

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);
+  }
+}

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);

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);