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