mistergraphx · December 16, 2022 15:48 · Dec 16, 2022 · Dec 16, 2022 · Dec 16, 2022 · Dec 16, 2022
diff --git a/input.scss b/input.scss
@@ -0,0 +1,216 @@
+// SETTINGS
+$tiny-small: 360px !default;
+$tiny-medium: 480px !default;
+$tiny: 673px !default; // or 'em' if you prefer, of course
+$small: 768px !default;
+$medium: 1024px !default;
+$large: 1200px !default;
+$extra-large: 1350px !default;
+
+// Colors
+$grey3: grey;
+
+// Additionnal "utility" breakpoints aliases
+// ex. @include respond-to("medium-up") {...}
+$bp-aliases: (
+  'tiny-small'   : (max-width: #{$tiny-small - 1}),
+  'tiny-medium'   : (max-width: #{$tiny-medium - 1}),
+  'tiny'   : (max-width: #{$tiny - 1}),
+  'small'  : (max-width: #{$small - 1}),
+  'medium' : (max-width: #{$medium - 1}),
+  'large' : (max-width: #{$large - 1}),
+  'extra-large'  : (max-width: #{$extra-large - 1}),
+  'tiny-small-up'   : (min-width: #{$tiny-small}),
+  'tiny-medium-up'   : (min-width: #{$tiny-medium}),
+  'tiny-up'   : (min-width: #{$tiny}),
+  'small-up'  : (min-width: #{$small}),
+  'medium-up' : (min-width: #{$medium}),
+  'large-up' : (min-width: #{$large}),
+  'extra-large-up' : (min-width: #{$extra-large}),
+  'retina' : (min-resolution: 2dppx)
+);
+
+// MIXINS
+
+// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
+@mixin respond-to($name) {
+  // If the key exists in the map
+  @if map-has-key($bp-aliases, $name) {
+    // Prints a media query based on the value
+    @media #{inspect(map-get($bp-aliases, $name))} {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$name}`. "
+        + "Please make sure it is defined in `$bp-aliases` map.";
+  }
+}
+/// Compute the maximum depth of a map
+/// @param {Map} $map
+/// @return {Number} max depth of `$map`
+
+@function depth($map) {
+  $level: 1;
+
+  @each $key, $value in $map {
+    @if type-of($value) == "map" {
+      $level: max(depth($value) + 1, $level);
+    }
+  }
+
+  @return $level;
+}
+
+@mixin debug-map($map) {
+    @at-root {
+        @debug-map {
+            __toString__: inspect($map);
+            __length__: length($map);
+            __depth__: depth($map);
+            __keys__: if(type-of($map) == 'map',map-keys($map), type-of($map));
+            __properties__ {
+                @each $key, $value in $map {
+                    #{'(' + type-of($value) + ') ' + $key}: inspect($value);
+                }
+            }
+        }
+    }
+}
+
+// Spacings
+$spacer-tiny: 0.5rem !default;
+$spacer-tiny-plus: 0.7rem !default;
+$spacer-small: 1rem !default;
+$spacer-small-plus: 1.5rem !default;
+$spacer-medium: 2rem !default;
+$spacer-medium-plus: 3rem !default;
+$spacer-large: 4rem !default;
+$spacer-large-plus: 6rem !default;
+$spacer-extra-large: 8rem !default;
+$spacer-extra-large-plus: 12rem !default;
+$spacer-ultra-large: 16rem !default;
+$spacer-ultra-large-plus: 20rem !default;
+
+$spacers:(
+    0: 0,
+    auto: auto,
+    't': $spacer-tiny,
+    'tp': $spacer-tiny-plus,
+    's': $spacer-small,
+    'sp': $spacer-small-plus,
+    'm': $spacer-medium,
+    'mp': $spacer-medium-plus,
+    'l': $spacer-large,
+    'lp': $spacer-large-plus,
+    'el': $spacer-extra-large,
+    'elp': $spacer-extra-large-plus
+);
+
+$utilities: (
+    "flex-wrap": (
+        class: flex,
+        property: flex-wrap,
+        values: wrap nowrap,
+        important: true,
+        responsive: true,
+    ),
+    "flex-direction": (
+        class: flex,
+        property: flex-direction,
+        values: row column row-reverse column-reverse,
+        important: true,
+        responsive: true
+    ),
+    "marginx": (
+        class: mx,
+        property: margin-left margin-right,
+        values: auto,
+        important: true,
+        responsive: true
+    ),
+    "marginl": (
+        class: ml,
+        property: margin-left,
+        values: $spacers,
+        important: true,
+        responsive: true
+    )
+);
+
+@mixin generate-utilities($utility,$infix){
+    $values: map-get($utility, values);
+    // If the values are a list or string, convert it into a map
+    @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+        $values: zip($values, $values);
+    }
+    //@include debug-map($values);
+    @each $key,$value in $values{
+        $properties: map-get($utility, property);
+
+        // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+        @if type-of($properties) == "string" {
+          $properties: append((), $properties);
+        }
+        // Use custom class if present
+        $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+        $property-class: if($property-class == null, "", $property-class);
+
+        $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+        // Don't prefix if value key is null (eg. with shadow class)
+        $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+
+        @if $value != null {
+            .#{$property-class + $infix + $property-class-modifier} {
+              @each $property in $properties {
+                #{$property}: $value if(map-get($utility, important) == true, !important,null);
+              }
+            }
+        }
+
+    }
+}
+
+// OUTPUT
+
+@each $key,$utility in $utilities{
+    $infix : "";
+    @include generate-utilities($utility,$infix);
+}
+
+@each $breakpoint in ['small','small-up']{
+    @include respond-to(#{$breakpoint}){
+        $infix : '-' + $breakpoint;
+        @each $key,$utility in $utilities{
+            // The utility can be disabled with `false`, thus check if the utility is a map first
+            // Only proceed if responsive media queries are enabled or if it's the base media query
+            @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+                @include generate-utilities($utility, $infix);
+            }
+        }
+    }
+
+}
+
+
+
+
+
+html{
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+.container{
+  max-width: 96rem;
+  margin: 0 auto;
+
+  //border: 1px solid red;
+}
+
+.headline{
+  font-size: 3rem;
+}
+
diff --git a/output.css b/output.css
@@ -0,0 +1,246 @@
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.ml-0 {
+  margin-left: 0 !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.ml-t {
+  margin-left: 0.5rem !important;
+}
+
+.ml-tp {
+  margin-left: 0.7rem !important;
+}
+
+.ml-s {
+  margin-left: 1rem !important;
+}
+
+.ml-sp {
+  margin-left: 1.5rem !important;
+}
+
+.ml-m {
+  margin-left: 2rem !important;
+}
+
+.ml-mp {
+  margin-left: 3rem !important;
+}
+
+.ml-l {
+  margin-left: 4rem !important;
+}
+
+.ml-lp {
+  margin-left: 6rem !important;
+}
+
+.ml-el {
+  margin-left: 8rem !important;
+}
+
+.ml-elp {
+  margin-left: 12rem !important;
+}
+
+@media (max-width: 767px) {
+  .flex-small-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-small-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-small-row {
+    flex-direction: row !important;
+  }
+
+  .flex-small-column {
+    flex-direction: column !important;
+  }
+
+  .flex-small-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-small-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .mx-small-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
+  .ml-small-0 {
+    margin-left: 0 !important;
+  }
+
+  .ml-small-auto {
+    margin-left: auto !important;
+  }
+
+  .ml-small-t {
+    margin-left: 0.5rem !important;
+  }
+
+  .ml-small-tp {
+    margin-left: 0.7rem !important;
+  }
+
+  .ml-small-s {
+    margin-left: 1rem !important;
+  }
+
+  .ml-small-sp {
+    margin-left: 1.5rem !important;
+  }
+
+  .ml-small-m {
+    margin-left: 2rem !important;
+  }
+
+  .ml-small-mp {
+    margin-left: 3rem !important;
+  }
+
+  .ml-small-l {
+    margin-left: 4rem !important;
+  }
+
+  .ml-small-lp {
+    margin-left: 6rem !important;
+  }
+
+  .ml-small-el {
+    margin-left: 8rem !important;
+  }
+
+  .ml-small-elp {
+    margin-left: 12rem !important;
+  }
+}
+@media (min-width: 768px) {
+  .flex-small-up-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-small-up-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-small-up-row {
+    flex-direction: row !important;
+  }
+
+  .flex-small-up-column {
+    flex-direction: column !important;
+  }
+
+  .flex-small-up-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-small-up-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .mx-small-up-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
+  .ml-small-up-0 {
+    margin-left: 0 !important;
+  }
+
+  .ml-small-up-auto {
+    margin-left: auto !important;
+  }
+
+  .ml-small-up-t {
+    margin-left: 0.5rem !important;
+  }
+
+  .ml-small-up-tp {
+    margin-left: 0.7rem !important;
+  }
+
+  .ml-small-up-s {
+    margin-left: 1rem !important;
+  }
+
+  .ml-small-up-sp {
+    margin-left: 1.5rem !important;
+  }
+
+  .ml-small-up-m {
+    margin-left: 2rem !important;
+  }
+
+  .ml-small-up-mp {
+    margin-left: 3rem !important;
+  }
+
+  .ml-small-up-l {
+    margin-left: 4rem !important;
+  }
+
+  .ml-small-up-lp {
+    margin-left: 6rem !important;
+  }
+
+  .ml-small-up-el {
+    margin-left: 8rem !important;
+  }
+
+  .ml-small-up-elp {
+    margin-left: 12rem !important;
+  }
+}
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+.container {
+  max-width: 96rem;
+  margin: 0 auto;
+}
+
+.headline {
+  font-size: 3rem;
+}
diff --git a/settings.json b/settings.json
@@ -0,0 +1,9 @@
+{
+  "sass": {
+    "compiler": "dart-sass/1.32.12",
+    "extensions": {},
+    "syntax": "SCSS",
+    "outputStyle": "expanded"
+  },
+  "autoprefixer": false
+}
No results found