updating to 4.0

New design with breaking changes, gulp 4, all dependencies updated, dev environment changed, and many more changes

scss/utilities/_animation.scss

@@ -0,0 +1,37 @@
+// Animation Utilities
+
+// Grow In Animation
+
+@keyframes growIn {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animated--grow-in {
+  animation-name: growIn;
+  animation-duration: 200ms;
+  animation-timing-function: transform cubic-bezier(.18,1.25,.4,1), opacity cubic-bezier(0,1,.4,1);
+}
+
+// Fade In Animation
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.animated--fade-in {
+  animation-name: fadeIn;
+  animation-duration: 200ms;
+  animation-timing-function: opacity cubic-bezier(0,1,.4,1);
+}

scss/utilities/_background.scss

@@ -0,0 +1,69 @@
+// Background Gradient Utilities
+
+.bg-gradient-primary {
+  background-color: $primary;
+  background-image: linear-gradient(180deg, $primary 10%, darken($primary, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-success {
+  background-color: $success;
+  background-image: linear-gradient(180deg, $success 10%, darken($success, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-info {
+  background-color: $info;
+  background-image: linear-gradient(180deg, $info 10%, darken($info, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-warning {
+  background-color: $warning;
+  background-image: linear-gradient(180deg, $warning 10%, darken($warning, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-danger {
+  background-color: $danger;
+  background-image: linear-gradient(180deg, $danger 10%, darken($danger, 15%) 100%);
+  background-size: cover;
+}
+
+// Grayscale Background Utilities
+
+.bg-gray-100 {
+  background-color: $gray-100 !important;
+}
+
+.bg-gray-200 {
+  background-color: $gray-200 !important;
+}
+
+.bg-gray-300 {
+  background-color: $gray-300 !important;
+}
+
+.bg-gray-400 {
+  background-color: $gray-400 !important;
+}
+
+.bg-gray-500 {
+  background-color: $gray-500 !important;
+}
+
+.bg-gray-600 {
+  background-color: $gray-600 !important;
+}
+
+.bg-gray-700 {
+  background-color: $gray-700 !important;
+}
+
+.bg-gray-800 {
+  background-color: $gray-800 !important;
+}
+
+.bg-gray-900 {
+  background-color: $gray-900 !important;
+}

scss/utilities/_display.scss

@@ -0,0 +1,4 @@
+// Overflow Hidden
+.o-hidden {
+  overflow: hidden !important;
+}

scss/utilities/_text.scss

@@ -0,0 +1,37 @@
+// Grayscale Text Utilities
+
+.text-gray-100 {
+  color: $gray-100 !important;
+}
+
+.text-gray-200 {
+  color: $gray-200 !important;
+}
+
+.text-gray-300 {
+  color: $gray-300 !important;
+}
+
+.text-gray-400 {
+  color: $gray-400 !important;
+}
+
+.text-gray-500 {
+  color: $gray-500 !important;
+}
+
+.text-gray-600 {
+  color: $gray-600 !important;
+}
+
+.text-gray-700 {
+  color: $gray-700 !important;
+}
+
+.text-gray-800 {
+  color: $gray-800 !important;
+}
+
+.text-gray-900 {
+  color: $gray-900 !important;
+}