css grid to pack my layout

src/components/flow/HeroPlaceholder/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+const style = require('./style.scss');
+
+export const HeroPlaceholder = () => (
+  <div className={style.container}>
+  </div>
+);

src/components/flow/HeroPlaceholder/style.scss

@@ -0,0 +1,9 @@
+.container {
+  height: 280px;
+  width: 100%;
+  background: transparentize(white, 0.9) url("http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg") no-repeat 50% 30%;
+  background-size: cover;
+  opacity: 0.7;
+  //box-shadow: white 0 0 0 1px;
+  //border-radius: $panel_radius $panel_radius 0 0;
+}

src/components/flow/TestGrid/index.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import classnames from 'classnames';
+// import * as AutoResponsive from 'autoresponsive-react';
+// const ReactGridLayout = require('react-grid-layout');
+// import 'react-grid-layout/css/styles.css';
+// import 'react-resizable/css/styles.css';
+
+const style = require('./style.scss');
+// const Packery = require('react-packery-component')(React);
+// http://37.192.131.144/hero/photos/photo-20120825-1532512.jpg
+
+export const TestGrid = () => (
+  <div className={style.grid_test}>
+    <div className={classnames([style.cell, style.vert_1, style.hor_2])} key="b" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_2])} key="a" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="c" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="d" />
+    <div className={classnames([style.cell, style.vert_2, style.hor_3])} key="e" />
+    <div className={classnames([style.cell, style.vert_2, style.hor_2])} key="f" />
+    <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="g" />
+    <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="h" />
+    <div className={classnames([style.cell, style.vert_4, style.hor_1])} key="i" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="i" />
+  </div>
+);
+
+// export const TestGrid = () => (
+//   <ReactGridLayout
+//     className="layout"
+//     cols={4}
+//     rowHeight={256}
+//     width={1024 + 256}
+//     layout={layout}
+//     margin={[0, 0]}
+//     compactType="vertical"
+//     verticalCompact
+//   >
+//     <div className={style.cell} key="a" />
+//     <div className={style.cell} key="b" />
+//     <div className={style.cell} key="c" />
+//     <div className={style.cell} key="d" />
+//     <div className={style.cell} key="e" />
+//     <div className={style.cell} key="f" />
+//     <div className={style.cell} key="g" />
+//   </ReactGridLayout>
+// );
+
+// export const TestGrid = () => (
+//   <AutoResponsive
+//     itemMargin={0}
+//     containerWidth={1024 + 256}
+//     itemClassName={style.cell}
+//     gridWidth={256}
+//     transitionDuration={0}
+//   >
+//     <div style={{ width: 256 * 4, height: 256 * 2 }} className={style.cell} key="a" />
+//     <div style={{ width: 256, height: 256 * 2 }} className={style.cell} key="b" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="c" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="d" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="d" />
+//     <div style={{ width: 256 * 2, height: 256 * 2 }} className={style.cell} key="h" />
+//     <div style={{ width: 256 * 2, height: 256 }} className={style.cell} key="e" />
+//     <div style={{ width: 256 * 2, height: 256 }} className={style.cell} key="f" />
+//     <div style={{ width: 256 * 2, height: 256 }} className={style.cell} key="g" />
+//     <div style={{ width: 256 * 2, height: 256 }} className={style.cell} key="g1" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="d" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="d1" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="d2" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="d3" />
+//     <div style={{ width: 256, height: 256 }} className={style.cell} key="d4" />
+//   </AutoResponsive>
+// );

src/components/flow/TestGrid/style.scss

@@ -0,0 +1,52 @@
+.grid {
+  //display: grid;
+  padding: $gap / 2;
+  margin: 0 (-$gap / 2);
+}
+
+.grid_test {
+  width: 1024px;
+  display: grid;
+  grid-template-columns: repeat(5, 256px);
+  grid-template-rows: repeat(2, 256px);
+  grid-auto-rows: 256px;
+  grid-auto-flow: row dense;
+}
+
+.cell {
+  padding: $gap / 4;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0;
+
+  &::after {
+    content: ' ';
+    background: transparentize(white, 0.9);
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.vert_2 {
+  grid-row-end: span 2;
+}
+
+.vert_3 {
+  grid-row-end: span 3;
+}
+
+.vert_4 {
+  grid-row-end: span 3;
+}
+
+.hor_2 {
+  grid-column-end: span 2;
+}
+
+.hor_3 {
+  grid-column-end: span 3;
+}
+
+.hor_4 {
+  grid-column-end: span 4;
+}

src/components/main/Header/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+const style = require('./style.scss');
+const logo_sm = require('$sprites/logo_sm.svg');
+
+export const Header = () => (
+  <div className="default_container head_container">
+    <div className={style.container}>
+      <div className={style.logo}>
+        VAULT
+      </div>
+      <div className={style.spacer} />
+      <div className={style.plugs}>
+        <div>depth</div>
+        <div>boris</div>
+        <div>flow</div>
+      </div>
+      <div className={style.user_button}>
+        <div className={style.user_avatar} />
+        gvorcek
+      </div>
+    </div>
+  </div>
+);

src/components/main/Header/style.scss

@@ -0,0 +1,57 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-weight: 500;
+  padding: $gap $spc;
+}
+
+.logo {
+  font-size: 1.4em;
+  font-weight: 800;
+  display: flex;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.plugs {
+  display: flex;
+
+  > div {
+    //margin: 8px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: $gap;
+
+    &::after {
+      content: ' ';
+      margin-left: $spc;
+      background: white;
+      width: 2px;
+      height: $gap;
+      display: block;
+    }
+  }
+}
+
+.profile {
+  padding: 5px 10px;
+  box-shadow: white 0 0 0 1px;
+  border-radius: 10px;
+}
+
+.user_button {
+  padding: 0 $gap;
+  display: flex;
+  align-items: center;
+}
+
+.user_avatar {
+  width: 16px;
+  height: 16px;
+  background: transparentize(white, 0.5);
+  margin-right: $gap;
+}