Merge pull request #266 from picturepan2/0.4.0 v0.4.0

0.4.0

70 files changed, 1431 insertions, 1320 deletions

diff --git a/src/accordions.less b/src/_accordions.scss
index 810d264..685c9a5 100644
--- a/src/accordions.less
+++ b/src/_accordions.scss
@@ -10,14 +10,14 @@
           }
         }
         & ~ .accordion-body {
-          max-height: 1000px;
+          max-height: 50rem;
         }
       }
     }
 
     .accordion-header {
       display: block;
-      padding: @unit-1 @unit-2;
+      padding: $unit-1 $unit-2;
 
       .icon {
         transition: all .2s ease;
@@ -25,7 +25,7 @@
     }
 
     .accordion-body {
-      margin-bottom: @layout-spacing;
+      margin-bottom: $layout-spacing;
       max-height: 0;
       overflow: hidden;
       transition: max-height .2s ease;
diff --git a/src/animations.less b/src/_animations.scss
index f6b8724..e7fde1a 100644
--- a/src/animations.less
+++ b/src/_animations.scss
@@ -11,7 +11,7 @@
 @keyframes slide-down {
   0% {
     opacity: 0;
-    transform: translateY(-@unit-8);
+    transform: translateY(-$unit-8);
   }
   100% {
     opacity: 1;
diff --git a/src/asian.less b/src/_asian.scss
index a68cb39..5f7533e 100644
--- a/src/asian.less
+++ b/src/_asian.scss
@@ -1,14 +1,14 @@
 // Optimized for East Asian CJK
 :lang(zh) {
-  font-family: @cjk-zh-font-family;
+  font-family: $cjk-zh-font-family;
 }
 
 :lang(ja) {
-  font-family: @cjk-jp-font-family;
+  font-family: $cjk-jp-font-family;
 }
 
 :lang(ko) {
-  font-family: @cjk-ko-font-family;
+  font-family: $cjk-ko-font-family;
 }
 
 :lang(zh),
@@ -16,7 +16,7 @@
 .cjk {
   ins,
   u {
-    border-bottom: @border-width solid;
+    border-bottom: $border-width solid;
     text-decoration: none;
   }
 
diff --git a/src/autocomplete.less b/src/_autocomplete.scss
index 111ecf6..0101493 100644
--- a/src/autocomplete.less
+++ b/src/_autocomplete.scss
@@ -7,12 +7,12 @@
     display: flex;
     flex-wrap: wrap;
     height: auto;
-    min-height: @unit-8;
-    padding: @unit-h;
+    min-height: $unit-8;
+    padding: $unit-h;
 
     &.is-focused {
-      border-color: @primary-color;
-      .control-shadow();
+      @include control-shadow();
+      border-color: $primary-color;
     }
 
     .form-input {
@@ -20,18 +20,13 @@
       box-shadow: none;
       display: inline-block;
       flex: 1 0 auto;
-      height: @unit-6;
-      line-height: @unit-4;
-      margin: @unit-h;
+      height: $unit-6;
+      line-height: $unit-4;
+      margin: $unit-h;
       width: auto;
     }
   }
 
-  mark {
-    font-size: 1;
-    padding: .1em 0;
-  }
-
   .menu {
     left: 0;
     position: absolute;
diff --git a/src/avatars.less b/src/_avatars.scss
index 1fa075a..53bda1d 100644
--- a/src/avatars.less
+++ b/src/_avatars.scss
@@ -1,9 +1,9 @@
 // Avatars
 .avatar {
-  .avatar-base();
-  background: @primary-color;
+  @include avatar-base();
+  background: $primary-color;
   border-radius: 50%;
-  color: fade(@light-color, 85%);
+  color: rgba($light-color, .85);
   display: inline-block;
   font-weight: 300;
   line-height: 1;
@@ -12,16 +12,16 @@
   vertical-align: middle;
 
   &.avatar-xs {
-    .avatar-base(@unit-4);
+    @include avatar-base($unit-4);
   }
   &.avatar-sm {
-    .avatar-base(@unit-6);
+    @include avatar-base($unit-6);
   }
   &.avatar-lg {
-    .avatar-base(@unit-12);
+    @include avatar-base($unit-12);
   }
   &.avatar-xl {
-    .avatar-base(@unit-16);
+    @include avatar-base($unit-16);
   }
 
   img {
@@ -29,39 +29,39 @@
     height: 100%;
     position: relative;
     width: 100%;
-    z-index: @zindex-0;
+    z-index: $zindex-0;
   }
 
   .avatar-icon,
   .avatar-presence {
-    background: @bg-color-light;
+    background: $bg-color-light;
     bottom: 14.64%;
     height: 50%;
-    padding: @border-width-lg;
+    padding: $border-width-lg;
     position: absolute;
     right: 14.64%;
     transform: translate(50%, 50%);
     width: 50%;
-    z-index: @zindex-0 + 1;
+    z-index: $zindex-0 + 1;
   }
 
   .avatar-presence {
-    background: @gray-color;
-    box-shadow: 0 0 0 @border-width-lg @light-color;
+    background: $gray-color;
+    box-shadow: 0 0 0 $border-width-lg $light-color;
     border-radius: 50%;
     height: .5em;
     width: .5em;
 
     &.online {
-      background: @success-color;
+      background: $success-color;
     }
 
     &.busy {
-      background: @error-color;
+      background: $error-color;
     }
 
     &.away {
-      background: @warning-color;
+      background: $warning-color;
     }
   }
 
@@ -72,6 +72,6 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: @zindex-0;
+    z-index: $zindex-0;
   }
 }
diff --git a/src/badges.less b/src/_badges.scss
index c62df9d..9f1d734 100644
--- a/src/badges.less
+++ b/src/_badges.scss
@@ -6,11 +6,11 @@
   &[data-badge],
   &:not([data-badge]) {
     &::after {
-      background: @primary-color;
+      background: $primary-color;
       background-clip: padding-box;
       border-radius: .5rem;
-      box-shadow: 0 0 0 .1rem @bg-color-light;
-      color: @light-color;
+      box-shadow: 0 0 0 .1rem $bg-color-light;
+      color: $light-color;
       content: attr(data-badge);
       display: inline-block;
       transform: translate(-.1rem, -.5rem);
@@ -18,7 +18,7 @@
   }
   &[data-badge] {
     &::after {
-      font-size: @font-size-sm;
+      font-size: $font-size-sm;
       height: 18px;
       line-height: 1;
       min-width: 18px;
@@ -54,17 +54,17 @@
       top: 14.64%;
       right: 14.64%;
       transform: translate(50%, -50%);
-      z-index: @zindex-1;
+      z-index: $zindex-1;
     }
   }
 
   &.avatar-xs {
     &::after {
       content: "";
-      height: @unit-2;
-      min-width: @unit-2;
+      height: $unit-2;
+      min-width: $unit-2;
       padding: 0;
-      width: @unit-2;
+      width: $unit-2;
     }
   }
 }
diff --git a/src/bars.less b/src/_bars.scss
index 4c3824a..47e21c9 100644
--- a/src/bars.less
+++ b/src/_bars.scss
@@ -1,36 +1,36 @@
 // Bars
 .bar {
-  background: @bg-color-dark;
-  border-radius: @border-radius;
+  background: $bg-color-dark;
+  border-radius: $border-radius;
   display: flex;
   flex-wrap: nowrap;
-  height: @unit-4;
+  height: $unit-4;
   width: 100%;
 
   &.bar-sm {
-    height: @unit-1;
+    height: $unit-1;
   }
 
   // TODO: attr() support
   .bar-item {
-    background: @primary-color;
-    color: @light-color;
+    background: $primary-color;
+    color: $light-color;
     display: block;
-    font-size: @font-size-sm;
+    font-size: $font-size-sm;
     flex-shrink: 0;
-    line-height: @unit-4;
+    line-height: $unit-4;
     height: 100%;
     position: relative;
     text-align: center;
     width: 0;
 
     &:first-child {
-      border-bottom-left-radius: @border-radius;
-      border-top-left-radius: @border-radius;
+      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: $border-radius;
     }
     &:last-child {
-      border-bottom-right-radius: @border-radius;
-      border-top-right-radius: @border-radius;
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
       flex-shrink: 1;
     }
   }
@@ -38,8 +38,8 @@
 
 // Slider bar
 .bar-slider {
-  height: @border-width-lg;
-  margin: @layout-spacing 0;
+  height: $border-width-lg;
+  margin: $layout-spacing 0;
   position: relative;
 
   .bar-item {
@@ -47,25 +47,25 @@
     padding: 0;
     position: absolute;
     &:not(:last-child):first-child {
-      background: @bg-color-dark;
-      z-index: @zindex-0;
+      background: $bg-color-dark;
+      z-index: $zindex-0;
     }
   }
 
   .bar-slider-btn {
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
+    height: $unit-3;
     padding: 0;
     position: absolute;
     right: 0;
     top: 50%;
     transform: translate(50%, -50%);
-    width: @unit-3;
+    width: $unit-3;
 
     &:active {
-      box-shadow: 0 0 0 .1rem @primary-color;
+      box-shadow: 0 0 0 .1rem $primary-color;
     }
   }
 }
diff --git a/src/base.less b/src/_base.scss
index ba21bee..5f5a8d0 100644
--- a/src/base.less
+++ b/src/_base.scss
@@ -7,34 +7,34 @@
 
 html {
   box-sizing: border-box;
-  font-size: @html-font-size;
-  line-height: @html-line-height;
+  font-size: $html-font-size;
+  line-height: $html-line-height;
   -webkit-tap-highlight-color: transparent;
 }
 
 body {
-  background: @body-bg;
-  color: @body-font-color;
-  font-family: @body-font-family;
-  font-size: @font-size;
+  background: $body-bg;
+  color: $body-font-color;
+  font-family: $body-font-family;
+  font-size: $font-size;
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
 }
 
 a {
-  color: @link-color;
+  color: $link-color;
   outline: none;
   text-decoration: none;
 
   &:focus {
-    .control-shadow();
+    @include control-shadow();
   }
 
   &:focus,
   &:hover,
   &:active,
   &.active {
-    color: @link-color-dark;
+    color: $link-color-dark;
     text-decoration: underline;
   }
 }
diff --git a/src/breadcrumbs.less b/src/_breadcrumbs.scss
index 0b0f757..876eae8 100644
--- a/src/breadcrumbs.less
+++ b/src/_breadcrumbs.scss
@@ -1,28 +1,28 @@
 // Breadcrumbs
 .breadcrumb {
   list-style: none;
-  margin: @unit-1 0;
-  padding: @unit-1 0;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
 
   .breadcrumb-item {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
     display: inline-block;
     margin: 0;
-    padding: @unit-1 0;
+    padding: $unit-1 0;
 
     &:not(:last-child) {
-      margin-right: @unit-1;
+      margin-right: $unit-1;
 
       a {
-        color: @gray-color-dark;
+        color: $gray-color-dark;
       }
     }
 
     &:not(:first-child) {
       &::before {
-        color: @gray-color-light;
+        color: $gray-color-light;
         content: "/";
-        padding-right: @unit-1;
+        padding-right: $unit-1;
       }
     }
   }
diff --git a/src/buttons.less b/src/_buttons.scss
index 0c15d9e..0c9540d 100644
--- a/src/buttons.less
+++ b/src/_buttons.scss
@@ -1,42 +1,42 @@
 // Buttons
 .btn {
+  @include control-transition();
   appearance: none;
-  background: @bg-color-light;
-  border: @border-width solid @primary-color;
-  border-radius: @border-radius;
-  color: @primary-color;
-  .control-transition();
+  background: $bg-color-light;
+  border: $border-width solid $primary-color;
+  border-radius: $border-radius;
+  color: $primary-color;
   cursor: pointer;
   display: inline-block;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
   outline: none;
-  padding: @control-padding-v @control-padding-h;
+  padding: $control-padding-v $control-padding-h;
   text-align: center;
   text-decoration: none;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    .control-shadow();
+    @include control-shadow();
   }
   &:focus,
   &:hover {
-    background: @secondary-color;
-    border-color: @primary-color-dark;
+    background: $secondary-color;
+    border-color: $primary-color-dark;
     text-decoration: none;
   }
   &:active,
   &.active {
-    background: @primary-color-dark;
-    border-color: darken(@primary-color-dark, 5%);
-    color: @light-color;
+    background: $primary-color-dark;
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
     text-decoration: none;
     &.loading {
       &::after {
-        border-bottom-color: @light-color;
-        border-left-color: @light-color;
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
       }
     }
   }
@@ -50,25 +50,25 @@
 
   // Button Primary
   &.btn-primary {
-    background: @primary-color;
-    border-color: @primary-color-dark;
-    color: @light-color;
+    background: $primary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
     &:focus,
     &:hover {
-      background: darken(@primary-color-dark, 2%);
-      border-color: darken(@primary-color-dark, 5%);
-      color: @light-color;
+      background: darken($primary-color-dark, 2%);
+      border-color: darken($primary-color-dark, 5%);
+      color: $light-color;
     }
     &:active,
     &.active {
-      background: darken(@primary-color-dark, 4%);
-      border-color: darken(@primary-color-dark, 7%);
-      color: @light-color;
+      background: darken($primary-color-dark, 4%);
+      border-color: darken($primary-color-dark, 7%);
+      color: $light-color;
     }
     &.loading {
       &::after {
-        border-bottom-color: @light-color;
-        border-left-color: @light-color;
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
       }
     }
   }
@@ -77,26 +77,26 @@
   &.btn-link {
     background: transparent;
     border-color: transparent;
-    color: @link-color;
+    color: $link-color;
     &:focus,
     &:hover,
     &:active,
     &.active {
-      color: @link-color-dark;
+      color: $link-color-dark;
     }
   }
 
   // Button Sizes
   &.btn-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h * .75;
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-v-sm $control-padding-h * .75;
   }
 
   &.btn-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h * 1.5;
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-v-lg $control-padding-h * 1.5;
   }
 
   // Button Block
@@ -107,16 +107,16 @@
 
   // Button Action
   &.btn-action {
-    width: @control-size;
+    width: $control-size;
     padding-left: 0;
     padding-right: 0;
 
     &.btn-sm {
-      width: @control-size-sm;
+      width: $control-size-sm;
     }
 
     &.btn-lg {
-      width: @control-size-lg;
+      width: $control-size-lg;
     }
   }
 
@@ -125,14 +125,14 @@
     background: transparent;
     border: 0;
     color: currentColor;
-    height: @unit-4;
-    line-height: @unit-4;
-    margin-left: @unit-1;
+    height: $unit-4;
+    line-height: $unit-4;
+    margin-left: $unit-1;
     margin-right: -2px;
     opacity: .45;
     padding: 0 2px;
     text-decoration: none;
-    width: @unit-4;
+    width: $unit-4;
 
     &:hover {
       opacity: .85;
@@ -157,18 +157,18 @@
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:focus,
     &:hover,
     &:active,
     &.active {
-      z-index: @zindex-0;
+      z-index: $zindex-0;
     }
   }
 
diff --git a/src/calendars.less b/src/_calendars.scss
index e5764ea..05606dd 100644
--- a/src/calendars.less
+++ b/src/_calendars.scss
@@ -1,19 +1,19 @@
 // Calendars
 .calendar {
-  border: @border-width solid @border-color;
-  border-radius: @border-radius;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
   display: block;
   min-width: 280px;
   text-align: center;
 
   .calendar-nav {
     align-items: center;
-    background: @bg-color;
-    border-top-left-radius: @border-radius;
-    border-top-right-radius: @border-radius;
+    background: $bg-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
     display: flex;
-    font-size: @font-size-lg;
-    padding: @layout-spacing;
+    font-size: $font-size-lg;
+    padding: $layout-spacing;
   }
 
   .calendar-header,
@@ -21,7 +21,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    padding: @layout-spacing 0;
+    padding: $layout-spacing 0;
 
     .calendar-date {
       flex: 0 0 14.28%; // 7 calendar-items each row
@@ -30,60 +30,60 @@
   }
 
   .calendar-header {
-    background: @bg-color;
-    border-bottom: @border-width solid @border-color;
-    color: @gray-color;
-    font-size: @font-size-sm;
+    background: $bg-color;
+    border-bottom: $border-width solid $border-color;
+    color: $gray-color;
+    font-size: $font-size-sm;
   }
 
   .calendar-body {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 
   .calendar-date {
     border: 0;
-    padding: @unit-1;
+    padding: $unit-1;
 
     .date-item {
+      @include control-transition();
       appearance: none;
       background: transparent;
-      border: @border-width solid transparent;
+      border: $border-width solid transparent;
       border-radius: 50%;
-      color: @gray-color-dark;
-      .control-transition();
+      color: $gray-color-dark;
       cursor: pointer;
-      height: @unit-7;
-      line-height: @unit-5;
+      height: $unit-7;
+      line-height: $unit-5;
       outline: none;
-      padding: @unit-h;
+      padding: $unit-h;
       position: relative;
       text-align: center;
       text-decoration: none;
       vertical-align: middle;
       white-space: nowrap;
-      width: @unit-7;
+      width: $unit-7;
 
       &.date-today {
-        border-color: @secondary-color-dark;
-        color: @primary-color;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
       }
 
       &:focus {
-        .control-shadow();
+        @include control-shadow();
       }
 
       &:focus,
       &:hover {
-        background: @secondary-color-light;
-        border-color: @secondary-color-dark;
-        color: @primary-color;
+        background: $secondary-color-light;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
         text-decoration: none;
       }
       &:active,
       &.active {
-        background: @primary-color-dark;
-        border-color: darken(@primary-color-dark, 5%);
-        color: @light-color;
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
       }
 
       // Calendar badge support
@@ -111,9 +111,9 @@
     position: relative;
 
     &::before {
-      background: @secondary-color;
+      background: $secondary-color;
       content: "";
-      height: @unit-7;
+      height: $unit-7;
       left: 0;
       position: absolute;
       right: 0;
@@ -132,7 +132,7 @@
     }
 
     .date-item {
-      color: @primary-color;
+      color: $primary-color;
     }
   }
 
@@ -141,8 +141,8 @@
       padding: 0;
 
       .calendar-date {
-        border-bottom: @border-width solid @border-color;
-        border-right: @border-width solid @border-color;
+        border-bottom: $border-width solid $border-color;
+        border-right: $border-width solid $border-color;
         display: flex;
         flex-direction: column;
         height: 5.5rem;
@@ -159,9 +159,9 @@
 
     .date-item {
       align-self: flex-end;
-      height: @unit-7;
-      margin-right: @layout-spacing-sm;
-      margin-top: @layout-spacing-sm;
+      height: $unit-7;
+      margin-right: $layout-spacing-sm;
+      margin-top: $layout-spacing-sm;
     }
 
     .calendar-range {
@@ -185,21 +185,20 @@
       flex-grow: 1;
       line-height: 1;
       overflow-y: auto;
-      padding: @layout-spacing-sm;
+      padding: $layout-spacing-sm;
     }
 
     .calendar-event {
-      background: @secondary-color;
-      border-radius: @border-radius;
-      color: @primary-color;
-      font-size: @font-size-sm;
+      background: $secondary-color;
+      border-radius: $border-radius;
+      color: $primary-color;
+      font-size: $font-size-sm;
       display: block;
-      margin: @unit-h auto;
+      margin: $unit-h auto;
       overflow: hidden;
       padding: 3px 4px;
       text-align: left;
       text-overflow: ellipsis;
-      vertical-align: baseline;
       white-space: nowrap;
     }
   }
diff --git a/src/_cards.scss b/src/_cards.scss
new file mode 100644
index 0000000..3ecdc0a
--- /dev/null
+++ b/src/_cards.scss
@@ -0,0 +1,39 @@
+// Cards
+.card {
+  background: $bg-color-light;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: $layout-spacing-lg;
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: $layout-spacing-lg;
+    }
+  }
+
+  .card-image {
+    padding-top: $layout-spacing-lg;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}
diff --git a/src/carousels.less b/src/_carousels.scss
index 276bc1f..d68c40a 100644
--- a/src/carousels.less
+++ b/src/_carousels.scss
@@ -1,6 +1,6 @@
 // Carousels
 .carousel {
-  background: @bg-color;
+  background: $bg-color;
   display: block;
   overflow: hidden;
   position: relative;
@@ -36,15 +36,15 @@
 
     .item-prev,
     .item-next {
-      background: fade(@gray-color-light, 25%);
-      border-color: fade(@gray-color-light, 50%);
-      color: @gray-color-light;
+      background: rgba($gray-color-light, .25);
+      border-color: rgba($gray-color-light, .5);
+      color: $gray-color-light;
       opacity: 0;
       position: absolute;
       top: 50%;
       transition: all .4s ease;
       transform: translateY(-50%);
-      z-index: @zindex-2;
+      z-index: $zindex-2;
     }
     .item-prev {
       left: 1rem;
@@ -61,32 +61,32 @@
     &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
       animation: carousel-slidein .75s ease-in-out 1;
       opacity: 1;
-      z-index: @zindex-1;
+      z-index: $zindex-1;
     }
     &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
     &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
     &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
     &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-      color: @gray-color-light;
+      color: $gray-color-light;
     }
   }
 
   .carousel-nav {
-    bottom: @layout-spacing;
+    bottom: $layout-spacing;
     display: flex;
     justify-content: center;
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
     width: 10rem;
-    z-index: @zindex-2;
+    z-index: $zindex-2;
 
     .nav-item {
-      color: fade(@gray-color-light, 50%);
+      color: rgba($gray-color-light, .5);
       display: block;
       flex: 1 0 auto;
-      height: @unit-8;
-      margin: @unit-1;
+      height: $unit-8;
+      margin: $unit-1;
       max-width: 2.5rem;
       position: relative;
 
@@ -94,7 +94,7 @@
         background: currentColor;
         content: "";
         display: block;
-        height: @border-width-lg;
+        height: $border-width-lg;
         position: absolute;
         top: .5rem;
         width: 100%;
diff --git a/src/_chips.scss b/src/_chips.scss
new file mode 100644
index 0000000..0610470
--- /dev/null
+++ b/src/_chips.scss
@@ -0,0 +1,24 @@
+// Chips
+.chip {
+  align-items: center;
+  background: $bg-color-dark;
+  border-radius: 5rem;
+  color: $gray-color-dark;
+  display: inline-flex;
+  height: $unit-6;
+  margin: $unit-h;
+  max-width: 100%;
+  padding: $unit-h ($unit-2 + $unit-h);
+  text-decoration: none;
+  vertical-align: middle;
+
+  &.active {
+    background: $primary-color;
+    color: $light-color;
+  }
+
+  .avatar {
+    margin-left: -($unit-2 + $unit-h);
+    margin-right: $unit-1;
+  }
+}
diff --git a/src/_codes.scss b/src/_codes.scss
new file mode 100644
index 0000000..3d2cc10
--- /dev/null
+++ b/src/_codes.scss
@@ -0,0 +1,32 @@
+// Codes
+code {
+  @include label-base();
+  @include label-variant($code-color, lighten($code-color, 33%));
+  font-size: .65rem;
+}
+
+.code {
+  border-radius: $border-radius;
+  color: $body-font-color;
+  line-height: $line-height;
+  position: relative;
+
+  &::before {
+    content: attr(data-lang);
+    color: $gray-color;
+    font-size: $font-size-sm;
+    position: absolute;
+    right: $layout-spacing;
+    top: $unit-h;
+  }
+
+  code {
+    background: $bg-color;
+    color: inherit;
+    display: block;
+    line-height: inherit;
+    overflow-x: auto;
+    padding: 1rem;
+    width: 100%;
+  }
+}
diff --git a/src/comparison-sliders.less b/src/_comparison-sliders.scss
index 169caf4..a219863 100644
--- a/src/comparison-sliders.less
+++ b/src/_comparison-sliders.scss
@@ -29,7 +29,7 @@
     z-index: 1;
 
     .comparison-label {
-      right: @unit-4;
+      right: $unit-4;
     }
   }
 
@@ -45,37 +45,37 @@
       height: 100%;
       left: 0;
       position: absolute;
-      right: @unit-4;
+      right: $unit-4;
       top: 0;
-      z-index: @zindex-0;
+      z-index: $zindex-0;
     }
 
     &::after {
       background: currentColor;
       border-radius: 50%;
       box-shadow: 0 -5px, 0 5px;
-      color: @light-color;
+      color: $light-color;
       content: "";
       height: 3px;
       position: absolute;
-      right: @unit-2;
+      right: $unit-2;
       top: 50%;
       transform: translate(50%, -50%);
       width: 3px;
     }
 
     .comparison-label {
-      left: @unit-4;
+      left: $unit-4;
     }
   }
 
   .comparison-resizer {
     animation: first-run 1.5s 1 ease-in-out;
     cursor: ew-resize;
-    height: @unit-4;
+    height: $unit-4;
     left: 0;
     max-width: 100%;
-    min-width: @unit-4;
+    min-width: $unit-4;
     opacity: 0;
     outline: none;
     position: relative;
@@ -86,10 +86,10 @@
   }
 
   .comparison-label {
-    background: fade(@dark-color, 50%);
-    bottom: @unit-4;
-    color: @light-color;
-    padding: @unit-1 @unit-2;
+    background: rgba($dark-color, .5);
+    bottom: $unit-4;
+    color: $light-color;
+    padding: $unit-1 $unit-2;
     position: absolute;
     user-select: none;
   }
@@ -100,13 +100,13 @@
     width: 0;
   }
   25% {
-    width: @unit-12;
+    width: $unit-12;
   }
   50% {
-    width: @unit-4;
+    width: $unit-4;
   }
   75% {
-    width: @unit-6;
+    width: $unit-6;
   }
   100% {
     width: 0;
diff --git a/src/dropdowns.less b/src/_dropdowns.scss
index c1684a0..324440b 100644
--- a/src/dropdowns.less
+++ b/src/_dropdowns.scss
@@ -29,8 +29,8 @@
   // Fix dropdown-toggle border radius in button groups
   .btn-group {
     .dropdown-toggle:nth-last-child(2) {
-      border-bottom-right-radius: @border-radius;
-      border-top-right-radius: @border-radius;
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
     }
   }
 }
diff --git a/src/_empty.scss b/src/_empty.scss
new file mode 100644
index 0000000..29cddac
--- /dev/null
+++ b/src/_empty.scss
@@ -0,0 +1,21 @@
+// Empty states (or Blank slates)
+.empty {
+  background: $bg-color;
+  border-radius: $border-radius;
+  color: $gray-color-dark;
+  text-align: center;
+  padding: 4 * $layout-spacing;
+
+  .empty-icon {
+    margin-bottom: $layout-spacing-lg;
+  }
+
+  .empty-title,
+  .empty-subtitle {
+    margin: $layout-spacing auto;
+  }
+
+  .empty-action {
+    margin-top: $layout-spacing-lg;
+  }
+}
diff --git a/src/filters.less b/src/_filters.scss
index e417081..965dfa3 100644
--- a/src/filters.less
+++ b/src/_filters.scss
@@ -1,7 +1,7 @@
 // Filters
 .filter {
   .filter-nav {
-    margin: @layout-spacing 0;
+    margin: $layout-spacing 0;
   }
 
   .filter-body {
@@ -15,8 +15,8 @@
     &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
     &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
     &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
-      background: @primary-color;
-      color: @light-color;
+      background: $primary-color;
+      color: $light-color;
     }
 
     &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
diff --git a/src/forms.less b/src/_forms.scss
index 7ed91e6..58e958b 100644
--- a/src/forms.less
+++ b/src/_forms.scss
@@ -1,71 +1,71 @@
 // Forms
 .form-group {
   &:not(:last-child) {
-    margin-bottom: @layout-spacing;
+    margin-bottom: $layout-spacing;
   }
 }
 
 fieldset {
-  margin-bottom: @layout-spacing-lg;
+  margin-bottom: $layout-spacing-lg;
 }
 
 legend {
-  font-size: @font-size-lg;
+  font-size: $font-size-lg;
   font-weight: 500;
-  margin-bottom: @layout-spacing-lg;
+  margin-bottom: $layout-spacing-lg;
 }
 
 // Form element: Label
 .form-label {
   display: block;
-  padding: @control-padding-v + @border-width 0;
+  padding: $control-padding-v + $border-width 0;
 
   &.label-sm {
-    padding: @control-padding-v-sm + @border-width 0;
+    padding: $control-padding-v-sm + $border-width 0;
   }
 
   &.label-lg {
-    padding: @control-padding-v-lg + @border-width 0;
+    padding: $control-padding-v-lg + $border-width 0;
   }
 }
 
 // Form element: Input
 .form-input {
+  @include control-transition();
   appearance: none;
-  background: @bg-color-light;
+  background: $bg-color-light;
   background-image: none;
-  border: @border-width solid @border-color-dark;
-  border-radius: @border-radius;
-  color: @body-font-color;
-  .control-transition();
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: $body-font-color;
   display: block;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
   max-width: 100%;
   outline: none;
-  padding: @control-padding-v @control-padding-h;
+  padding: $control-padding-v $control-padding-h;
   position: relative;
   width: 100%;
   &:focus {
-    border-color: @primary-color;
-    .control-shadow();
+    @include control-shadow();
+    border-color: $primary-color;
   }
   &::placeholder {
-    color: @gray-color;
+    color: $gray-color;
   }
 
   // Input sizes
   &.input-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h;
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-v-sm $control-padding-h;
   }
 
   &.input-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h;
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-v-lg $control-padding-h;
   }
 
   &.input-inline {
@@ -74,45 +74,45 @@ legend {
     width: auto;
   }
 
-  // Textarea
-  textarea& {
-    height: auto;
-  }
-
   // Input types
   &[type="file"] {
     height: auto;
   }
 }
 
+// Form element: Textarea
+textarea.form-input {
+  height: auto;
+}
+
 // Form element: Input hint
 .form-input-hint {
-  color: @gray-color;
-  font-size: @font-size-sm;
-  margin-top: @unit-1;
+  color: $gray-color;
+  font-size: $font-size-sm;
+  margin-top: $unit-1;
 
   .has-success &,
   .is-success + & {
-    color: @success-color;
+    color: $success-color;
   }
 
   .has-error &,
   .is-error + & {
-    color: @error-color;
+    color: $error-color;
   }
 }
 
 // Form element: Select
 .form-select {
   appearance: none;
-  border: @border-width solid @border-color-dark;
-  border-radius: @border-radius;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
   color: inherit;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
   outline: none;
-  padding: @control-padding-v @control-padding-h;
+  padding: $control-padding-v $control-padding-h;
   vertical-align: middle;
   width: 100%;
 
@@ -121,16 +121,16 @@ legend {
     height: auto;
     
     option {
-      padding: @unit-h @unit-1;
+      padding: $unit-h $unit-1;
     }
   }
   &:not([multiple]):not([size]) {
-    background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem;
-    padding-right: @control-icon-size + @control-padding-h;
+    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-h;
   }
   &:focus {
-    border-color: @primary-color;
-    .control-shadow();
+    @include control-shadow();
+    border-color: $primary-color;
   }
   &::-ms-expand {
     display: none;
@@ -138,15 +138,15 @@ legend {
 
   // Select sizes
   &.select-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm (@control-icon-size + @control-padding-h) @control-padding-v-sm @control-padding-h;
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h;
   }
 
   &.select-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg (@control-icon-size + @control-padding-h) @control-padding-v-lg @control-padding-h;
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h;
   }
 }
 
@@ -156,32 +156,32 @@ legend {
   position: relative;
 
   .form-icon {
-    height: @control-icon-size;
-    margin: 0 @control-padding-v;
+    height: $control-icon-size;
+    margin: 0 $control-padding-v;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: @control-icon-size;
+    width: $control-icon-size;
   }
 }
 
 .has-icon-left {
   .form-icon {
-    left: @border-width;
+    left: $border-width;
   }
 
   .form-input {
-    padding-left: @control-icon-size + @control-padding-v * 2;
+    padding-left: $control-icon-size + $control-padding-v * 2;
   }
 }
 
 .has-icon-right {
   .form-icon {
-    right: @border-width;
+    right: $border-width;
   }
 
   .form-input {
-    padding-right: @control-icon-size + @control-padding-v * 2;
+    padding-right: $control-icon-size + $control-padding-v * 2;
   }
 }
 
@@ -190,8 +190,8 @@ legend {
 .form-radio,
 .form-switch {
   display: inline-block;
-  line-height: @line-height;
-  padding: (@control-size-sm - @line-height) / 2  (@control-icon-size + @control-padding-h);
+  line-height: $line-height;
+  padding: ($control-size-sm - $line-height) / 2  ($control-icon-size + $control-padding-h);
   position: relative;
 
   input {
@@ -202,18 +202,18 @@ legend {
     position: absolute;
     width: 1px;
     &:focus + .form-icon {
-      border-color: @primary-color;
-      .control-shadow();
+      @include control-shadow();
+      border-color: $primary-color;
     }
     &:checked + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
+      background: $primary-color;
+      border-color: $primary-color;
     }
   }
 
   .form-icon {
-    border: @border-width solid @border-color-dark;
-    .control-transition();
+    @include control-transition();
+    border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
@@ -223,29 +223,29 @@ legend {
 .form-checkbox,
 .form-radio {
   .form-icon {
-    background: @bg-color-light;
-    height: @control-icon-size;
+    background: $bg-color-light;
+    height: $control-icon-size;
     left: 0;
-    top: (@control-size-sm - @control-icon-size) / 2;
-    width: @control-icon-size;
+    top: ($control-size-sm - $control-icon-size) / 2;
+    width: $control-icon-size;
   }
 
   input {
     &:active + .form-icon {
-      background: @bg-color-dark;
+      background: $bg-color-dark;
     }
   }
 }
 .form-checkbox {
   .form-icon {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   input {
     &:checked + .form-icon {
       &::before {
         background-clip: padding-box;
-        border: @border-width-lg solid @light-color;
+        border: $border-width-lg solid $light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
@@ -260,10 +260,10 @@ legend {
       }
     }
     &:indeterminate + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
+      background: $primary-color;
+      border-color: $primary-color;
       &::before {
-        background: @bg-color-light;
+        background: $bg-color-light;
         content: "";
         height: 2px;
         left: 50%;
@@ -278,14 +278,14 @@ legend {
 }
 .form-radio {
   .form-icon {
-    border-radius: @control-icon-size / 2;
+    border-radius: $control-icon-size / 2;
   }
 
   input {
     &:checked + .form-icon {
       &::before {
-        background: @bg-color-light;
-        border-radius: @border-radius;
+        background: $bg-color-light;
+        border-radius: $border-radius;
         content: "";
         height: 4px;
         left: 50%;
@@ -301,27 +301,27 @@ legend {
 
 // Form element: Switch
 .form-switch {
-  padding-left: (@unit-8 + @control-padding-h);
+  padding-left: ($unit-8 + $control-padding-h);
 
   .form-icon {
-    background: @gray-color-light;
+    background: $gray-color-light;
     background-clip: padding-box;
-    border-radius: @unit-2 + @border-width;
-    height: @unit-4 + @border-width * 2;
+    border-radius: $unit-2 + $border-width;
+    height: $unit-4 + $border-width * 2;
     left: 0;
-    top: (@control-size-sm - @unit-4) / 2 - @border-width;
-    width: @unit-8;
+    top: ($control-size-sm - $unit-4) / 2 - $border-width;
+    width: $unit-8;
     &::before {
-      background: @bg-color-light;
-      border-radius: @unit-2;
+      @include control-transition();
+      background: $bg-color-light;
+      border-radius: $unit-2;
       content: "";
       display: block;
-      height: @unit-4;
+      height: $unit-4;
       left: 0;
       position: absolute;
       top: 0;
-      .control-transition();
-      width: @unit-4;
+      width: $unit-4;
     }
   }
 
@@ -333,7 +333,7 @@ legend {
     }
     &:active + .form-icon {
       &::before {
-        background: @bg-color;
+        background: $bg-color;
       }
     }
   }
@@ -344,19 +344,19 @@ legend {
   display: flex;
 
   .input-group-addon {
-    background: @bg-color;
-    border: @border-width solid @border-color-dark;
-    border-radius: @border-radius;
-    line-height: @line-height;
-    padding: @control-padding-v @control-padding-h;
+    background: $bg-color;
+    border: $border-width solid $border-color-dark;
+    border-radius: $border-radius;
+    line-height: $line-height;
+    padding: $control-padding-v $control-padding-h;
 
     &.addon-sm {
-      font-size: @font-size-sm;
-      padding: @control-padding-v-sm @control-padding-h;
+      font-size: $font-size-sm;
+      padding: $control-padding-v-sm $control-padding-h;
     }
     &.addon-lg {
-      font-size: @font-size-lg;
-      padding: @control-padding-v-lg @control-padding-h;
+      font-size: $font-size-lg;
+      padding: $control-padding-v-lg $control-padding-h;
     }
   }
 
@@ -366,7 +366,7 @@ legend {
   }
 
   .input-group-btn {
-    z-index: @zindex-0;
+    z-index: $zindex-0;
   }
 
   .form-input,
@@ -379,15 +379,15 @@ legend {
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:focus {
-      z-index: @zindex-0 + 1;
+      z-index: $zindex-0 + 1;
     }
   }
 
@@ -405,17 +405,17 @@ legend {
 .form-select {
   .has-success &,
   &.is-success {
-    border-color: @success-color;
+    border-color: $success-color;
     &:focus {
-      .control-shadow(@success-color);
+      @include control-shadow($success-color);
     }
   }
 
   .has-error &,
   &.is-error {
-    border-color: @error-color;
+    border-color: $error-color;
     &:focus {
-      .control-shadow(@error-color);
+      @include control-shadow($error-color);
     }
   }
 }
@@ -426,18 +426,18 @@ legend {
   .has-error &,
   &.is-error {
     .form-icon {
-      border-color: @error-color;
+      border-color: $error-color;
     }
     
     input {
       &:checked + .form-icon {
-        background: @error-color;
-        border-color: @error-color;
+        background: $error-color;
+        border-color: $error-color;
       }
 
       &:focus + .form-icon {
-        border-color: @error-color;
-        .control-shadow(@error-color);
+        @include control-shadow($error-color);
+        border-color: $error-color;
       }
     }
   }
@@ -447,13 +447,13 @@ legend {
 .form-input {
   &:not(:placeholder-shown) {
     &:invalid {
-      border-color: @error-color;
+      border-color: $error-color;
       &:focus {
-        .control-shadow(@error-color);
+        @include control-shadow($error-color);
       }
 
       & + .form-input-hint {
-        color: @error-color;
+        color: $error-color;
       }
     }
   }
@@ -464,7 +464,7 @@ legend {
 .form-select {
   &:disabled,
   &.disabled {
-    background-color: @bg-color-dark;
+    background-color: $bg-color-dark;
     cursor: not-allowed;
     opacity: .5;
   }
@@ -472,7 +472,7 @@ legend {
 
 .form-input {
   &[readonly] {
-    background-color: @bg-color;
+    background-color: $bg-color;
   }
 }
 
@@ -480,7 +480,7 @@ input {
   &:disabled,
   &.disabled {
     & + .form-icon {
-      background: @bg-color-dark;
+      background: $bg-color-dark;
       cursor: not-allowed;
       opacity: .5;
     }
@@ -492,7 +492,7 @@ input {
     &:disabled,
     &.disabled {
       & + .form-icon::before {
-        background: @bg-color-light;
+        background: $bg-color-light;
       }
     }
   }
@@ -500,7 +500,7 @@ input {
 
 // Form Horizontal
 .form-horizontal {
-  padding: @layout-spacing;
+  padding: $layout-spacing;
 
   .form-group {
     display: flex;
@@ -509,6 +509,6 @@ input {
   .form-checkbox,
   .form-radio,
   .form-switch {
-    margin: (@control-size - @control-size-sm) / 2 0;
+    margin: ($control-size - $control-size-sm) / 2 0;
   }
 }
diff --git a/src/icons.less b/src/_icons.scss
index ca7672d..ad092b8 100644
--- a/src/icons.less
+++ b/src/_icons.scss
@@ -1,5 +1,5 @@
 // CSS Icons
-@icon-border-width: @border-width-lg;
+$icon-border-width: $border-width-lg;
 
 .icon {
   box-sizing: border-box;
@@ -31,7 +31,7 @@
 .icon-forward,
 .icon-upward {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     content: "";
@@ -69,7 +69,7 @@
   &::after {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     width: .8em;
   }
 }
@@ -80,7 +80,7 @@
     background: currentColor;
     content: "";
     height: .8em;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
@@ -139,7 +139,7 @@
     background: currentColor;
     box-shadow: 0 -.35em, 0 .35em;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     width: 100%;
   }
 }
@@ -160,7 +160,7 @@
 .icon-resize-vert {
   &::before,
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     content: "";
@@ -209,7 +209,7 @@
   &::before {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     width: 100%;
   }
 }
@@ -219,7 +219,7 @@
     background: currentColor;
     content: "";
     height: 100%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 .icon-cross {
@@ -238,7 +238,7 @@
 // Icon check
 .icon-check {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
     content: "";
@@ -250,12 +250,12 @@
 
 // Icon stop
 .icon-stop {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   &::before {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 1em;
   }
@@ -263,7 +263,7 @@
 
 // Icon shutdown
 .icon-shutdown {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   border-top-color: transparent;
   &::before {
@@ -271,14 +271,14 @@
     content: "";
     height: .5em;
     top: .1em;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
 // Icon refresh
 .icon-refresh {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     border-right-color: transparent;
     content: "";
@@ -300,7 +300,7 @@
 // Icon search
 .icon-search {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .75em;
@@ -312,7 +312,7 @@
   &::after {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     left: 80%;
     top: 80%;
     transform: translate(-50%, -50%) rotate(45deg);
@@ -323,7 +323,7 @@
 // Icon edit
 .icon-edit {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     content: "";
     height: .4em;
     transform: translate(-40%, -60%) rotate(-45deg);
@@ -345,9 +345,9 @@
 // Icon delete
 .icon-delete {
   &::before {
-    border: @icon-border-width solid currentColor;
-    border-bottom-left-radius: @border-radius;
-    border-bottom-right-radius: @border-radius;
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
     border-top: 0;
     content: "";
     height: .75em;
@@ -358,20 +358,20 @@
     background: currentColor;
     box-shadow: -.25em .2em, .25em .2em;
     content: "";
-    height: @icon-border-width;
-    top: @icon-border-width/2;
+    height: $icon-border-width;
+    top: $icon-border-width/2;
     width: .5em;
   }
 }
 
 // Icon share
 .icon-share {
-  border: @icon-border-width solid currentColor;
-  border-radius: @border-radius;
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
   border-right: 0;
   border-top: 0;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-left: 0;
     border-top: 0;
     content: "";
@@ -382,7 +382,7 @@
     width: .4em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     border-radius: 75% 0;
@@ -399,13 +399,13 @@
     content: "";
     height: 1em;
     left: 15%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
-    border-bottom-right-radius: @border-radius;
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
     border-left: 0;
-    border-top-right-radius: @border-radius;
+    border-top-right-radius: $border-radius;
     content: "";
     height: .65em;
     top: 35%;
@@ -417,19 +417,19 @@
 // Icon bookmark
 .icon-bookmark {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
-    border-top-left-radius: @border-radius;
-    border-top-right-radius: @border-radius;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
     content: "";
     height: .9em;
     width: .8em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-left: 0;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     content: "";
     height: .5em;
     transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
@@ -440,9 +440,9 @@
 // Icon download & upload
 .icon-download,
 .icon-upload {
-  border-bottom: @icon-border-width solid currentColor;
+  border-bottom: $icon-border-width solid currentColor;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     content: "";
@@ -455,7 +455,7 @@
     content: "";
     height: .6em;
     top: 40%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
@@ -470,14 +470,14 @@
 
 // Icon time
 .icon-time {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   &::before {
     background: currentColor;
     content: "";
     height: .4em;
     transform: translate(-50%, -75%);
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
   &::after {
     background: currentColor;
@@ -485,21 +485,21 @@
     height: .3em;
     transform: translate(-50%, -75%) rotate(90deg);
     transform-origin: 50% 90%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
 // Icon mail
 .icon-mail {
   &::before {
-    border: @icon-border-width solid currentColor;
-    border-radius: @border-radius;
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
     content: "";
     height: .8em;
     width: 1em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
     content: "";
@@ -512,7 +512,7 @@
 // Icon people
 .icon-people {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .45em;
@@ -520,7 +520,7 @@
     width: .45em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 0 0;
     content: "";
     height: .4em;
@@ -531,14 +531,14 @@
 
 // Icon message
 .icon-message {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-bottom: 0;
-  border-radius: @border-radius;
+  border-radius: $border-radius;
   border-right: 0;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-left: 0;
-    border-bottom-right-radius: @border-radius;
+    border-bottom-right-radius: $border-radius;
     border-top: 0;
     content: "";
     height: .8em;
@@ -548,22 +548,22 @@
   }
   &::after {
     background: currentColor;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     content: "";
     height: .3em;
     left: 10%;
     top: 100%;
     transform: translate(0, -90%) rotate(45deg);
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
 // Icon photo
 .icon-photo {
-  border: @icon-border-width solid currentColor;
-  border-radius: @border-radius;
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .25em;
@@ -572,7 +572,7 @@
     width: .25em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-left: 0;
     content: "";
@@ -587,7 +587,7 @@
 .icon-link {
   &::before,
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 5em 0 0 5em;
     border-right: 0;
     content: "";
@@ -605,7 +605,7 @@
 // Icon location
 .icon-location {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 50% 0;
     content: "";
     height: .8em;
@@ -613,7 +613,7 @@
     width: .8em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .2em;
@@ -624,7 +624,7 @@
 
 // Icon emoji
 .icon-emoji {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   &::before {
     border-radius: 50%;
@@ -634,7 +634,7 @@
     width: .1em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom-color: transparent;
     border-radius: 50%;
     border-right-color: transparent;
diff --git a/src/_labels.scss b/src/_labels.scss
new file mode 100644
index 0000000..271c6f0
--- /dev/null
+++ b/src/_labels.scss
@@ -0,0 +1,32 @@
+// Labels
+.label {
+  @include label-base();
+  @include label-variant(lighten($body-font-color, 5%), $bg-color);
+  display: inline-block;
+
+  &.label-rounded {
+    border-radius: 5rem;
+    padding-left: .4rem;
+    padding-right: .4rem; 
+  }
+
+  &.label-primary {
+    @include label-variant($light-color, $primary-color);
+  }
+
+  &.label-secondary {
+    @include label-variant($primary-color, $secondary-color);
+  }
+
+  &.label-success {
+    @include label-variant($light-color, $success-color);
+  }
+
+  &.label-warning {
+    @include label-variant($light-color, $warning-color);
+  }
+
+  &.label-error {
+    @include label-variant($light-color, $error-color);
+  }
+}
diff --git a/src/layout.less b/src/_layout.scss
index 7fd2c60..83e2c18 100644
--- a/src/layout.less
+++ b/src/_layout.scss
@@ -2,29 +2,31 @@
 .container {
   margin-left: auto;
   margin-right: auto;
-  padding-left: @layout-spacing;
-  padding-right: @layout-spacing;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
   width: 100%;
-  &:extend(.clearfix all);
+  @extend .clearfix;
+
+  $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
 
   &.grid-xl {
-    max-width: @size-xl + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-xl;
   }
 
   &.grid-lg {
-    max-width: @size-lg + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-lg;
   }
 
   &.grid-md {
-    max-width: @size-md + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-md;
   }
 
   &.grid-sm {
-    max-width: @size-sm + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-sm;
   }
 
   &.grid-xs {
-    max-width: @size-xs + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-xs;
   }
 }
 
@@ -41,8 +43,8 @@
 .columns {
   display: flex;
   flex-wrap: wrap;
-  margin-left: -@layout-spacing;
-  margin-right: -@layout-spacing;
+  margin-left: -$layout-spacing;
+  margin-right: -$layout-spacing;
 
   &.col-gapless {
     margin-left: 0;
@@ -61,8 +63,8 @@
 .column {
   flex: 1;
   max-width: 100%;
-  padding-left: @layout-spacing;
-  padding-right: @layout-spacing;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
 
   &.col-12,
   &.col-11,
@@ -130,7 +132,7 @@
 .col-mr-auto {
   margin-right: auto;
 }
-@media screen and (max-width: @size-xl ) {
+@media (max-width: $size-xl) {
   .col-xl-12,
   .col-xl-11,
   .col-xl-10,
@@ -188,7 +190,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-lg ) {
+@media (max-width: $size-lg) {
   .col-lg-12,
   .col-lg-11,
   .col-lg-10,
@@ -246,7 +248,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-md ) {
+@media (max-width: $size-md) {
   .col-md-12,
   .col-md-11,
   .col-md-10,
@@ -304,7 +306,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-sm ) {
+@media (max-width: $size-sm) {
   .col-sm-12,
   .col-sm-11,
   .col-sm-10,
@@ -362,7 +364,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-xs) {
+@media (max-width: $size-xs) {
   .col-xs-12,
   .col-xs-11,
   .col-xs-10,
diff --git a/src/media.less b/src/_media.scss
index a55b8cb..9b6aa1d 100644
--- a/src/media.less
+++ b/src/_media.scss
@@ -22,7 +22,6 @@
   padding: 0;
   position: relative;
   width: 100%;
-
   &::before {
     content: "";
     display: block;
@@ -41,6 +40,7 @@
     top: 0;
     width: 100%;
   }
+
   video {
     height: auto;
     max-width: 100%;
@@ -61,10 +61,10 @@
 }
 
 .figure {
-  margin: 0 0 @layout-spacing 0;
+  margin: 0 0 $layout-spacing 0;
 
   .figure-caption {
-    color: @gray-color-dark;
-    margin-top: @layout-spacing;
+    color: $gray-color-dark;
+    margin-top: $layout-spacing;
   }
 }
diff --git a/src/_menus.scss b/src/_menus.scss
new file mode 100644
index 0000000..bec6afc
--- /dev/null
+++ b/src/_menus.scss
@@ -0,0 +1,56 @@
+// Menus
+.menu {
+  @include shadow-variant(.05rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  list-style: none;
+  margin: 0;
+  min-width: $control-min-width;
+  padding: $unit-2;
+  transform: translateY($layout-spacing-sm);
+  z-index: $zindex-1;
+
+  &.menu-nav {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .menu-item {
+    margin-top: 0;
+    padding: 0 $unit-2;
+    text-decoration: none;
+    user-select: none;
+
+    & > a {
+      border-radius: $border-radius;
+      color: inherit;
+      display: block;
+      margin: 0 (-$unit-2);
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+      &:active,
+      &.active {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+    }
+
+    & + .menu-item {
+      margin-top: $unit-1;
+    }
+  }
+
+  .menu-badge {
+    float: right;
+    padding: $unit-1 0;
+
+    .btn {
+      margin-top: -$unit-h;
+    }
+  }
+}
diff --git a/src/meters.less b/src/_meters.scss
index d0b2b59..9fd98b0 100644
--- a/src/meters.less
+++ b/src/_meters.scss
@@ -2,12 +2,12 @@
 // Credit: https://css-tricks.com/html5-meter-element/
 .meter {
   appearance: none;
-  background: @bg-color;
+  background: $bg-color;
   border: 0;
-  border-radius: @border-radius;
+  border-radius: $border-radius;
   display: block;
   width: 100%;
-  height: @unit-4;
+  height: $unit-4;
 
   &::-webkit-meter-inner-element {
     display: block;
@@ -17,41 +17,41 @@
   &::-webkit-meter-optimum-value,
   &::-webkit-meter-suboptimum-value,
   &::-webkit-meter-even-less-good-value {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   &::-webkit-meter-bar {
-    background: @bg-color;
+    background: $bg-color;
   }
 
   &::-webkit-meter-optimum-value {
-    background: @success-color;
+    background: $success-color;
   }
 
   &::-webkit-meter-suboptimum-value {
-    background: @warning-color;
+    background: $warning-color;
   }
 
   &::-webkit-meter-even-less-good-value {
-    background: @error-color;
+    background: $error-color;
   }
 
   &::-moz-meter-bar,
   &:-moz-meter-optimum,
   &:-moz-meter-sub-optimum,
   &:-moz-meter-sub-sub-optimum {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   &:-moz-meter-optimum::-moz-meter-bar {
-    background: @success-color;
+    background: $success-color;
   }
 
   &:-moz-meter-sub-optimum::-moz-meter-bar {
-    background: @warning-color;
+    background: $warning-color;
   }
 
   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: @error-color;
+    background: $error-color;
   }
 }
diff --git a/src/_mixins.scss b/src/_mixins.scss
new file mode 100644
index 0000000..93788d2
--- /dev/null
+++ b/src/_mixins.scss
@@ -0,0 +1,186 @@
+// Mixins
+// Avatar mixin
+@mixin avatar-base($size: $unit-8) {
+  font-size: $size / 2;
+  height: $size;
+  width: $size;
+}
+
+// Background color utility mixin
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color;
+  }
+}
+
+// Button variant mixin
+@mixin button-variant($color: $primary-color) {
+  background: $color;
+  border-color: darken($color, 3%);
+  color: $light-color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: darken($color, 2%);
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($color, 7%);
+    border-color: darken($color, 10%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $light-color;
+      border-left-color: $light-color;
+    }
+  }
+}
+
+@mixin button-outline-variant($color: $primary-color) {
+  background: $light-color;
+  border-color: $color;
+  color: $color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten($color, 50%);
+    border-color: darken($color, 2%);
+    color: $color;
+  }
+  &:active,
+  &.active {
+    background: $color;
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $color;
+      border-left-color: $color;
+    }
+  }
+}
+
+// Clearfix mixin
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+// Component focus shadow
+@mixin control-shadow($color: $primary-color) {
+  box-shadow: 0 0 0 .1rem rgba($color, .2);
+}
+
+// Component transition
+@mixin control-transition() {
+  transition: all .2s ease;
+}
+
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  line-height: 1;
+  padding: .15rem;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}
+
+// Margin utility mixin
+@mixin margin-variant($id: 1, $size: $unit-1) {
+  .m-#{$id} {
+    margin: $size;
+  }
+  .mb-#{$id} {
+    margin-bottom: $size;
+  }
+  .ml-#{$id} {
+    margin-left: $size;
+  }
+  .mr-#{$id} {
+    margin-right: $size;
+  }
+  .mt-#{$id} {
+    margin-top: $size;
+  }
+  .mx-#{$id} {
+    margin-left: $size;
+    margin-right: $size;
+  }
+  .my-#{$id} {
+    margin-bottom: $size;
+    margin-top: $size;
+  }
+}
+
+// Padding utility mixin
+@mixin padding-variant($id: 1, $size: $unit-1) {
+  .p-#{$id} {
+    padding: $size;
+  }
+  .pb-#{$id} {
+    padding-bottom: $size;
+  }
+  .pl-#{$id} {
+    padding-left: $size;
+  }
+  .pr-#{$id} {
+    padding-right: $size;
+  }
+  .pt-#{$id} {
+    padding-top: $size;
+  }
+  .px-#{$id} {
+    padding-left: $size;
+    padding-right: $size;
+  }
+  .py-#{$id} {
+    padding-bottom: $size;
+    padding-top: $size;
+  }
+}
+
+// Shadow mixin
+@mixin shadow-variant($offset) {
+  box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
+}
+
+// Text color utility mixin
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color;
+  }
+
+  a#{$name} {
+    &:focus,
+    &:hover {
+      color: darken($color, 5%);
+    }
+  }
+}
+
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Toast variant mixin
+@mixin toast-variant($color: $dark-color) {
+  background: rgba($color, .9);
+  border-color: $color;
+}
diff --git a/src/modals.less b/src/_modals.scss
index fb5cdf9..21d6ed8 100644
--- a/src/modals.less
+++ b/src/_modals.scss
@@ -7,7 +7,7 @@
   left: 0;
   opacity: 0;
   overflow: hidden;
-  padding: @layout-spacing;
+  padding: $layout-spacing;
   position: fixed;
   right: 0;
   top: 0;
@@ -16,10 +16,10 @@
   &.active {
     display: flex;
     opacity: 1;
-    z-index: @zindex-4;
+    z-index: $zindex-4;
 
     .modal-overlay {
-      background: fade(@bg-color, 75%);
+      background: rgba($bg-color, .75);
       bottom: 0;
       cursor: default;
       display: block;
@@ -32,27 +32,27 @@
     .modal-container {
       animation: slide-down .2s ease 1;
       max-width: 640px;
-      z-index: @zindex-0;
+      z-index: $zindex-0;
     }
   }
 
   &.modal-sm {
     .modal-container {
-      max-width: @control-max-width;
+      max-width: $control-max-width;
     }
   }
 }
 
 .modal-container {
-  background: @bg-color-light;
-  border-radius: @border-radius;
+  @include shadow-variant(.2rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
   display: block;
   padding: 0;
-  .shadow-variant(.2rem);
   text-align: left;
 
   .modal-header {
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
 
     .modal-title {
       margin: 0;
@@ -62,12 +62,12 @@
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
     position: relative;
   }
 
   .modal-footer {
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
     text-align: right;
   }
 }
diff --git a/src/navbar.less b/src/_navbar.scss
index 3e212c0..a90b6e6 100755
--- a/src/navbar.less
+++ b/src/_navbar.scss
@@ -22,7 +22,7 @@
   }
 
   .navbar-brand {
-    font-size: @font-size-lg;
+    font-size: $font-size-lg;
     font-weight: 500;
     text-decoration: none;
   }
diff --git a/src/navs.less b/src/_navs.scss
index 5f471b0..4bedc27 100644
--- a/src/navs.less
+++ b/src/_navs.scss
@@ -3,32 +3,32 @@
   display: flex;
   flex-direction: column;
   list-style: none;
-  margin: @unit-1 0;
+  margin: $unit-1 0;
 
   .nav-item {
     a {
-      color: @gray-color-dark;
-      padding: @unit-1 @unit-2;
+      color: $gray-color-dark;
+      padding: $unit-1 $unit-2;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @primary-color;
+        color: $primary-color;
       }
     }
     &.active {
       & > a {
-        color: darken(@gray-color-dark, 10%);
+        color: darken($gray-color-dark, 10%);
         font-weight: bold;
         &:focus,
         &:hover {
-          color: @primary-color;
+          color: $primary-color;
         }
       }
     }
   }
 
   & .nav {
-    margin-bottom: @unit-2;
-    margin-left: @unit-4;
+    margin-bottom: $unit-2;
+    margin-left: $unit-4;
   }
 }
diff --git a/src/normalize.less b/src/_normalize.scss
index 28ed4d7..f157a8c 100644
--- a/src/normalize.less
+++ b/src/_normalize.scss
@@ -140,7 +140,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: @mono-font-family; /* 1 (changed) */
+  font-family: $mono-font-family; /* 1 (changed) */
   font-size: 1em; /* 2 */
 }
 
diff --git a/src/pagination.less b/src/_pagination.scss
index 596651b..6efc7ba 100644
--- a/src/pagination.less
+++ b/src/_pagination.scss
@@ -2,26 +2,26 @@
 .pagination {
   display: flex;
   list-style: none;
-  margin: @unit-1 0;
-  padding: @unit-1 0;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
 
   .page-item {
-    margin: @unit-1 @unit-o;
+    margin: $unit-1 $unit-o;
 
     span {
       display: inline-block;
-      padding: @unit-1 @unit-1;
+      padding: $unit-1 $unit-1;
     }
 
     a {
-      border-radius: @border-radius;
-      color: @gray-color-dark;
+      border-radius: $border-radius;
+      color: $gray-color-dark;
       display: inline-block;
-      padding: @unit-1 @unit-2;
+      padding: $unit-1 $unit-2;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @primary-color;
+        color: $primary-color;
       }
     }
 
@@ -35,8 +35,8 @@
 
     &.active {
       a {
-        background: @primary-color;
-        color: @light-color;
+        background: $primary-color;
+        color: $light-color;
       }
     }
 
diff --git a/src/panels.less b/src/_panels.scss
index 3c6bae8..386f96e 100644
--- a/src/panels.less
+++ b/src/_panels.scss
@@ -1,14 +1,14 @@
 // Panels
 .panel {
-  border: @border-width solid @border-color;
-  border-radius: @border-radius;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
   display: flex;
   flex-direction: column;
 
   .panel-header,
   .panel-footer {
     flex: 0 0 auto;
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
   }
 
   .panel-nav {
@@ -18,6 +18,6 @@
   .panel-body {
     flex: 1 1 auto;
     overflow-y: auto;
-    padding: 0 @layout-spacing-lg;
+    padding: 0 $layout-spacing-lg;
   }
 }
diff --git a/src/_parallax.scss b/src/_parallax.scss
new file mode 100644
index 0000000..fcde262
--- /dev/null
+++ b/src/_parallax.scss
@@ -0,0 +1,129 @@
+// Parallax
+$parallax-deg: 3deg;
+$parallax-offset: 4.5px;
+$parallax-offset-z: 50px;
+$parallax-perspective: 1000px;
+$parallax-scale: .95;
+
+// Mixin: Parallax direction
+@mixin parallax-dir() {
+  height: 50%;
+  position: absolute;
+  width: 50%;
+  z-index: $zindex-1;
+}
+
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .parallax-content {
+    @include shadow-variant(1rem);
+    height: auto;
+    transform: perspective($parallax-perspective);
+    transform-style: preserve-3d;
+    transition: all .4s ease;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .parallax-front {
+    align-items: center;
+    color: $light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 20px rgba($dark-color, .75);
+    top: 0;
+    transform: translateZ($parallax-offset-z) scale($parallax-scale);
+    transition: all .4s ease;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .parallax-top-left {
+    @include parallax-dir();
+    left: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-top-right {
+    @include parallax-dir();
+    right: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-left {
+    @include parallax-dir();
+    bottom: 0;
+    left: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-right {
+    @include parallax-dir();
+    bottom: 0;
+    right: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+}
diff --git a/src/popovers.less b/src/_popovers.scss
index 0ba28a0..6a9a2e5 100644
--- a/src/popovers.less
+++ b/src/_popovers.scss
@@ -7,13 +7,13 @@
     content: attr(data-tooltip);
     opacity: 0;
     left: 50%;
-    padding: @layout-spacing;
+    padding: $layout-spacing;
     position: absolute;
     top: 0;
     transform: translate(-50%, -50%) scale(0);
     transition: transform .2s ease;
-    width: @control-max-width;
-    z-index: @zindex-4;
+    width: $control-max-width;
+    z-index: $zindex-4;
   }
 
   :focus + .popover-container,
@@ -64,7 +64,7 @@
   }
 
   .card {
+    @include shadow-variant(.2rem);
     border: 0;
-    .shadow-variant(.2rem);
   }
 }
diff --git a/src/progress.less b/src/_progress.scss
index cf9e34b..f173772 100644
--- a/src/progress.less
+++ b/src/_progress.scss
@@ -2,32 +2,32 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
-  background: @bg-color-dark;
+  background: $bg-color-dark;
   border: 0;
-  border-radius: @border-radius;
-  color: @primary-color;
-  height: @unit-1;
+  border-radius: $border-radius;
+  color: $primary-color;
+  height: $unit-1;
   position: relative;
   width: 100%;
 
   &::-webkit-progress-bar {
     background: transparent;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   &::-webkit-progress-value {
-    background: @primary-color;
-    border-radius: @border-radius;
+    background: $primary-color;
+    border-radius: $border-radius;
   }
 
   &::-moz-progress-bar {
-    background: @primary-color;
-    border-radius: @border-radius;
+    background: $primary-color;
+    border-radius: $border-radius;
   }
 
   &:indeterminate {
     animation: progress-indeterminate 1.5s linear infinite;
-    background: @bg-color-dark linear-gradient(to right, @primary-color 30%, @bg-color-dark 30%) top left / 150% 150% no-repeat;
+    background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
 
     &::-moz-progress-bar {
       background: transparent;
diff --git a/src/sliders.less b/src/_sliders.scss
index bf5ce96..da80a83 100644
--- a/src/sliders.less
+++ b/src/_sliders.scss
@@ -5,39 +5,39 @@
   background: transparent;
   display: block;
   width: 100%;
-  height: @unit-6;
+  height: $unit-6;
 
   &:focus {
-    .control-shadow();
+    @include control-shadow();
     outline: none;
   }
 
   // Slider Thumb
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
-    margin-top: -(@unit-3 - @unit-h) / 2 ;
+    height: $unit-3;
+    margin-top: -($unit-3 - $unit-h) / 2;
     transition: transform .2s ease;
-    width: @unit-3;
+    width: $unit-3;
   }
   &::-moz-range-thumb {
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
+    height: $unit-3;
     transition: transform .2s ease;
-    width: @unit-3;
+    width: $unit-3;
   }
   &::-ms-thumb {
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
+    height: $unit-3;
     transition: transform .2s ease;
-    width: @unit-3;
+    width: $unit-3;
   }
 
   &:active {
@@ -55,39 +55,39 @@
   &:disabled,
   &.disabled {
     &::-webkit-slider-thumb {
-      background: @gray-color-light;
+      background: $gray-color-light;
       transform: scale(1);
     }
     &::-moz-range-thumb {
-      background: @gray-color-light;
+      background: $gray-color-light;
       transform: scale(1);
     }
     &::-ms-thumb {
-      background: @gray-color-light;
+      background: $gray-color-light;
       transform: scale(1);
     }
   }
 
   // Slider Track
   &::-webkit-slider-runnable-track {
-    background: @bg-color-dark;
-    border-radius: @border-radius;
-    height: @unit-h;
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
     width: 100%;
   }
   &::-moz-range-track {
-    background: @bg-color-dark;
-    border-radius: @border-radius;
-    height: @unit-h;
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
     width: 100%;
   }
   &::-ms-track {
-    background: @bg-color-dark;
-    border-radius: @border-radius;
-    height: @unit-h;
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
     width: 100%;
   }
   &::-ms-fill-lower {
-    background: @primary-color;
+    background: $primary-color;
   }
 }
diff --git a/src/steps.less b/src/_steps.scss
index fa0167f..d5ddc6e 100644
--- a/src/steps.less
+++ b/src/_steps.scss
@@ -3,18 +3,18 @@
   display: flex;
   flex-wrap: nowrap;
   list-style: none;
-  margin: @unit-1 0;
+  margin: $unit-1 0;
   width: 100%;
 
   .step-item {
     flex: 1 1 0;
     margin-top: 0;
-    min-height: 20px;
+    min-height: 1rem;
     text-align: center;
     position: relative;
 
     &:not(:first-child)::before {
-      background: @primary-color;
+      background: $primary-color;
       content: "";
       height: 2px;
       left: -50%;
@@ -24,44 +24,44 @@
     }
 
     a {
-      color: @gray-color;
+      color: $gray-color;
       display: inline-block;
       padding: 20px 10px 0;
       text-decoration: none;
 
       &::before {
-        background: @primary-color;
-        border: @border-width-lg solid @light-color;
+        background: $primary-color;
+        border: $border-width-lg solid $light-color;
         border-radius: 50%;
         content: "";
         display: block;
-        height: @unit-3;
+        height: $unit-3;
         left: 50%;
         position: absolute;
-        top: @unit-1;
+        top: $unit-1;
         transform: translateX(-50%);
-        width: @unit-3;
-        z-index: @zindex-0;
+        width: $unit-3;
+        z-index: $zindex-0;
       }
     }
 
     &.active {
       a {
         &::before {
-          background: @light-color;
-          border: @border-width-lg solid @primary-color;
+          background: $light-color;
+          border: $border-width-lg solid $primary-color;
         }
       }
 
       & ~ .step-item {
         &::before {
-          background: @border-color;
+          background: $border-color;
         }
 
         a {
 
           &::before {
-            background: @gray-color-light;
+            background: $gray-color-light;
           }
         }
       }
diff --git a/src/tables.less b/src/_tables.scss
index e9f747d..63a163a 100644
--- a/src/tables.less
+++ b/src/_tables.scss
@@ -8,7 +8,7 @@
   &.table-striped {
     tbody {
       tr:nth-of-type(odd) {
-        background: @bg-color;
+        background: $bg-color;
       }
     }
   }
@@ -17,7 +17,7 @@
     tbody {
       tr {
         &:hover {
-          background: @bg-color-dark;
+          background: $bg-color-dark;
         }
       }
     }
@@ -28,7 +28,7 @@
     tbody {
       tr {
         &.active {
-          background: @bg-color-dark;
+          background: $bg-color-dark;
         }
       }
     }
@@ -36,10 +36,10 @@
 
   td,
   th {
-    border-bottom: @border-width solid @border-color;
-    padding: @unit-3 @unit-2;
+    border-bottom: $border-width solid $border-color;
+    padding: $unit-3 $unit-2;
   }
   th {
-    border-bottom-width: @border-width-lg;
+    border-bottom-width: $border-width-lg;
   }
 }
diff --git a/src/tabs.less b/src/_tabs.scss
index c5af2b6..e9f9e2e 100644
--- a/src/tabs.less
+++ b/src/_tabs.scss
@@ -1,11 +1,11 @@
 // Tabs
 .tab {
   align-items: center;
-  border-bottom: @border-width solid @border-color;
+  border-bottom: $border-width solid $border-color;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin: @unit-1 0 @unit-1 - @border-width 0;
+  margin: $unit-1 0 ($unit-1 - $border-width) 0;
 
   .tab-item {
     margin-top: 0;
@@ -16,21 +16,21 @@
     }
 
     a {
-      border-bottom: @border-width-lg solid transparent;
+      border-bottom: $border-width-lg solid transparent;
       color: inherit;
       display: block;
-      margin: 0 @unit-2 0 0;
-      padding: @unit-2 @unit-1 @unit-2 - @border-width-lg @unit-1;
+      margin: 0 $unit-2 0 0;
+      padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @link-color;
+        color: $link-color;
       }
     }
     &.active a,
     a.active {
-      border-bottom-color: @primary-color;
-      color: @link-color;
+      border-bottom-color: $primary-color;
+      color: $link-color;
     }
   }
 
diff --git a/src/tiles.less b/src/_tiles.scss
index a99540e..742bbae 100644
--- a/src/tiles.less
+++ b/src/_tiles.scss
@@ -11,15 +11,15 @@
   .tile-content {
     flex: 1 1 auto;
     &:not(:first-child) {
-      padding-left: @unit-2;
+      padding-left: $unit-2;
     }
     &:not(:last-child) {
-      padding-right: @unit-2;
+      padding-right: $unit-2;
     }
   }
   .tile-title,
   .tile-subtitle {
-    line-height: @line-height;
+    line-height: $line-height;
   }
 
   &.tile-centered {
@@ -31,8 +31,8 @@
 
     .tile-title,
     .tile-subtitle {
+      @include text-ellipsis();
       margin-bottom: 0;
-      .text-ellipsis;
     }
   }
 }
diff --git a/src/timelines.less b/src/_timelines.scss
index 02b421e..88cae04 100644
--- a/src/timelines.less
+++ b/src/_timelines.scss
@@ -2,15 +2,15 @@
 .timeline {
   .timeline-item {
     display: flex;
-    margin-bottom: @unit-6;
+    margin-bottom: $unit-6;
     position: relative;
     &::before {
-      background: @border-color;
+      background: $border-color;
       content: "";
       height: 100%;
       left: 11px;
       position: absolute;
-      top: @unit-6;
+      top: $unit-6;
       width: 2px;
     }
 
@@ -20,32 +20,32 @@
 
     .timeline-content {
       flex: 1 1 auto;
-      padding: 2px 0 2px @layout-spacing-lg;
+      padding: 2px 0 2px $layout-spacing-lg;
     }
 
     .timeline-icon {
       border-radius: 50%;
-      color: @light-color;
+      color: $light-color;
       display: block;
-      height: @unit-6;
+      height: $unit-6;
       text-align: center;
-      width: @unit-6;
+      width: $unit-6;
       &::before {
-        border: @border-width-lg solid @primary-color;
+        border: $border-width-lg solid $primary-color;
         border-radius: 50%;
         content: "";
         display: block;
-        height: @unit-2;
-        left: @unit-2;
+        height: $unit-2;
+        left: $unit-2;
         position: absolute;
-        top: @unit-2;
-        width: @unit-2;
+        top: $unit-2;
+        width: $unit-2;
       }
 
       &.icon-lg {
-        background: @primary-color;
-        font-size: @font-size-lg;
-        line-height: @line-height;
+        background: $primary-color;
+        font-size: $font-size-lg;
+        line-height: $line-height;
         &::before {
           content: none;
         }
diff --git a/src/_toasts.scss b/src/_toasts.scss
new file mode 100644
index 0000000..99b2e2a
--- /dev/null
+++ b/src/_toasts.scss
@@ -0,0 +1,42 @@
+// Toasts
+.toast {
+  @include toast-variant($dark-color);
+  border: $border-width solid $dark-color;
+  border-radius: $border-radius;
+  color: $light-color;
+  display: block;
+  padding: $layout-spacing;
+  width: 100%;
+
+  &.toast-primary {
+    @include toast-variant($primary-color);
+  }
+
+  &.toast-success {
+    @include toast-variant($success-color);
+  }
+
+  &.toast-warning {
+    @include toast-variant($warning-color);
+  }
+
+  &.toast-error {
+    @include toast-variant($error-color);
+  }
+
+  a {
+    color: $light-color;
+    text-decoration: underline;
+    
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      opacity: .75;
+    }
+  }
+
+  .btn-clear {
+    margin: 2px -2px 2px 4px;
+  }
+}
diff --git a/src/tooltips.less b/src/_tooltips.scss
index 02dc201..1ee4d97 100644
--- a/src/tooltips.less
+++ b/src/_tooltips.scss
@@ -2,31 +2,31 @@
 .tooltip {
   position: relative;
   &::after {
-    background: fade(@dark-color, 90%);
-    border-radius: @border-radius;
+    background: rgba($dark-color, .9);
+    border-radius: $border-radius;
     bottom: 100%;
-    color: @light-color;
+    color: $light-color;
     content: attr(data-tooltip);
     display: block;
-    font-size: @font-size-sm;
+    font-size: $font-size-sm;
     left: 50%;
-    max-width: @control-max-width;
+    max-width: $control-max-width;
     opacity: 0;
     overflow: hidden;
-    padding: @unit-1 @unit-2;
+    padding: $unit-1 $unit-2;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    transform: translate(-50%, @unit-2);
+    transform: translate(-50%, $unit-2);
     transition: all .2s ease;
     white-space: nowrap;
-    z-index: @zindex-3;
+    z-index: $zindex-3;
   }
   &:focus,
   &:hover {
     &::after {
       opacity: 1;
-      transform: translate(-50%, -@unit-1);
+      transform: translate(-50%, -$unit-1);
     }
   }
   &[disabled],
@@ -38,39 +38,41 @@
     &::after {
       bottom: 50%;
       left: 100%;
-      transform: translate(-@unit-1, 50%);
+      transform: translate(-$unit-1, 50%);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(@unit-1, 50%);
+        transform: translate($unit-1, 50%);
       }
     }
   }
+
   &.tooltip-bottom {
     &::after {
       bottom: auto;
       top: 100%;
-      transform: translate(-50%, -@unit-2);
+      transform: translate(-50%, -$unit-2);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(-50%, @unit-1);
+        transform: translate(-50%, $unit-1);
       }
     }
   }
+  
   &.tooltip-left {
     &::after {
       bottom: 50%;
       left: auto;
       right: 100%;
-      transform: translate(@unit-2, 50%);
+      transform: translate($unit-2, 50%);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(-@unit-1, 50%);
+        transform: translate(-$unit-1, 50%);
       }
     }
   }
diff --git a/src/typography.less b/src/_typography.scss
index 5fd152f..17b7f7c 100644
--- a/src/typography.less
+++ b/src/_typography.scss
@@ -47,8 +47,8 @@ h6,
 
 // Paragraphs
 p {
-  line-height: 1.2 * @line-height;
-  margin: 0 0 @unit-4;
+  line-height: 1.2 * $line-height;
+  margin: 0 0 $unit-4;
 }
 
 // Semantic text elements
@@ -59,26 +59,28 @@ u {
 }
 
 abbr[title] {
-  border-bottom: @border-width dotted;
+  border-bottom: $border-width dotted;
   cursor: help;
   text-decoration: none;
 }
 
 kbd {
-  .label-base();
-  .label-variant(@light-color, @dark-color);
+  @include label-base();
+  @include label-variant($light-color, $dark-color);
+  font-size: .65rem;
 }
 
 mark {
-  .label-base();
-  .label-variant(@body-font-color, @highlight-color);
+  @include label-variant($body-font-color, $highlight-color);
+  border-radius: $border-radius;
+  padding: .05rem;
 }
 
 // Blockquote
 blockquote {
-  border-left: @border-width-lg solid @border-color;
+  border-left: $border-width-lg solid $border-color;
   margin-left: 0;
-  padding: @unit-2 @unit-4;
+  padding: $unit-2 $unit-4;
 
   p:last-child {
     margin-bottom: 0;
@@ -88,16 +90,16 @@ blockquote {
 // Lists
 ul,
 ol {
-  margin: @unit-4 0 @unit-4 @unit-4;
+  margin: $unit-4 0 $unit-4 $unit-4;
   padding: 0;
 
   ul,
   ol {
-    margin: @unit-4 0 @unit-4 @unit-4;
+    margin: $unit-4 0 $unit-4 $unit-4;
   }
 
   li {
-    margin-top: @unit-2;
+    margin-top: $unit-2;
   }
 }
 
@@ -122,6 +124,6 @@ dl {
     font-weight: bold;
   }
   dd {
-    margin: @unit-2 0 @unit-4 0;
+    margin: $unit-2 0 $unit-4 0;
   }
 }
diff --git a/src/_utilities.scss b/src/_utilities.scss
new file mode 100644
index 0000000..80f1e0b
--- /dev/null
+++ b/src/_utilities.scss
@@ -0,0 +1,8 @@
+@import "utilities/colors";
+@import "utilities/cursors";
+@import "utilities/display";
+@import "utilities/divider";
+@import "utilities/loading";
+@import "utilities/position";
+@import "utilities/shapes";
+@import "utilities/text";
diff --git a/src/_variables.scss b/src/_variables.scss
new file mode 100644
index 0000000..15f2903
--- /dev/null
+++ b/src/_variables.scss
@@ -0,0 +1,103 @@
+// Core variables
+// Colors
+// Core colors
+$primary-color: #5764c6;
+$primary-color-dark: darken($primary-color, 3%);
+$primary-color-light: lighten($primary-color, 3%);
+$secondary-color: lighten($primary-color, 40%);
+$secondary-color-dark: darken($secondary-color, 3%);
+$secondary-color-light: lighten($secondary-color, 3%);
+
+$link-color: $primary-color;
+$link-color-dark: darken($link-color, 5%);
+
+// Gray colors
+$dark-color: #454d5d;
+$light-color: #fff;
+$gray-color: lighten($dark-color, 40%);
+$gray-color-dark: darken($gray-color, 20%);
+$gray-color-light: lighten($gray-color, 20%);
+
+$border-color: lighten($dark-color, 60%);
+$border-color-dark: darken($border-color, 10%);
+$bg-color: lighten($dark-color, 66%);
+$bg-color-dark: darken($bg-color, 3%);
+$bg-color-light: $light-color;
+
+// Control colors
+$success-color: #32b643;
+$warning-color: #ffb700;
+$error-color: #e85600;
+
+// Other colors
+$code-color: #e06870;
+$highlight-color: #ffe9b3;
+$body-bg: $bg-color-light;
+$body-font-color: lighten($dark-color, 5%);
+
+// Fonts
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+$fallback-font-family: "Helvetica Neue", sans-serif;
+$cjk-zh-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family;
+$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family;
+$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family;
+$body-font-family: $base-font-family, $fallback-font-family;
+
+// Unit sizes
+$unit-o: .05rem;
+$unit-h: .1rem;
+$unit-1: .2rem;
+$unit-2: .4rem;
+$unit-3: .6rem;
+$unit-4: .8rem;
+$unit-5: 1rem;
+$unit-6: 1.2rem;
+$unit-7: 1.4rem;
+$unit-8: 1.6rem;
+$unit-9: 1.8rem;
+$unit-10: 2rem;
+$unit-12: 2.4rem;
+$unit-16: 3.2rem;
+
+// Font sizes
+$html-font-size: 20px;
+$html-line-height: 1.428571429;
+$font-size: .7rem;
+$font-size-sm: .6rem;
+$font-size-lg: .8rem;
+$line-height: 1rem;
+
+// Sizes
+$layout-spacing: $unit-2;
+$layout-spacing-sm: $unit-1;
+$layout-spacing-lg: $unit-4;
+$border-radius: $unit-h;
+$border-width: $unit-o;
+$border-width-lg: $unit-h;
+$control-size: $unit-8;
+$control-size-sm: $unit-6;
+$control-size-lg: $unit-10;
+$control-padding-h: $unit-2;
+$control-padding-v: ($control-size - $line-height) / 2 - $border-width;
+$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width;
+$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width;
+$control-icon-size: .7rem; 
+$control-min-width: 180px;
+$control-max-width: 320px;
+
+// Responsive breakpoints
+$size-xs: 480px;
+$size-sm: 600px;
+$size-md: 840px;
+$size-lg: 960px;
+$size-xl: 1280px;
+$size-2x: 1440px;
+
+// Z-index
+$zindex-0: 1;
+$zindex-1: 100;
+$zindex-2: 200;
+$zindex-3: 300;
+$zindex-4: 400;
diff --git a/src/cards.less b/src/cards.less
deleted file mode 100644
index dadfa8b..0000000
--- a/src/cards.less
+++ /dev/null
@@ -1,39 +0,0 @@
-// Cards
-.card {
-  background: @bg-color-light;
-  border: @border-width solid @border-color;
-  border-radius: @border-radius;
-  display: flex;
-  flex-direction: column;
-
-  .card-header,
-  .card-body,
-  .card-footer {
-    padding: @layout-spacing-lg;
-    padding-bottom: 0;
-
-    &:last-child {
-      padding-bottom: @layout-spacing-lg;
-    }
-  }
-
-  .card-image {
-    padding-top: @layout-spacing-lg;
-
-    &:first-child {
-      padding-top: 0;
-
-      img {
-        border-top-left-radius: @border-radius;
-        border-top-right-radius: @border-radius;
-      }
-    }
-
-    &:last-child {
-      img {
-        border-bottom-left-radius: @border-radius;
-        border-bottom-right-radius: @border-radius;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/chips.less b/src/chips.less
deleted file mode 100644
index 60ab726..0000000
--- a/src/chips.less
+++ /dev/null
@@ -1,24 +0,0 @@
-// Chips
-.chip {
-  align-items: center;
-  background: @bg-color-dark;
-  border-radius: 5rem;
-  color: @gray-color-dark;
-  display: inline-flex;
-  height: @unit-6;
-  margin: @unit-h;
-  max-width: 100%;
-  padding: @unit-h @unit-2 + @unit-h;
-  text-decoration: none;
-  vertical-align: middle;
-
-  &.active {
-    background: @primary-color;
-    color: @light-color;
-  }
-
-  .avatar {
-    margin-left: -(@unit-2 + @unit-h);
-    margin-right: @unit-1;
-  }
-}
diff --git a/src/codes.less b/src/codes.less
deleted file mode 100644
index e982e2b..0000000
--- a/src/codes.less
+++ /dev/null
@@ -1,32 +0,0 @@
-// Codes
-code {
-  font-size: .65rem;
-  .label-base();
-  .label-variant(@code-color, lighten(@code-color, 33%));
-}
-
-.code {
-  border-radius: @border-radius;
-  color: @body-font-color;
-  line-height: @line-height;
-  position: relative;
-
-  &::before {
-    content: attr(data-lang);
-    color: @gray-color;
-    font-size: @font-size-sm;
-    position: absolute;
-    right: @layout-spacing;
-    top: @unit-h;
-  }
-
-  code {
-    background: @bg-color;
-    color: inherit;
-    display: block;
-    line-height: inherit;
-    overflow-x: auto;
-    padding: 1rem;
-    width: 100%;
-  }
-}
diff --git a/src/empty.less b/src/empty.less
deleted file mode 100644
index b6cb1ae..0000000
--- a/src/empty.less
+++ /dev/null
@@ -1,21 +0,0 @@
-// Empty states (or Blank slates)
-.empty {
-  background: @bg-color;
-  border-radius: @border-radius;
-  color: @gray-color-dark;
-  text-align: center;
-  padding: 4 * @layout-spacing;
-
-  .empty-icon {
-    margin-bottom: @layout-spacing-lg;
-  }
-
-  .empty-title,
-  .empty-subtitle {
-    margin: @layout-spacing auto;
-  }
-
-  .empty-action {
-    margin-top: @layout-spacing-lg;
-  }
-}
diff --git a/src/labels.less b/src/labels.less
deleted file mode 100644
index efeb89d..0000000
--- a/src/labels.less
+++ /dev/null
@@ -1,33 +0,0 @@
-// Labels
-.label {
-  display: inline-block;
-  .label-base();
-  .label-variant(lighten(@body-font-color, 5%), @bg-color);
-  line-height: 1;
-
-  &.label-rounded {
-    border-radius: 5rem;
-    padding-left: .4rem;
-    padding-right: .4rem; 
-  }
-
-  &.label-primary {
-    .label-variant(@light-color, @primary-color);
-  }
-
-  &.label-secondary {
-    .label-variant(@primary-color, @secondary-color);
-  }
-
-  &.label-success {
-    .label-variant(@light-color, @success-color);
-  }
-
-  &.label-warning {
-    .label-variant(@light-color, @warning-color);
-  }
-
-  &.label-error {
-    .label-variant(@light-color, @error-color);
-  }
-}
diff --git a/src/menus.less b/src/menus.less
deleted file mode 100644
index 109dc92..0000000
--- a/src/menus.less
+++ /dev/null
@@ -1,56 +0,0 @@
-// Menus
-.menu {
-  background: @bg-color-light;
-  border-radius: @border-radius;
-  list-style: none;
-  margin: 0;
-  min-width: @control-min-width;
-  padding: @unit-2;
-  .shadow-variant(.05rem);
-  transform: translateY(@layout-spacing-sm);
-  z-index: @zindex-1;
-
-  &.menu-nav {
-    background: transparent;
-    box-shadow: none;
-  }
-
-  .menu-item {
-    margin-top: 0;
-    padding: 0 @unit-2;
-    text-decoration: none;
-    user-select: none;
-
-    & > a {
-      border-radius: @border-radius;
-      color: inherit;
-      display: block;
-      margin: 0 -@unit-2;
-      padding: @unit-1 @unit-2;
-      text-decoration: none;
-      &:focus,
-      &:hover {
-        background: @secondary-color;
-        color: @primary-color;
-      }
-      &:active,
-      &.active {
-        background: @secondary-color;
-        color: @primary-color;
-      }
-    }
-
-    & + .menu-item {
-      margin-top: @unit-1;
-    }
-  }
-
-  .menu-badge {
-    float: right;
-    padding: @unit-1 0;
-
-    .btn {
-      margin-top: -@unit-h;
-    }
-  }
-}
diff --git a/src/mixins.less b/src/mixins.less
deleted file mode 100644
index 8cbb3f5..0000000
--- a/src/mixins.less
+++ /dev/null
@@ -1,175 +0,0 @@
-// Mixins
-// Avatar mixin
-.avatar-base(@size: @unit-8) {
-  font-size: @size / 2;
-  height: @size;
-  width: @size;
-}
-
-// Background color utility mixin
-.bg-color-variant(@color: @primary-color) {
-  background: @color;
-}
-
-// Button variant mixin
-.button-variant(@color: @primary-color) {
-  background: @color;
-  border-color: darken(@color, 3%);
-  color: @light-color;
-  &:focus {
-    .control-shadow(@color);
-  }
-  &:focus,
-  &:hover {
-    background: darken(@color, 2%);
-    border-color: darken(@color, 5%);
-    color: @light-color;
-  }
-  &:active,
-  &.active {
-    background: darken(@color, 7%);
-    border-color: darken(@color, 10%);
-    color: @light-color;
-  }
-  &.loading {
-    &::after {
-      border-bottom-color: @light-color;
-      border-left-color: @light-color;
-    }
-  }
-}
-
-.button-outline-variant(@color: @primary-color) {
-  background: @light-color;
-  border-color: @color;
-  color: @color;
-  &:focus {
-    .control-shadow(@color);
-  }
-  &:focus,
-  &:hover {
-    background: lighten(@color, 50%);
-    border-color: darken(@color, 2%);
-    color: @color;
-  }
-  &:active,
-  &.active {
-    background: @color;
-    border-color: darken(@color, 5%);
-    color: @light-color;
-  }
-  &.loading {
-    &::after {
-      border-bottom-color: @color;
-      border-left-color: @color;
-    }
-  }
-}
-
-// Clearfix mixin
-.clearfix() {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
-
-// Component focus shadow
-.control-shadow(@color: @primary-color) {
-  box-shadow: 0 0 0 .1rem fade(@color, 20%);
-}
-
-// Component transition
-.control-transition() {
-  transition: all .2s ease;
-}
-
-// Label base style
-.label-base() {
-  border-radius: @border-radius;
-  line-height: 1;
-  padding: .15rem .2rem;
-}
-
-.label-variant(@color: @light-color, @bg-color: @primary-color) {
-  background: @bg-color;
-  color: @color;
-}
-
-// Margin utility mixin
-.margin-variant(@id: 1, @size: 1) {
-  .m-@{id} {
-    margin: @size;
-  }
-  .mb-@{id} {
-    margin-bottom: @size;
-  }
-  .ml-@{id} {
-    margin-left: @size;
-  }
-  .mr-@{id} {
-    margin-right: @size;
-  }
-  .mt-@{id} {
-    margin-top: @size;
-  }
-  .mx-@{id} {
-    margin-left: @size;
-    margin-right: @size;
-  }
-  .my-@{id} {
-    margin-bottom: @size;
-    margin-top: @size;
-  }
-}
-
-// Padding utility mixin
-.padding-variant(@id: 1, @size: 1) {
-  .p-@{id} {
-    padding: @size;
-  }
-  .pb-@{id} {
-    padding-bottom: @size;
-  }
-  .pl-@{id} {
-    padding-left: @size;
-  }
-  .pr-@{id} {
-    padding-right: @size;
-  }
-  .pt-@{id} {
-    padding-top: @size;
-  }
-  .px-@{id} {
-    padding-left: @size;
-    padding-right: @size;
-  }
-  .py-@{id} {
-    padding-bottom: @size;
-    padding-top: @size;
-  }
-}
-
-// Shadow mixin
-.shadow-variant(@offset) {
-  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
-}
-
-// Text color utility mixin
-.text-color-variant(@color: @primary-color) {
-  color: @color;
-
-  a& {
-    &:focus,
-    &:hover {
-      color: darken(@color, 5%);
-    }
-  }
-}
-
-// Toast variant mixin
-.toast-variant(@color: @dark-color) {
-  background: fade(@color, 90%);
-  border-color: @color;
-}
\ No newline at end of file
diff --git a/src/parallax.less b/src/parallax.less
deleted file mode 100644
index e353fd4..0000000
--- a/src/parallax.less
+++ /dev/null
@@ -1,129 +0,0 @@
-// Parallax
-@parallax-deg: 3deg;
-@parallax-offset: 6.5px;
-@parallax-offset-z: 100px;
-@parallax-perspective: 1000px;
-@parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective);
-
-.parallax {
-  display: block;
-  height: auto;
-  position: relative;
-  width: auto;
-
-  .parallax-content {
-    height: auto;
-    .shadow-variant(1rem);
-    transform: perspective(@parallax-perspective);
-    transform-style: preserve-3d;
-    transition: all .4s ease;
-    width: 100%;
-
-    &::before {
-      content: "";
-      display: block;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-
-  .parallax-front {
-    align-items: center;
-    color: @light-color;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    text-align: center;
-    text-shadow: 0 0 20px fade(@dark-color, 50%);
-    top: 0;
-    transform: translateZ(@parallax-offset-z) scale(@parallax-scale);
-    transition: all .4s ease;
-    width: 100%;
-    z-index: @zindex-0;
-  }
-
-  .parallax-top-left {
-    .parallax-dir();
-    left: 0;
-    top: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(@parallax-deg);
-
-      &::before {
-        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-
-  .parallax-top-right {
-    .parallax-dir();
-    right: 0;
-    top: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
-
-      &::before {
-        background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-
-  .parallax-bottom-left {
-    .parallax-dir();
-    bottom: 0;
-    left: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(@parallax-deg);
-
-      &::before {
-        background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-
-  .parallax-bottom-right {
-    .parallax-dir();
-    bottom: 0;
-    right: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(-@parallax-deg);
-
-      &::before {
-        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-}
-
-// Mixin: Parallax direction
-.parallax-dir() {
-  height: 50%;
-  position: absolute;
-  width: 50%;
-  z-index: @zindex-3;
-}
diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss
new file mode 100644
index 0000000..c83b1a3
--- /dev/null
+++ b/src/spectre-exp.scss
@@ -0,0 +1,16 @@
+/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
+
+// Core variables and mixins
+@import "variables";
+@import "mixins";
+
+// Experimentals
+@import "calendars";
+@import "carousels";
+@import "comparison-sliders";
+@import "filters";
+@import "meters";
+@import "parallax";
+@import "progress";
+@import "sliders";
+@import "timelines";
diff --git a/src/spectre-icons.scss b/src/spectre-icons.scss
new file mode 100644
index 0000000..137fe70
--- /dev/null
+++ b/src/spectre-icons.scss
@@ -0,0 +1,8 @@
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */
+
+// Core variables and mixins
+@import "variables";
+@import "mixins";
+
+// Icons
+@import "icons";
diff --git a/src/spectre.scss b/src/spectre.scss
new file mode 100644
index 0000000..2942147
--- /dev/null
+++ b/src/spectre.scss
@@ -0,0 +1,49 @@
+/*! Spectre.css | MIT License | github.com/picturepan2/spectre */
+// Core variables and mixins
+@import "variables";
+@import "mixins";
+
+// Reset and dependencies
+@import "normalize";
+@import "base";
+
+// Core classes
+@import "typography";
+@import "asian";
+@import "tables";
+@import "buttons";
+@import "forms";
+@import "labels";
+@import "codes";
+@import "media";
+
+// Layout
+@import "layout";
+@import "navbar";
+
+// Components
+@import "accordions";
+@import "autocomplete";
+@import "avatars";
+@import "badges";
+@import "breadcrumbs";
+@import "bars";
+@import "cards";
+@import "chips";
+@import "dropdowns";
+@import "empty";
+@import "menus";
+@import "modals";
+@import "navs";
+@import "pagination";
+@import "panels";
+@import "popovers";
+@import "steps";
+@import "tabs";
+@import "tiles";
+@import "toasts";
+@import "tooltips";
+
+// Utility classes
+@import "animations";
+@import "utilities";
diff --git a/src/toasts.less b/src/toasts.less
deleted file mode 100644
index 0bc61d6..0000000
--- a/src/toasts.less
+++ /dev/null
@@ -1,41 +0,0 @@
-// Toasts
-.toast {
-  border: @border-width solid @dark-color;
-  border-radius: @border-radius;
-  color: @light-color;
-  display: block;
-  padding: @layout-spacing;
-  .toast-variant(@dark-color);
-  width: 100%;
-
-  &.toast-primary {
-    .toast-variant(@primary-color);
-  }
-
-  &.toast-success {
-    .toast-variant(@success-color);
-  }
-
-  &.toast-warning {
-    .toast-variant(@warning-color);
-  }
-
-  &.toast-error {
-    .toast-variant(@error-color);
-  }
-
-  a {
-    color: @light-color;
-    text-decoration: underline;
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      opacity: .75;
-    }
-  }
-
-  .btn-clear {
-    margin: 2px -2px 2px 4px;
-  }
-}
diff --git a/src/utilities.less b/src/utilities.less
deleted file mode 100644
index 676beb0..0000000
--- a/src/utilities.less
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'utilities/colors.less';
-@import 'utilities/display.less';
-@import 'utilities/divider.less';
-@import 'utilities/loading.less';
-@import 'utilities/position.less';
-@import 'utilities/shapes.less';
-@import 'utilities/text.less';
\ No newline at end of file
diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss
new file mode 100644
index 0000000..eced5ad
--- /dev/null
+++ b/src/utilities/_colors.scss
@@ -0,0 +1,29 @@
+// Text colors
+@include text-color-variant(".text-primary", $primary-color);
+
+@include text-color-variant(".text-secondary", $secondary-color-dark);
+
+@include text-color-variant(".text-gray", $gray-color);
+
+@include text-color-variant(".text-light", $light-color);
+
+@include text-color-variant(".text-success", $success-color);
+
+@include text-color-variant(".text-warning", $warning-color);
+
+@include text-color-variant(".text-error", $error-color);
+
+// Background colors
+@include bg-color-variant(".bg-primary", $primary-color);
+
+@include bg-color-variant(".bg-secondary", $secondary-color);
+
+@include bg-color-variant(".bg-dark", $dark-color);
+
+@include bg-color-variant(".bg-gray", $bg-color);
+
+@include bg-color-variant(".bg-success", $success-color);
+
+@include bg-color-variant(".bg-warning", $warning-color);
+
+@include bg-color-variant(".bg-error", $error-color);
diff --git a/src/utilities/_cursors.scss b/src/utilities/_cursors.scss
new file mode 100644
index 0000000..bfc4c6b
--- /dev/null
+++ b/src/utilities/_cursors.scss
@@ -0,0 +1,24 @@
+// Cursors
+.c-hand {
+  cursor: pointer;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-zoom-in {
+  cursor: zoom-in;
+}
+
+.c-zoom-out {
+  cursor: zoom-out;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-auto {
+  cursor: auto;
+}
diff --git a/src/utilities/display.less b/src/utilities/_display.scss
index 26e611e..c6248e0 100644
--- a/src/utilities/display.less
+++ b/src/utilities/_display.scss
@@ -15,7 +15,7 @@
   display: inline-flex;
 }
 .d-none,
-.hide {
+.d-hide {
   display: none !important;
 }
 .d-visible {
@@ -42,6 +42,3 @@
   position: absolute;
   width: 1px;
 }
-.hand {
-  cursor: pointer;
-}
diff --git a/src/utilities/divider.less b/src/utilities/_divider.scss
index a5cb45b..5d0feb2 100644
--- a/src/utilities/divider.less
+++ b/src/utilities/_divider.scss
@@ -5,44 +5,44 @@
   position: relative;
 
   &[data-content]::after {
-    background: @bg-color-light;
-    color: @gray-color;
+    background: $bg-color-light;
+    color: $gray-color;
     content: attr(data-content);
     display: inline-block;
-    font-size: @font-size-sm;
-    padding: 0 @unit-2;
-    transform: translateY(-@font-size-sm + @border-width);
+    font-size: $font-size-sm;
+    padding: 0 $unit-2;
+    transform: translateY(-$font-size-sm + $border-width);
   }
 }
 
 .divider {
-  border-top: @border-width solid @border-color;
-  height: @border-width;
-  margin: @unit-2 0;
+  border-top: $border-width solid $border-color;
+  height: $border-width;
+  margin: $unit-2 0;
 
   &[data-content] {
-    margin: @unit-4 0;
+    margin: $unit-4 0;
   }
 }
 
 .divider-vert {
   display: block;
-  padding: @unit-4;
+  padding: $unit-4;
 
   &::before {
-    border-left: @border-width solid @border-color;
-    bottom: @unit-2;
+    border-left: $border-width solid $border-color;
+    bottom: $unit-2;
     content: "";
     display: block;
     left: 50%;
     position: absolute;
-    top: @unit-2;
+    top: $unit-2;
     transform: translateX(-50%);
   }
 
   &[data-content]::after {
     left: 50%;
-    padding: @unit-1 0;
+    padding: $unit-1 0;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
diff --git a/src/utilities/loading.less b/src/utilities/_loading.scss
index 767ec9e..1b4ea60 100644
--- a/src/utilities/loading.less
+++ b/src/utilities/_loading.scss
@@ -1,34 +1,34 @@
 // Loading
 .loading {
   color: transparent !important;
-  min-height: @unit-4;
+  min-height: $unit-4;
   pointer-events: none;
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: @border-width-lg solid @primary-color;
+    border: $border-width-lg solid $primary-color;
     border-radius: 50%;
     border-right-color: transparent;
     border-top-color: transparent;
     content: "";
     display: block;
-    height: @unit-4;
+    height: $unit-4;
     left: 50%;
-    margin-left: -@unit-2;
-    margin-top: -@unit-2;
+    margin-left: -$unit-2;
+    margin-top: -$unit-2;
     position: absolute;
     top: 50%;
-    width: @unit-4;
-    z-index: @zindex-0;
+    width: $unit-4;
+    z-index: $zindex-0;
   }
 
   &.loading-lg {
-    min-height: @unit-10;
+    min-height: $unit-10;
     &::after {
-      height: @unit-8;
-      width: @unit-8;
-      margin-left: -@unit-4;
-      margin-top: -@unit-4;
+      height: $unit-8;
+      margin-left: -$unit-4;
+      margin-top: -$unit-4;
+      width: $unit-8;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/utilities/position.less b/src/utilities/_position.scss
index 235d6a6..1f4c5e8 100644
--- a/src/utilities/position.less
+++ b/src/utilities/_position.scss
@@ -1,10 +1,12 @@
 // Position
 .clearfix {
-  .clearfix();
+  @include clearfix();
 }
+
 .float-left {
   float: left !important;
 }
+
 .float-right {
   float: right !important;
 }
@@ -12,12 +14,15 @@
 .relative {
   position: relative;
 }
+
 .absolute {
   position: absolute;
 }
+
 .fixed {
   position: fixed;
 }
+
 .centered {
   display: block;
   float: none;
@@ -26,10 +31,14 @@
 }
 
 // Spacing
-.margin-variant(0, 0);
-.margin-variant(1, @unit-1);
-.margin-variant(2, @unit-2);
+@include margin-variant(0, 0);
+
+@include margin-variant(1, $unit-1);
+
+@include margin-variant(2, $unit-2);
+
+@include padding-variant(0, 0);
+
+@include padding-variant(1, $unit-1);
 
-.padding-variant(0, 0);
-.padding-variant(1, @unit-1);
-.padding-variant(2, @unit-2);
\ No newline at end of file
+@include padding-variant(2, $unit-2);
diff --git a/src/utilities/shapes.less b/src/utilities/_shapes.scss
index e9f63bc..c11d5df 100644
--- a/src/utilities/shapes.less
+++ b/src/utilities/_shapes.scss
@@ -1,7 +1,8 @@
 // Shapes
 .rounded {
-  border-radius: @border-radius;
+  border-radius: $border-radius;
 }
+
 .circle {
   border-radius: 50%;
 }
diff --git a/src/utilities/text.less b/src/utilities/_text.scss
index f571613..67793ac 100644
--- a/src/utilities/text.less
+++ b/src/utilities/_text.scss
@@ -1,50 +1,62 @@
 // Text
+// Text alignment utilities
 .text-left {
   text-align: left;
 }
+
 .text-right {
   text-align: right;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-justify {
   text-align: justify;
 }
 
+// Text transform utilities
 .text-lowercase {
   text-transform: lowercase;
 }
+
 .text-uppercase {
   text-transform: uppercase;
 }
+
 .text-capitalize {
   text-transform: capitalize;
 }
 
+// Text style utilities
 .text-normal {
   font-weight: normal;
 }
+
 .text-bold {
   font-weight: bold;
 }
+
 .text-italic {
   font-style: italic;
 }
+
 .text-large {
   font-size: 1.2em;
 }
 
+// Text overflow utilities
 .text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @include text-ellipsis();
 }
+
 .text-clip {
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
 }
+
 .text-break {
   hyphens: auto;
   word-break: break-word;
diff --git a/src/utilities/colors.less b/src/utilities/colors.less
deleted file mode 100644
index 9571241..0000000
--- a/src/utilities/colors.less
+++ /dev/null
@@ -1,45 +0,0 @@
-// Text colors
-.text-primary {
-  .text-color-variant(@primary-color);
-}
-.text-secondary {
-  .text-color-variant(@secondary-color-dark);
-}
-.text-gray {
-  .text-color-variant(@gray-color);
-}
-.text-light {
-  .text-color-variant(@light-color);
-}
-.text-success {
-  .text-color-variant(@success-color);
-}
-.text-warning {
-  .text-color-variant(@warning-color);
-}
-.text-error {
-  .text-color-variant(@error-color);
-}
-
-// Background colors
-.bg-primary {
-  .bg-color-variant(@primary-color);
-}
-.bg-secondary {
-  .bg-color-variant(@secondary-color);
-}
-.bg-dark {
-  .bg-color-variant(@dark-color);
-}
-.bg-gray {
-  .bg-color-variant(@bg-color);
-}
-.bg-success {
-  .bg-color-variant(@success-color);
-}
-.bg-warning {
-  .bg-color-variant(@warning-color);
-}
-.bg-error {
-  .bg-color-variant(@error-color);
-}
diff --git a/src/variables.less b/src/variables.less
deleted file mode 100644
index d146459..0000000
--- a/src/variables.less
+++ /dev/null
@@ -1,104 +0,0 @@
-// Core variables
-
-// Global
-@html-font-size: 20px;
-@html-line-height: 1.428571429;
-@body-bg: @bg-color-light;
-@body-font-color: lighten(@dark-color, 5%);
-@font-size: .7rem;
-@font-size-sm: .6rem;
-@font-size-lg: .8rem;
-@line-height: 1rem;
-
-// Fonts
-// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-@base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
-@mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-@fallback-font-family: "Helvetica Neue", sans-serif;
-@cjk-zh-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", @fallback-font-family;
-@cjk-jp-font-family: @base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, @fallback-font-family;
-@cjk-ko-font-family: @base-font-family, "Malgun Gothic", @fallback-font-family;
-@body-font-family: @base-font-family, @fallback-font-family;
-
-// Unit sizes
-@unit-o: .05rem;
-@unit-h: .1rem;
-@unit-1: .2rem;
-@unit-2: .4rem;
-@unit-3: .6rem;
-@unit-4: .8rem;
-@unit-5: 1rem;
-@unit-6: 1.2rem;
-@unit-7: 1.4rem;
-@unit-8: 1.6rem;
-@unit-9: 1.8rem;
-@unit-10: 2rem;
-@unit-12: 2.4rem;
-@unit-16: 3.2rem;
-
-// Sizes
-@layout-spacing: @unit-2;
-@layout-spacing-sm: @unit-1;
-@layout-spacing-lg: @unit-4;
-@control-size: @unit-8;
-@control-size-sm: @unit-6;
-@control-size-lg: @unit-10;
-@control-padding-h: @unit-2;
-@control-padding-v: (@control-size - @line-height) / 2 - @border-width;
-@control-padding-v-sm: (@control-size-sm - @line-height) / 2 - @border-width;
-@control-padding-v-lg: (@control-size-lg - @line-height) / 2 - @border-width;
-@control-icon-size: .7rem; 
-@control-min-width: 180px;
-@control-max-width: 320px;
-@border-radius: @unit-h;
-@border-width: @unit-o;
-@border-width-lg: @unit-h;
-
-// Colors
-// Core colors
-@primary-color: #5764c6;
-@primary-color-dark: darken(@primary-color, 3%);
-@primary-color-light: lighten(@primary-color, 3%);
-@secondary-color: lighten(@primary-color, 40%);
-@secondary-color-dark: darken(@secondary-color, 3%);
-@secondary-color-light: lighten(@secondary-color, 3%);
-
-@link-color: @primary-color;
-@link-color-dark: darken(@link-color, 5%);
-
-// Gray colors
-@dark-color: #454d5d;
-@light-color: #fff;
-@gray-color: lighten(@dark-color, 40%);
-@gray-color-dark: darken(@gray-color, 20%);
-@gray-color-light: lighten(@gray-color, 20%);
-
-@border-color: lighten(@dark-color, 60%);
-@border-color-dark: darken(@border-color, 10%);
-@bg-color: lighten(@dark-color, 66%);
-@bg-color-dark: darken(@bg-color, 3%);
-@bg-color-light: @light-color;
-
-// Control colors
-@success-color: #32b643;
-@warning-color: #ffb700;
-@error-color: #e85600;
-
-// Other colors
-@code-color: #e06870;
-@highlight-color: #ffe9b3;
-
-// Responsive breakpoints
-@size-xs: 480px;
-@size-sm: 600px;
-@size-md: 840px;
-@size-lg: 960px;
-@size-xl: 1280px;
-@size-2x: 1440px;
-
-// Z-index
-@zindex-0: 1;
-@zindex-1: 100;
-@zindex-2: 200;
-@zindex-3: 300;
-@zindex-4: 400;