implement a simple header

frontend/src/components/article/index.js

@@ -0,0 +1,16 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('@ui/shared/functions');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+module.exports = styled.article`
+  margin-top: ${remcalc(78)};
+`;

frontend/src/components/footer/index.js

@@ -0,0 +1,7 @@
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+module.exports = styled.footer``;

frontend/src/components/header/index.js

@@ -0,0 +1,46 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const Column = require('@ui/components/column');
+const Container = require('@ui/components/container');
+const fns = require('@ui/shared/functions');
+const logo = require('@resources/logo.png');
+const Row = require('@ui/components/row');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+const StyledHeader = styled.header`
+  height: ${remcalc(78)};
+  background-color: #ffffff;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0
+`;
+
+const StyledLogo = styled.img`
+  padding-top: ${remcalc(21)};
+  padding-bottom: ${remcalc(21)};
+`;
+
+const Header = () => {
+  return (
+    <StyledHeader>
+      <Container fluid>
+        <Row>
+          <Column xs={2}>
+            <StyledLogo src={logo} />
+          </Column>
+        </Row>
+      </Container>
+    </StyledHeader>
+  );
+};
+
+module.exports = Header;

frontend/src/containers/app.js

@@ -1,8 +1,13 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
 const ReactRouter = require('react-router');
+const Styled = require('styled-components');
 
 const actions = require('@state/actions');
+const Article = require('@components/article');
+const Base = require('@ui/components/base');
+const Footer = require('@components/footer');
+const Header = require('@components/header');
 const Home = require('@containers/home');
 const NotFound = require('@containers/not-found');
 
@@ -19,6 +24,10 @@ const {
   Match
 } = ReactRouter;
 
+const {
+  injectGlobal
+} = Styled;
+
 const App = connect()(React.createClass({
   propTypes: {
     children: React.PropTypes.node,
@@ -35,6 +44,10 @@ const App = connect()(React.createClass({
     // that doens't pass it's instance to matched routes
     // wait for react-router-redux@5
     dispatch(updateRouter(router));
+
+    injectGlobal`
+      ${Base.global}
+    `;
   },
   render: function() {
     const {
@@ -46,9 +59,9 @@ const App = connect()(React.createClass({
     }
 
     return (
-      <div>
+      <Base>
         {children}
-      </div>
+      </Base>
     );
   }
 }));
@@ -56,6 +69,8 @@ const App = connect()(React.createClass({
 module.exports = (props) => {
   return (
     <App {...props}>
+      <Header />
+      <Article>
         <Match
           component={Home}
           exactly
@@ -64,6 +79,8 @@ module.exports = (props) => {
         <Miss
           component={NotFound}
         />
+      </Article>
+      <Footer />
     </App>
   );
 };

ui/src/components/base/index.js

@@ -476,3 +476,5 @@ module.exports = styled.div`
     -webkit-appearance: none;
   }
 `;
+
+module.exports.global = require('./global');