diff --git a/frontend/package.json b/frontend/package.json
index 8baf1065..377bfdb1 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
index 87ccdbc0..aa46b8bc 100644
--- a/frontend/src/containers/app.js
+++ b/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 = (
+
+ {_children}
+
+ );
}
return (
- {children}
+ {_children}
);
}
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 25517994..0ae61dbd 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -10,7 +10,6 @@ if (process.env.NODE_ENV !== 'production') {
const render = () => {
const Root = require('./root');
-
ReactDOM.render(
,
document.getElementById('root')
diff --git a/ui/src/components/baseline-grid/index.js b/ui/src/components/baseline-grid/index.js
new file mode 100644
index 00000000..4a3b1781
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+};
+
+Baseline.propTypes = {
+ children: React.PropTypes.node,
+};
+
+module.exports = Baseline;
diff --git a/ui/src/components/baseline-grid/readme.md b/ui/src/components/baseline-grid/readme.md
new file mode 100644
index 00000000..e7d5b6a3
--- /dev/null
+++ b/ui/src/components/baseline-grid/readme.md
@@ -0,0 +1,37 @@
+# ``
+
+## 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(
+
+
+
+
+
+
+
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Icon = require('ui/icon');
+
+module.exports = () => {
+ return (
+
+ );
+}
+```
diff --git a/ui/src/components/baseline-grid/style.css b/ui/src/components/baseline-grid/style.css
new file mode 100644
index 00000000..86e66eb4
--- /dev/null
+++ b/ui/src/components/baseline-grid/style.css
@@ -0,0 +1,3 @@
+.icon {
+ font-size: inherit;
+}