add flexbox layout

1 files changed, 69 insertions, 0 deletions

diff --git a/src/layout.less b/src/layout.less
index b1e35d6..7879aff 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -1 +1,70 @@
 // Layout
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+  &:extend(.clearfix all);
+}
+
+.columns {
+  display: flex;
+  margin-left: -10px;
+  margin-right: -10px;
+  &:extend(.clearfix all);
+}
+.column {
+  flex: 1;
+  padding: 10px;
+
+  &.col-12 {
+    flex: none;
+    width: 100%;
+  }
+  &.col-11 {
+    flex: none;
+    width: 91.66666667%;
+  }
+  &.col-10 {
+    flex: none;
+    width: 83.33333333%;
+  }
+  &.col-9 {
+    flex: none;
+    width: 75%;
+  }
+  &.col-8 {
+    flex: none;
+    width: 66.66666667%;
+  }
+  &.col-7 {
+    flex: none;
+    width: 58.33333333%;
+  }
+  &.col-6 {
+    flex: none;
+    width: 50%;
+  }
+  &.col-5 {
+    flex: none;
+    width: 41.66666667%;
+  }
+  &.col-4 {
+    flex: none;
+    width: 33.33333333%;
+  }
+  &.col-3 {
+    flex: none;
+    width: 25%;
+  }
+  &.col-2 {
+    flex: none;
+    width: 16.66666667%;
+  }
+  &.col-1 {
+    flex: none;
+    width: 8.33333333%;
+  }
+}
+
+