🚀 init: initial boilerplate

styles/abstracts/_colors.scss

@@ -0,0 +1,10 @@
+$colors: (
+  primary: (
+    400: #fff,
+    600: #d9d9d9,
+  ),
+  secondary: (
+    400: #000,
+    600: #272727,
+  ),
+);

styles/abstracts/_mixins.scss

@@ -0,0 +1,56 @@
+@mixin display-flex($content: center, $items: center, $direction: row) {
+  display: flex;
+  justify-content: #{$content};
+  align-items: #{$items};
+  flex-direction: #{$direction};
+}
+
+@mixin element-invisible($enforce: true) {
+  $important: if($enforce, "!important", null);
+
+  position: absolute #{$important};
+  width: 1px #{$important};
+  height: 1px #{$important};
+  padding: 0 #{$important};
+  overflow: hidden #{$important};
+  clip: rect(0, 0, 0, 0) #{$important};
+  white-space: nowrap #{$important};
+  border: 0 #{$important};
+}
+
+@mixin element-invisible-off($enforce: true) {
+  $important: if($enforce, "!important", null);
+
+  position: static #{$important};
+  width: auto #{$important};
+  height: auto #{$important};
+  overflow: visible #{$important};
+  clip: auto #{$important};
+  white-space: normal #{$important};
+}
+
+@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: $triangle-size;
+
+  @if $triangle-direction == down {
+    border-bottom-width: 0;
+    border-color: $triangle-color transparent transparent;
+  }
+  @if $triangle-direction == up {
+    border-top-width: 0;
+    border-color: transparent transparent $triangle-color;
+  }
+  @if $triangle-direction == right {
+    border-right-width: 0;
+    border-color: transparent transparent transparent $triangle-color;
+  }
+  @if $triangle-direction == left {
+    border-left-width: 0;
+    border-color: transparent $triangle-color transparent transparent;
+  }
+}

styles/abstracts/_variables.scss

@@ -0,0 +1,5 @@
+$breakpoints: (
+  small: 320px,
+  medium: 768px,
+  large: 1024px,
+) !default;