Merge pull request #139 from picturepan2/feature/new-doc-page

Feature/new doc page

29 files changed, 514 insertions, 280 deletions

diff --git a/src/animations.less b/src/animations.less
index fa7b72a..1b7f2c0 100644
--- a/src/animations.less
+++ b/src/animations.less
@@ -7,13 +7,14 @@
     transform: rotate(360deg);
   }
 }
+
 @keyframes slide-down {
   0% {
-    margin-top: -3rem;
+    transform: translateY(-3rem);
     opacity: 0;
   }
   100% {
-    margin-top: 0;
+    transform: translateY(0);
     opacity: 1;
   }
 }
diff --git a/src/asian.less b/src/asian.less
index 79af4fe..e0af88c 100644
--- a/src/asian.less
+++ b/src/asian.less
@@ -9,6 +9,11 @@
 :lang(zh),
 :lang(ja),
 .cjk {
+  ins,
+  u {
+    border-bottom: .1rem solid;
+    text-decoration: none;
+  }
   // Credit: https://github.com/ethantw/Han
   del + del,
   del + s,
diff --git a/src/autocomplete.less b/src/autocomplete.less
index a9adc07..df99426 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -15,6 +15,11 @@
     padding: .1rem 0 .1rem .2rem;
     width: 100%;
 
+    &.is-focused {
+      border-color: @core-color;
+      .control-shadow();
+    }
+
     .form-input {
       border-color: transparent;
       box-shadow: none;
@@ -24,4 +29,9 @@
       width: auto;
     }
   }
+
+  mark {
+    font-size: 1;
+    padding: .1em 0;
+  }
 }
diff --git a/src/badges.less b/src/badges.less
index f1e2512..7669efe 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -2,21 +2,38 @@
 .badge {
   position: relative;
 
-  &[data-badge]::after {
-    background: @core-color;
-    background-clip: padding-box;
-    border: .1rem solid #fff;
-    border-radius: 1rem;
-    color: @core-light-color;
-    content: attr(data-badge);
-    display: inline-block;
-    font-size: 1.1rem;
-    height: 1.8rem;
-    line-height: 1.2rem;
-    min-width: 1.8rem;
-    padding: .2rem .5rem;
-    text-align: center;
-    transform: translate(-.2rem, -.8rem);
-    white-space: nowrap;
+  &[data-badge],
+  &:not([data-badge]),
+  &[data-badge=''] {
+    &::after {
+      background: @core-color;
+      background-clip: padding-box;
+      border: .1rem solid #fff;
+      border-radius: 1rem;
+      color: @core-light-color;
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-.2rem, -.8rem);
+    }
+  }
+  &[data-badge] {
+    &::after {
+      font-size: 1.1rem;
+      height: 1.8rem;
+      line-height: 1.2rem;
+      min-width: 1.8rem;
+      padding: .2rem .4rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+  &:not([data-badge]),
+  &[data-badge=''] {
+    &::after {
+      height: .8rem;
+      min-width: .8rem;
+      padding: 0;
+      width: .8rem;
+    }
   }
 }
diff --git a/src/base.less b/src/base.less
index bdac3e0..d19cb07 100644
--- a/src/base.less
+++ b/src/base.less
@@ -4,12 +4,14 @@
 *::after {
   box-sizing: inherit;
 }
+
 html {
   box-sizing: border-box;
   font-size: @html-font-size;
   line-height: @html-line-height;
   -webkit-tap-highlight-color: transparent;
 }
+
 body {
   background: @body-bg;
   color: @body-font-color;
@@ -18,15 +20,24 @@ body {
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
 }
+
 a {
   color: @core-link-color;
-  text-decoration: underline;
+  text-decoration: none;
+
   &:focus,
   &:hover {
-    color: darken(@core-link-color, 25%);
+    color: darken(@core-link-color, 10%);
+    text-decoration: underline;
   }
 }
 
+// Focus state
+:focus {
+  .control-shadow();
+  outline: 0;
+}
+
 // Disabled state
 &[disabled],
 .disabled {
@@ -42,7 +53,6 @@ a {
   .icon {
     font-size: 1.3333em;
     line-height: .8em;
-    margin-right: .2rem;
     vertical-align: -20%;
   }
 }
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
new file mode 100644
index 0000000..14045da
--- /dev/null
+++ b/src/breadcrumbs.less
@@ -0,0 +1,20 @@
+// Breadcrumbs
+.breadcrumb {
+  padding: 1.2rem;
+
+  .breadcrumb-item {
+    display: inline-block;
+    margin: 0;
+
+    &:last-child {
+      color: @core-meta-color;
+    }
+    &:not(:first-child) {
+      &::before {
+        color: @control-color;
+        content: "/";
+        padding: 0 .4rem;
+      }
+    }
+  }
+}
diff --git a/src/buttons.less b/src/buttons.less
index 3f0900a..bb17f13 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -11,21 +11,21 @@
   font-size: 1.4rem;
   height: 3.2rem;
   line-height: 1.6rem;
-  outline: 0;
-  padding: .7rem 1rem;
+  padding: .7rem 1.2rem;
   text-align: center;
   text-decoration: none;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: lighten(@core-secondary-color, 1%);
-    .control-shadow();
+    background: lighten(@core-secondary-color, 2%);
+    text-decoration: none;
   }
   &:hover {
     background: @core-color;
     border-color: darken(@core-color, 5%);
     color: @core-light-color;
+    text-decoration: none;
   }
   &:active,
   &.active {
@@ -101,6 +101,21 @@
     width: 100%;
   }
 
+  // Button Action
+  &.btn-action {
+    width: 3.2rem;
+    padding-left: .2rem;
+    padding-right: .2rem;
+
+    &.btn-sm {
+      width: 2.4rem;
+    }
+
+    &.btn-lg {
+      width: 4.2rem;
+    }
+  }
+
   // Button Clear
   &.btn-clear {
     background: transparent;
diff --git a/src/cards.less b/src/cards.less
index 1123586..b0fe376 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -37,15 +37,11 @@
     }
   }
   .card-title {
-    font-size: 1.4em;
+    font-size: 2rem;
     line-height: 1;
-    margin-bottom: .5rem;
-    margin-top: 0;
   }
   .card-meta {
-    color: lighten(@body-font-color, 50%);
-    font-size: 1em;
-    margin-bottom: 0;
-    margin-top: 0;
+    color: @core-meta-color;
+    font-size: 1.3rem;
   }
 }
diff --git a/src/chips.less b/src/chips.less
index 6b48df9..10f214d 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,42 +1,5 @@
 // Chips
 .chip {
-  align-content: space-around;
-  align-items: center;
-  border-radius: @border-radius;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: .5rem 0;
-
-  .chip-icon {
-    flex: 0 0 auto;
-  }
-  .chip-content {
-    flex: 1 1 auto;
-    .text-ellipsis;
-    &:not(:first-child) {
-      padding-left: 1rem;
-    }
-    &:not(:last-child) {
-      padding-right: 1rem;
-    }
-  }
-  .chip-action {
-    flex: 0 0 auto;
-  }
-  .chip-title {
-    font-size: 1.4rem;
-    line-height: 1.6rem;
-  }
-  .chip-meta {
-    color: lighten(@body-font-color, 50%);
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-  }
-}
-
-// Small chips
-.chip-sm {
   align-items: center;
   background: @core-border-color;
   border-radius: @border-radius;
@@ -45,11 +8,11 @@
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
   max-width: 100%;
-  padding: .5rem .7rem;
+  padding: .5rem .8rem;
   text-decoration: none;
   vertical-align: middle;
 
-  &.selected {
+  &.active {
     background: @core-color;
     color: @core-light-color;
   }
@@ -61,9 +24,19 @@
     width: 2rem;
   }
 
+  .chip-meta {
+    background: rgba(0,0,0,.1);
+    font-size: 80%;
+    height: 3rem;
+    line-height: 2rem;
+    margin-left: .8rem;
+    margin-right: -.8rem;
+    opacity: .75;
+    padding: .5rem .8rem;
+  }
+
   .btn-clear {
     &::before {
-      color: currentColor;
       font-size: 1.6rem;
     }
   }
diff --git a/src/empty.less b/src/empty.less
index 1108fa2..c1b1964 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,6 +1,6 @@
 // Empty states (or Blank slates)
 .empty {
-  background: @core-empty-bg;
+  background: @core-bg-color;
   border-radius: @border-radius;
   text-align: center;
   padding: 4 * @layout-gutter;
diff --git a/src/forms.less b/src/forms.less
index 7e0db4d..0184c8d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -22,7 +22,6 @@
   width: 100%;
   &:focus {
     border-color: @core-color;
-    .control-shadow();
   }
   &[disabled] {
     background: #eeeff2;
@@ -117,7 +116,6 @@
   }
   &:focus {
     border-color: @core-color;
-    .control-shadow();
   }
   &::-ms-expand {
     display: none;
diff --git a/src/labels.less b/src/labels.less
index 6bdf02c..3a72ffb 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,9 +1,8 @@
 // Labels
 .label {
   background: @core-border-color;
-  color: lighten(@body-font-color, 20%);
+  color: @core-meta-color;
   .label-base();
-  white-space: nowrap;
 
   &.label-primary {
     .label-variant(@core-color);
diff --git a/src/menus.less b/src/menus.less
index 434beec..60b2f3b 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -5,7 +5,7 @@
   display: block;
   margin: 0;
   min-width: @control-min-width;
-  padding: .5rem;
+  padding: .8rem;
   .shadow;
   text-align: left;
   transform: translateY(.5rem);
@@ -13,11 +13,10 @@
 
   .menu-item {
     border-radius: @border-radius;
-    color: @body-font-color;
     display: block;
     line-height: 2.4rem;
-    margin-top: .1rem;
-    padding: .2rem .8rem;
+    margin-top: 0;
+    padding: .3rem .8rem;
     text-decoration: none;
     user-select: none;
 
@@ -25,8 +24,8 @@
       border-radius: @border-radius;
       color: inherit;
       display: block;
-      margin: -.2rem -.8rem;
-      padding: .2rem .8rem;
+      margin: -.3rem -.8rem;
+      padding: .3rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -47,6 +46,14 @@
     line-height: 1.8rem;
     margin-top: 0;
     padding: .2rem .8rem;
+    &::after {
+      border-bottom: .1rem solid @core-border-color;
+      content: "";
+      display: block;
+      height: .1rem;
+      transform: translateY(-1rem);
+      width: 100%;
+    }
 
     .menu-header-text {
       background: #fff;
@@ -56,14 +63,5 @@
       position: relative;
       z-index: 99;
     }
-
-    &::after {
-      border-bottom: .1rem solid @core-border-color;
-      content: "";
-      display: block;
-      height: .1rem;
-      transform: translateY(-1rem);
-      width: 100%;
-    }
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
new file mode 100644
index 0000000..0d0ecad
--- /dev/null
+++ b/src/mixins.less
@@ -0,0 +1,27 @@
+// Core mixins
+.clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+.control-shadow() {
+  box-shadow: 0 0 0 .2rem fade(@core-color, 15%);
+}
+.control-transition() {
+  transition: all .15s ease;
+}
+.toast-variant(@color) {
+  background: fade(@color, 90%);
+  border-color: @color;
+}
+.label-base() {
+  border-radius: .2rem;
+  padding: .1em .3em;
+  vertical-align: baseline;
+}
+.label-variant(@color) {
+  background: @color;
+  color: @core-light-color;
+}
diff --git a/src/modals.less b/src/modals.less
index cc2e73d..306344b 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -7,10 +7,12 @@
   left: 0;
   opacity: 0;
   overflow: hidden;
+  padding: @layout-gutter; 
   position: fixed;
   right: 0;
   top: 0;
 
+  &:target,
   &.active {
     display: flex;
     opacity: 1;
@@ -25,13 +27,21 @@
       right: 0;
       top: 0;
     }
+
     .modal-container {
       animation: slide-down .216s;
+      max-width: 64rem;
+    }
+  }
+
+  &.modal-sm {
+    .modal-container {
+      max-width: 32rem;
     }
   }
 }
+
 .modal-container {
-  animation: slide-up .216s;
   background: #fff;
   border-radius: @border-radius;
   display: block;
@@ -39,36 +49,27 @@
   padding: 0;
   .shadow;
   text-align: left;
+
   z-index: 1988;
 
   .modal-header {
     padding: 1.5rem;
 
     .modal-title {
-      font-size: 1.5rem;
+      font-size: 1.6rem;
       margin: 0;
     }
   }
+
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
     padding: 1.5rem;
     position: relative;
   }
+
   .modal-footer {
     padding: 1.5rem;
     text-align: right;
   }
 }
-@media screen and (min-width: 640px) {
-  .modal-container {
-    width: 64rem;
-  }
-}
-@media screen and (min-width: 320px) {
-  .modal-sm {
-    .modal-container {
-      width: 32rem;
-    }
-  }
-}
diff --git a/src/navbar.less b/src/navbar.less
index 264dd3b..bc7e178 100755
--- a/src/navbar.less
+++ b/src/navbar.less
@@ -10,4 +10,12 @@
     display: flex;
     padding: 1rem 0;
   }
+
+  .navbar-brand {
+    font-size: 1.6rem;
+    font-weight: 500;
+    padding-right: 2rem;
+    text-decoration: none;
+    vertical-align: middle;
+  }
 }
diff --git a/src/navigation.less b/src/navigation.less
index f48937f..2115811 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -1,110 +1,13 @@
 // Navigation
 .breadcrumb,
 .tab,
-.pagination {
+.pagination,
+.nav {
   list-style: none;
   margin: .5rem 0;
 }
-// Breadcrumbs
-.breadcrumb {
-  padding: 1.2rem;
 
-  .breadcrumb-item {
-    display: inline-block;
-    margin: 0;
-
-    a {
-      text-decoration: none;
-    }
-    &:last-child {
-      &,
-      a {
-        color: @body-font-color;
-      }
-    }
-    &:not(:last-child) {
-      &::after {
-        color: @control-color;
-        content: "/";
-        padding: 0 .4rem;
-      }
-    }
-  }
-}
-
-// Tabs
-.tab {
-  border-bottom: .1rem solid @core-border-color;
-  display: flex;
-  flex-wrap: wrap;
-
-  .tab-item {
-    margin-top: 0;
-
-    a {
-      border-bottom: .2rem solid transparent;
-      color: @body-font-color;
-      display: block;
-      margin-bottom: -.1rem;
-      margin-top: 0;
-      padding: .8rem 1rem;
-      text-decoration: none;
-      &:focus,
-      &:hover {
-        color: @core-link-color;
-      }
-    }
-    &.active a,
-    a.active {
-      border-bottom-color: @core-color;
-      color: @core-link-color;
-    }
-  }
-
-  &.tab-block {
-    .tab-item {
-      flex: 1 0 auto;
-      text-align: center;
-
-      .badge {
-        &[data-badge]::after {
-          position: absolute;
-          right: -1.4rem;
-          top: 1rem;
-          transform: translate(-50%, -1rem);
-        }
-      }
-    }
-  }
-}
-
-// Pagination
-.pagination {
-  .page-item {
-    display: inline-block;
-
-    span {
-      display: inline-block;
-      padding: .6rem;
-    }
-
-    a {
-      border-radius: @border-radius;
-      color: @body-font-color;
-      display: inline-block;
-      padding: .6rem .8rem;
-      text-decoration: none;
-      &:focus,
-      &:hover {
-        color: @core-color;
-      }
-    }
-
-    &.active {
-      a {
-        background: @core-color;
-        color: @core-light-color;
-      }
-    }
-  }
-}
+@import 'src/breadcrumbs.less';
+@import 'src/tabs.less';
+@import 'src/pagination.less';
+@import 'src/navs.less';
diff --git a/src/navs.less b/src/navs.less
new file mode 100644
index 0000000..6f3d099
--- /dev/null
+++ b/src/navs.less
@@ -0,0 +1,36 @@
+// Navs
+.nav {
+  display: flex;
+  flex-direction: column;
+
+  .nav-item {
+    a {
+      color: lighten(@body-font-color, 20%);
+      padding: .6rem .8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: @core-color;
+      }
+    }
+    &.active {
+      & > a {
+        color: @body-font-color;
+        font-weight: bold;
+        &:focus,
+        &:hover {
+          color: @core-color;
+        }
+      }
+    }
+  }
+
+  & .nav {
+    margin-bottom: 1rem;
+    margin-left: 2rem;
+
+    a {
+      color: lighten(@body-font-color, 30%);
+    }
+  }
+}
diff --git a/src/normalize.less b/src/normalize.less
index 3dbe1f0..e8ffb28 100644
--- a/src/normalize.less
+++ b/src/normalize.less
@@ -82,15 +82,10 @@ hr {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -144,6 +139,7 @@ strong {
 
 code,
 kbd,
+pre,
 samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
@@ -292,15 +288,9 @@ button::-moz-focus-inner,
 }
 
 /**
- * Restore the focus styles unset by the previous rule.
+ * Restore the focus styles unset by the previous rule (removed).
  */
 
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
 
 /**
  * Change the border, margin, and padding in all browsers (opinionated) (changed).
diff --git a/src/pagination.less b/src/pagination.less
new file mode 100644
index 0000000..df41461
--- /dev/null
+++ b/src/pagination.less
@@ -0,0 +1,50 @@
+// Pagination
+.pagination {
+  display: flex;
+
+  .page-item {
+    margin: 1rem .1rem;
+
+    span {
+      display: inline-block;
+      padding: .6rem .4rem;
+    }
+
+    a {
+      border-radius: @border-radius;
+      color: lighten(@body-font-color, 20%);
+      display: inline-block;
+      padding: .6rem .8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: @core-color;
+      }
+    }
+
+    &.active {
+      a {
+        background: @core-color;
+        color: @core-light-color;
+      }
+    }
+
+    &.page-prev,
+    &.page-next {
+      flex: 1 0 50%;
+    }
+
+    &.page-next {
+      text-align: right;
+    }
+
+    .page-item-title {
+      margin: 0;
+    }
+
+    .page-item-meta {
+      margin: 0;
+      opacity: .5;
+    }
+  }
+}
diff --git a/src/progress.less b/src/progress.less
new file mode 100644
index 0000000..24c3000
--- /dev/null
+++ b/src/progress.less
@@ -0,0 +1,24 @@
+// Progress
+// Credit: https://css-tricks.com/html5-progress-element/
+.progress {
+  appearance: none;
+  border: 0;
+  color: @core-color;
+  height: .4rem;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background: @core-border-color;
+    border-radius: @border-radius;
+  }
+
+  &::-webkit-progress-value {
+    background: @core-color;
+    border-radius: @border-radius;
+  }
+
+  &::-moz-progress-bar {
+    background: @core-color;
+    border-radius: @border-radius;
+  }
+}
diff --git a/src/steps.less b/src/steps.less
new file mode 100644
index 0000000..ded6ae4
--- /dev/null
+++ b/src/steps.less
@@ -0,0 +1,70 @@
+// Steps
+.step {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: .5rem 0;
+  width: 100%;
+
+  .step-item {
+    flex: 1 1 0;
+    margin-top: 0;
+    min-height: 2rem;
+    text-align: center;
+    position: relative;
+
+    &:not(:first-child)::before {
+      background: @core-color;
+      content: "";
+      height: .2rem;
+      left: -50%;
+      position: absolute;
+      top: .9rem;
+      width: 100%;
+    }
+
+    a {
+      color: @core-meta-color;
+      display: inline-block;
+      padding: 2rem 1rem 0;
+      text-decoration: none;
+
+      &::before {
+        background: @core-color;
+        border: .2rem solid @core-light-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: 1.2rem;
+        left: 50%;
+        position: absolute;
+        top: .4rem;
+        transform: translateX(-50%);
+        width: 1.2rem;
+        z-index: 99;
+      }
+    }
+
+    &.active {
+      a {
+        &::before {
+          background: @core-light-color;
+          border: .2rem solid @core-color;
+        }
+      }
+
+      & ~ .step-item {
+        &::before {
+          background: @core-border-color;
+        }
+
+        a {
+
+          &::before {
+            background: @control-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/tables.less b/src/tables.less
index 58a1a9c..60b33d9 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -8,7 +8,7 @@
   &.table-striped {
     tbody {
       tr:nth-of-type(odd) {
-        background: lighten(@core-border-color, 5%);
+        background: @core-bg-color;
       }
     }
   }
@@ -16,15 +16,18 @@
     tbody {
       tr {
         &:hover {
-          background: lighten(@core-border-color, 2%);
+          background: darken(@core-bg-color, 3%);
         }
       }
     }
   }
-  tbody {
-    tr {
-      &.selected {
-        background: lighten(@core-border-color, 3%);
+  &,
+  &.table-striped {
+    tbody {
+      tr {
+        &.active {
+          background: darken(@core-bg-color, 3%);
+        }
       }
     }
   }
@@ -34,6 +37,6 @@
     padding: 1.5rem 1rem;
   }
   th {
-    border-color: darken(@core-border-color, 4%);
+    border-color: darken(@core-border-color, 5%);
   }
 }
diff --git a/src/tabs.less b/src/tabs.less
new file mode 100644
index 0000000..ea38709
--- /dev/null
+++ b/src/tabs.less
@@ -0,0 +1,54 @@
+// Tabs
+.tab {
+  align-items: center;
+  border-bottom: .1rem solid @core-border-color;
+  display: flex;
+  flex-wrap: wrap;
+
+  .tab-item {
+    margin-top: 0;
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    a {
+      border-bottom: .2rem solid transparent;
+      color: @body-font-color;
+      display: block;
+      margin-bottom: -.1rem;
+      margin-top: 0;
+      padding: .6rem .8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: @core-link-color;
+      }
+      &.badge {
+        padding-right: 0;
+      }
+    }
+    &.active a,
+    a.active {
+      border-bottom-color: @core-color;
+      color: @core-link-color;
+    }
+  }
+
+  &.tab-block {
+    .tab-item {
+      flex: 1 0 auto;
+      text-align: center;
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: -1.4rem;
+          top: 1rem;
+          transform: translate(-50%, -1rem);
+        }
+      }
+    }
+  }
+}
diff --git a/src/tiles.less b/src/tiles.less
new file mode 100644
index 0000000..37b157b
--- /dev/null
+++ b/src/tiles.less
@@ -0,0 +1,40 @@
+// Tiles
+.tile {
+  align-content: space-between;
+  align-items: flex-start;
+  display: flex;
+  margin: 0;
+  padding: .5rem 0;
+
+  .tile-icon {
+    flex: 0 0 auto;
+  }
+  .tile-content {
+    flex: 1 1 auto;
+    &:not(:first-child) {
+      padding-left: 1rem;
+    }
+    &:not(:last-child) {
+      padding-right: 1rem;
+    }
+  }
+  .tile-action {
+    flex: 0 0 auto;
+  }
+  .tile-title {
+    font-size: 1.6rem;
+    font-weight: 500;
+  }
+  .tile-meta {
+    color: @core-meta-color;
+    font-size: 1.3rem;
+  }
+
+  &.tile-centered {
+    align-items: center;
+
+    .tile-content {
+      overflow: hidden;
+    }
+  }
+}
diff --git a/src/tooltips.less b/src/tooltips.less
index 80468ac..f11ed26 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -20,6 +20,7 @@
     text-overflow: ellipsis;
     transform: translate(-50%, 0);
     transition: all .216s ease;
+    white-space: nowrap;
     z-index: 99;
   }
   &:focus,
diff --git a/src/typography.less b/src/typography.less
index 921d2f6..05d6782 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -7,9 +7,9 @@ h5,
 h6 {
   color: inherit;
   font-weight: 300;
-  line-height: 1.1;
+  line-height: 1.2;
   margin-bottom: 1.5rem;
-  margin-top: 2.5rem;
+  margin-top: 0;
 }
 h1 {
   font-size: 5rem;
@@ -30,7 +30,8 @@ h6 {
   font-size: 1.6rem;
 }
 p {
-  margin: 0 0 1rem;
+  line-height: 2.4rem;
+  margin: 0 0 1em;
 }
 blockquote {
   border-left: .2rem solid #ddd;
@@ -82,7 +83,7 @@ dl {
   }
 }
 mark {
-  background: lighten(@control-color-warning, 32%);
+  background: lighten(@control-color-warning, 35%);
   .label-base();
 }
 kbd {
@@ -95,32 +96,35 @@ abbr[title] {
   cursor: help;
   text-decoration: none;
 }
-ins,
-u {
-  border-bottom: .1rem solid;
-  text-decoration: none;
-}
 
 // Code
+code {
+  background: @core-border-color;
+  color: lighten(@body-font-color, 20%);
+  .label-base();
+}
 pre {
   background: lighten(@core-border-color, 4%);
   line-height: 1.8rem;
   margin-bottom: 1em;
   margin-top: 1em;
   overflow: auto;
-  padding: 1.5rem 2.5rem;
-}
-code {
-  background: @core-border-color;
-  color: lighten(@body-font-color, 20%);
-  .label-base();
-  white-space: nowrap;
+  padding: 2rem 2.5rem;
+  position: relative;
 
-  pre & {
+  > code {
     background: transparent;
     border-left: 0;
     line-height: 1.8rem;
-    margin-bottom: 0;
-    margin-top: 0;
+    padding: 0;
+
+    &::before {
+      content: attr(data-lang);
+      color: @control-color;
+      font-size: 1.2rem;
+      position: absolute;
+      right: 1rem;
+      top: .2rem;
+    }
   }
 }
diff --git a/src/utilities.less b/src/utilities.less
index 916ca51..336a210 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -135,9 +135,20 @@
   background: transparent;
   border: 0;
   color: transparent;
-  font: 0/0 a;
+  font-size: 0;
+  line-height: 0;
   text-shadow: none;
 }
+.text-assistive {
+  border: 0;
+  clip: rect(0,0,0,0);
+  height: .1rem;
+  margin: -.1rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: .1rem;
+}
 // Text
 .text-left {
   text-align: left;
diff --git a/src/variables.less b/src/variables.less
index 55b9d21..ef1ce34 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -25,10 +25,9 @@
 @core-meta-color: #888;
 @core-link-color: #5764c6;
 @core-border-color: #efefef;
-@core-empty-bg: #f8f8f8;
+@core-bg-color: #f8f8f8;
 @control-color: #c5c5c5;
 @control-color-success: #32b643;
-@control-color-info: #0193eb;
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
 
@@ -38,32 +37,3 @@
 @size-md: 840px;
 @size-lg: 960px;
 @size-xl: 1280px;
-
-// Mixins
-.clearfix() {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
-.control-shadow() {
-  box-shadow: 0 0 .4rem fade(@core-color, 25%);
-}
-.control-transition() {
-  transition: all .15s ease;
-}
-.toast-variant(@color) {
-  background: fade(@color, 90%);
-  border-color: @color;
-}
-.label-base() {
-  border-radius: .2rem;
-  font-size: .95em;
-  padding: .1em .3em;
-  vertical-align: baseline;
-}
-.label-variant(@color) {
-  background: @color;
-  color: @core-light-color;
-}