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;

frontend/src/styles/util/_index.scss

@@ -0,0 +1,47 @@
+const packages = {
+    gulp: { src, dest, series, watch } = require('gulp'),
+    scss: require('gulp-sass')(require('sass')),
+    autoPrefix: require('gulp-autoprefixer'),
+    min: {
+        css: require('gulp-clean-css'),
+        js: require('gulp-terser')
+    }
+};
+const config = {
+    path: {
+        styles: {
+            src: './frontend/src/styles/**/*.scss',
+            dest: './frontend/dist/styles/'
+        },
+        scripts: {
+            src: './frontend/src/scripts/**/*.js',
+            dest: './frontend/dist/scripts/'
+        }
+    },
+    tasks: {
+        styles: () => {
+            return packages.gulp.src(config.path.styles.src)
+                .pipe(packages.scss())
+                .pipe(packages.autoPrefix('last 2 versions'))
+                .pipe(packages.min.css())
+                .pipe(packages.gulp.dest(config.path.styles.dest));
+        },
+        scripts: () => {
+            return packages.gulp.src(config.path.scripts.src)
+                .pipe(packages.min.js())
+                .pipe(packages.gulp.dest(config.path.scripts.dest));
+        },
+        watch: () => {
+            packages.gulp.watch(
+                [config.path.styles.src, config.path.scripts.src],
+                packages.gulp.series(config.tasks.styles, config.tasks.scripts)
+            );
+        }
+    }
+}
+
+exports.default = packages.gulp.series(
+    config.tasks.styles,
+    config.tasks.scripts,
+    config.tasks.watch
+);

frontend/src/styles/util/_mixins.scss

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- favicon -->
+    <!-- <link rel="shortcut icon" href="./frontend/dist/images/favicon.png" type="image/x-icon"> -->
+    <!-- animation library -->
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> -->
+    <!-- styles -->
+    <link rel="stylesheet" href="./frontend/dist/styles/app.css" />
+    <!-- fontawesome library -->
+    <!-- <script src="https://kit.fontawesome.com/6e358658ed.js" crossorigin="anonymous"></script> -->
+    <title>Document</title>
+  </head>
+  <body></body>
+</html>