Use SCSS for styling

Start/Client/Sass/Spectre/utilities/_colors.scss

@@ -0,0 +1,31 @@
+// 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-dark", $body-font-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);

Start/Client/Sass/Spectre/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;
+}

Start/Client/Sass/Spectre/utilities/_display.scss

@@ -0,0 +1,44 @@
+// Display
+.d-block {
+  display: block;
+}
+.d-inline {
+  display: inline;
+}
+.d-inline-block {
+  display: inline-block;
+}
+.d-flex {
+  display: flex;
+}
+.d-inline-flex {
+  display: inline-flex;
+}
+.d-none,
+.d-hide {
+  display: none !important;
+}
+.d-visible {
+  visibility: visible;
+}
+.d-invisible {
+  visibility: hidden;
+}
+.text-hide {
+  background: transparent;
+  border: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  text-shadow: none;
+}
+.text-assistive {
+  border: 0;
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

Start/Client/Sass/Spectre/utilities/_divider.scss

@@ -0,0 +1,50 @@
+// Divider
+.divider,
+.divider-vert {
+  display: block;
+  position: relative;
+
+  &[data-content]::after {
+    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);
+  }
+}
+
+.divider {
+  border-top: $border-width solid $border-color-light;
+  height: $border-width;
+  margin: $unit-2 0;
+
+  &[data-content] {
+    margin: $unit-4 0;
+  }
+}
+
+.divider-vert {
+  display: block;
+  padding: $unit-4;
+
+  &::before {
+    border-left: $border-width solid $border-color;
+    bottom: $unit-2;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: $unit-2;
+    transform: translateX(-50%);
+  }
+
+  &[data-content]::after {
+    left: 50%;
+    padding: $unit-1 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

Start/Client/Sass/Spectre/utilities/_loading.scss

@@ -0,0 +1,37 @@
+// Loading
+.loading {
+  color: transparent !important;
+  min-height: $unit-4;
+  pointer-events: none;
+  position: relative;
+  &::after {
+    animation: loading 500ms infinite linear;
+    background: transparent;
+    border: $border-width-lg solid $primary-color;
+    border-radius: 50%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: $unit-4;
+    left: 50%;
+    margin-left: -$unit-2;
+    margin-top: -$unit-2;
+    opacity: 1;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    width: $unit-4;
+    z-index: $zindex-0;
+  }
+
+  &.loading-lg {
+    min-height: $unit-10;
+    &::after {
+      height: $unit-8;
+      margin-left: -$unit-4;
+      margin-top: -$unit-4;
+      width: $unit-8;
+    }
+  }
+}

Start/Client/Sass/Spectre/utilities/_position.scss

@@ -0,0 +1,54 @@
+// Position
+.clearfix {
+  @include clearfix();
+}
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.p-relative {
+  position: relative !important;
+}
+
+.p-absolute {
+  position: absolute !important;
+}
+
+.p-fixed {
+  position: fixed !important;
+}
+
+.p-sticky {
+  position: sticky !important;
+}
+
+.p-centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flex-centered {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+// Spacing
+@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);
+
+@include padding-variant(2, $unit-2);

Start/Client/Sass/Spectre/utilities/_shapes.scss

@@ -0,0 +1,8 @@
+// Shapes
+.s-rounded {
+  border-radius: $border-radius;
+}
+
+.s-circle {
+  border-radius: 50%;
+}

Start/Client/Sass/Spectre/utilities/_text.scss

@@ -0,0 +1,76 @@
+// 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-small {
+  font-size: .9em;
+}
+
+.text-tiny {
+  font-size: .8em;
+}
+
+.text-muted {
+  opacity: .8;
+}
+
+// Text overflow utilities
+.text-ellipsis {
+  @include text-ellipsis();
+}
+
+.text-clip {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+.text-break {
+  hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word;
+}