[WIP] Proposed layout modules

3 files changed, 122 insertions, 4 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
new file mode 100644
index 000000000..c5b816f9d
--- /dev/null
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface WrapWidths {
+  default: string,
+  full: string,
+  medium: string,
+  narrow: string,
+  [key: string]: string,
+}
+
+interface ColumnWidths {
+  [key: string]: string,
+}
+
+interface SectionProps {
+  noPadding?: any,
+  bgColor?: string,
+}
+
+interface WrapProps {
+  width?: 'default' | 'full' | 'medium' | 'narrow',
+  bgColor?: string,
+}
+
+interface ColumnProps {
+  colWidth?: '1/4' | '1/3' | '1/2' | '2/3',
+}
+
+const GUTTER = 30 as number;
+const WRAPPER_WIDTHS: WrapWidths = {
+  default: `calc(100% - ${GUTTER * 2}px)`,
+  full: '100%',
+  medium: '1136px',
+  narrow: '930px',
+};
+const COLUMN_WIDTHS: ColumnWidths = {
+  '1/4': `calc(${(1 / 4) * 100}% - ${(GUTTER * 3) / 4}px)`,
+  '1/3': `calc(${(1 / 3) * 100}% - ${(GUTTER * 2) / 3}px)`,
+  '1/2': `calc(${(1 / 2) * 100}% - ${GUTTER / 2}px)`,
+  '2/3': `calc(${(2 / 3) * 100}% - ${GUTTER / 2}px)`,
+};
+
+export const Section = styled.section<SectionProps>`
+  width: 100%;
+  padding: ${props => !props.noPadding && '30px'};
+  background-color: ${props => props.bgColor};
+  border: 1px solid blue;
+`;
+
+export const Wrap = styled.div<WrapProps>`
+  max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
+  background-color: ${props => props.bgColor};
+  margin: 0 auto;
+  border: 1px solid green;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Column = styled.div<ColumnProps>`
+  width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
+  padding: 30px;
+  border: 1px solid yellow;
+`;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 0a62a1783..eebf6c25c 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import styled from 'styled-components';
 import { GlobalStyles } from 'ts/@next/constants/globalStyle';
+import { Header } from 'ts/@next/components/header';
 
-import { Header } from './header';
 
 interface Props {
 
@@ -16,11 +17,19 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
 
       <Header />
 
-      {children}
+      <Main>
+        { children }
+      </Main>
 
       <footer>OMG FOOTER</footer>
     </>
   );
 };
 
-export { SiteWrap };
+const Main = styled.main`
+  border: 1px solid blue;
+  padding: 30px;
+`;
+
+
+export { SiteWrap }
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 64ef15274..709b77e76 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,9 +1,54 @@
 import * as React from 'react';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { Section, Wrap, Column } from 'ts/@next/components/layout';
 
 
 export const NextLanding = () => (
   <SiteWrap>
-    <div>Hello</div>
+    <Section>
+      <Wrap>
+        <Column colWidth="2/3">
+          Powering Decentralized Exchange<br/>
+          Example of a 2/3 1/3 assymetric composition
+        </Column>
+
+        <Column colWidth="1/3">
+          RIGHT IMAGE
+        </Column>
+      </Wrap>
+    </Section>
+
+    <Section bgColor="#003831">
+      <Wrap
+        width="narrow">
+        0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets.
+      </Wrap>
+
+      <Wrap>
+        <Column colWidth="1/3">
+          This
+        </Column>
+
+        <Column colWidth="1/3">
+          is a
+        </Column>
+
+        <Column colWidth="1/3">
+          three-column module
+        </Column>
+      </Wrap>
+    </Section>
+
+    <Section>
+      <Wrap>
+        <Column colWidth="1/2">
+          This is a 2 COLUMN section
+        </Column>
+
+        <Column colWidth="1/2">
+          Again a 2 column section
+        </Column>
+      </Wrap>
+    </Section>
   </SiteWrap>
 );