adding dev baseline grid - toggled on / off with env varibale in npm script

frontend/package.json

@@ -9,7 +9,7 @@
     "lib": "src"
   },
   "scripts": {
-    "start": "webpack-dev-server --open --config webpack/index.js",
+    "start": "webpack-dev-server --define process.env.BASELINE_GRID=true --open --config webpack/index.js ",
     "production": "node server",
     "lint": "make lint",
     "test": "make test",

frontend/src/containers/app.js

@@ -6,6 +6,7 @@ const Styled = require('styled-components');
 const actions = require('@state/actions');
 const Article = require('@components/article');
 const Base = require('@ui/components/base');
+const BaselineGrid = require('@ui/components/baseline-grid');
 const Footer = require('@components/footer');
 const Header = require('@containers/header');
 const Home = require('@containers/home');
@@ -57,13 +58,23 @@ const App = connect()(React.createClass({
       children
     } = this.props;
 
-    if (!Array.isArray(children)) {
-      return children;
+    let _children = children;
+
+    if (!Array.isArray(_children)) {
+      return _children;
+    }
+
+    if (process.env.NODE_ENV !== 'production' && process.env.BASELINE_GRID) {
+      _children = (
+        <BaselineGrid>
+          {_children}
+        </BaselineGrid>
+      );
     }
 
     return (
       <Base>
-        {children}
+        {_children}
       </Base>
     );
   }

frontend/src/index.js

@@ -10,7 +10,6 @@ if (process.env.NODE_ENV !== 'production') {
 
 const render = () => {
   const Root = require('./root');
-
   ReactDOM.render(
     <Root />,
     document.getElementById('root')

ui/src/components/baseline-grid/index.js

@@ -0,0 +1,49 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledBaselineBackground = styled.div`
+  position: relative;
+  
+  &:after {
+    position: absolute;
+    width: auto;
+    height: auto;
+    z-index: 9999;
+    content: '';
+    display: block;
+    pointer-events: none;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(93, 150, 52, 0.50),
+      rgba(93, 150, 52, 0.50) 50%,
+      transparent 50%,
+      transparent
+    );
+    background-size: 100% 6px;
+  }
+`;
+
+const Baseline = ({
+  children
+}) => {
+
+  return (
+    <StyledBaselineBackground data-baseline>
+      {children}
+    </StyledBaselineBackground>
+  );
+};
+
+Baseline.propTypes = {
+  children: React.PropTypes.node,
+};
+
+module.exports = Baseline;

ui/src/components/baseline-grid/readme.md

@@ -0,0 +1,37 @@
+# `<Icon>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Icon = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Icon iconSet='fa' name='beer' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Icon = require('ui/icon');
+
+module.exports = () => {
+  return (
+    <Icon iconSet='fa' name='beer' />
+  );
+}
+```

ui/src/components/baseline-grid/style.css

@@ -0,0 +1,3 @@
+.icon {
+  font-size: inherit;
+}