add flexbox layout

5 files changed, 83 insertions, 9 deletions

diff --git a/src/base.less b/src/base.less
index 8dc377f..1590e8e 100644
--- a/src/base.less
+++ b/src/base.less
@@ -8,6 +8,7 @@
 }
 html {
   font-size: 10px;
+  -webkit-tap-highlight-color: transparent;
 }
 body {
   color: @body-font-color;
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%;
+  }
+}
+
+
diff --git a/src/typography.less b/src/typography.less
index 7b76e62..e3a8d37 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -6,6 +6,8 @@ h4,
 h5,
 h6 {
   font-weight: 300;
+  line-height: 1.1;
+  color: inherit;
 }
 h1 {
   font-size: 5rem;
diff --git a/src/utilities.less b/src/utilities.less
index f7a7aa1..eee854a 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -1,13 +1,6 @@
 // Position
 .clearfix {
-  &:before,
-  &:after {
-    content: " "; // 1
-    display: table; // 2
-  }
-  &:after {
-    clear: both;
-  }
+  .clearfix();
 }
 .pull-left {
   float: left !important;
diff --git a/src/variables.less b/src/variables.less
index 35a1d15..d4a8cb9 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -4,4 +4,13 @@
 @body-bg: #fff;
 @body-font-color: #333;
 @body-font-size: 14px;
-@body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif;
\ No newline at end of file
+@body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif;
+
+// Mixins
+.clearfix() {
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
\ No newline at end of file