Style setup

src/style/tools/_functions.scss

@@ -0,0 +1,18 @@
+/* PX to REM
+========================================================================== */
+@function rem ($target, $context: $base-font-size) {
+    @if $target == 0 { @return 0 }
+    $size: $target / $context;
+    @return round($size * 1000) / 1000 + rem;
+}
+
+
+/* Headings
+========================================================================== */
+@function headings ($from: 1, $to: 6) {
+    @if $from == $to {
+        @return "h#{$from}";
+    } @else {
+        @return "h#{$from}," + headings($from + 1, $to);
+    }
+}

src/style/tools/_helpers.scss

@@ -0,0 +1,28 @@
+/* Classes
+========================================================================== */
+.clear {
+    @extend %clearfix;
+}
+%center {
+    margin: 0 auto;
+}
+%trbl {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+%full-size {
+    width: 100%;
+    height: 100%;
+}
+
+
+/* Containers
+========================================================================== */
+.container {
+
+}
+.wrap {
+
+}

src/style/tools/_mixins.scss

@@ -0,0 +1,88 @@
+// Hide text
+%hide-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: 200%;
+}
+
+// Clearfix
+%clearfix {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+// Get REM font-size and line-height
+@mixin fs-lh ($fontSize, $lineHeight) {
+    line-height: round(($fontSize / $lineHeight) * 1000) / 1000;
+    font-size: rem($fontSize);
+}
+
+// Top-right-bottom-left
+@mixin trbl ($value: 0) {
+    top: $value; right: $value; bottom: $value; left: $value;
+}
+
+// Center vertically
+@mixin center-y {
+    top: 50%;
+    transform: translate3d(0,-50%,0);
+}
+
+// Center horizontally
+@mixin center-x {
+    left: 50%;
+    transform: translate3d(-50%,0,0);
+}
+
+// Center vertically and horizontally
+@mixin center-xy {
+    top: 50%; left: 50%;
+    transform: translate3d(-50%,-50%,0);
+}
+
+// Smooth fonts
+@mixin font-smooth {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+// Reponsive breakpoints
+@mixin breakpoint ($size) {
+    @if ($size == m) {
+        @media (min-width: $screen-m) { @content; }
+    }
+    @else if ($size == xs) {
+        @media (max-width: $screen-xs) { @content; }
+    }
+    @else if ($size == sm) {
+        @media (min-width: $screen-sm) { @content; }
+    }
+    @else if ($size == md) {
+        @media (min-width: $screen-md) { @content; }
+    }
+    @else if ($size == lg) {
+        @media (min-width: $screen-lg) { @content; }
+    }
+    @else if ($size == xl) {
+        @media (min-width: $screen-xl) { @content; }
+    }
+    @else {
+        @media (min-width: $size) { @content; }
+    }
+}
+
+// Font-face
+@mixin font-face ($family) {
+    @font-face {
+        font-family: "#{$family}";
+        font-style: normal;
+        font-weight: normal;
+        font-display: swap;
+        src: local("#{$family}"),
+             url("#{$dir-fonts}/#{$family}.woff2") format("woff2"),
+             url("#{$dir-fonts}/#{$family}.woff") format("woff");
+    }
+}