starter-file dump w gulp

Author: dustinusey

.gitignore

@@ -0,0 +1 @@
+node_modules

README.MD

@@ -0,0 +1,3 @@
+@import "util/index";
+@import "base/index";
+@import "components/index";

frontend/src/scripts/app.js

@@ -0,0 +1,12 @@
+@import url("https://fonts.cdnfonts.com/css/gotham-rounded");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Gotham Rounded", sans-serif;
+  &::-webkit-scrollbar {
+  }
+  &::-webkit-scrollbar-thumb {
+  }
+}

frontend/src/styles/app.scss

@@ -0,0 +1 @@
+@import "base";

frontend/src/styles/base/_base.scss

@@ -0,0 +1 @@
+@import "variables", "mixins";

frontend/src/styles/base/_index.scss

@@ -0,0 +1,108 @@
+@mixin flex($direction, $wrapping, $justification, $alignment) {
+  @content;
+  display: flex;
+  flex-direction: $direction;
+  flex-wrap: $wrapping;
+  justify-content: $justification;
+  align-items: $alignment;
+}
+
+@mixin center-flex() {
+  @content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin size($height, $width) {
+  @content;
+  height: $height;
+  width: $width;
+}
+
+@mixin simple-size($size) {
+  @content;
+  height: $size;
+  width: $size;
+}
+
+@mixin strict-height($height) {
+  @content;
+  height: $height;
+  min-height: $height;
+  max-height: $height;
+}
+
+@mixin strict-width($width) {
+  @content;
+  width: $width;
+  min-width: $width;
+  max-width: $width;
+}
+
+@mixin responsive($min, $max, $gap) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax($min, $max));
+  gap: $gap;
+}
+
+@mixin wrapper($width) {
+  @content;
+  width: 100%;
+  max-width: $width;
+  margin: 0 auto;
+}
+
+@mixin text-overflow($lines) {
+  @content;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+}
+
+@mixin absolute-center($position: null) {
+  @content;
+  position: absolute;
+  position: $position;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin radius($radius) {
+  @content;
+  border-radius: $radius;
+}
+
+@mixin bg($color) {
+  @content;
+  background-color: $color;
+}
+
+@mixin glass($blur) {
+  @content;
+  backdrop-filter: blur($blur);
+}
+
+@mixin bs($color) {
+  @content;
+  box-shadow: 0 3px 0 $color;
+}
+
+@mixin theme-transition {
+  @content;
+  transition: background 0.5s ease, color 0.5s ease;
+}
+
+@mixin break($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @warn "No breakpoint matching: `#{$breakpoint}`."
+          + "Available breakpoints are #{map-keys($breakpoints),}.";
+  }
+}

frontend/src/styles/components/_index.scss

@@ -0,0 +1,16 @@
+$breakpoints: (
+  // smalls
+  "small": 320px,
+  "mobile": 320px,
+  //   mediums
+  "smedium": 500px,
+  "medium": 768px,
+  "tablet": 768px,
+  //   larges
+  "large": 1024px,
+  "desktop": 1024px,
+  //   extra larges
+  "xlarge": 1200px,
+  "xxlarge": 1440px,
+  "widescreen": 1440px
+) !default;