HAL Technique Article

Author: Veluet

src/lib/styles/_helpers.scss

@@ -25,13 +25,15 @@
   margin: 0 !important;
 }
 
+@include helper-loop(0, 4, 1, 'margin', 'margin', 'rem', 0, .25);
 @include helper-loop(0, 4, 1, 'margin-top', 'margin-top', 'rem', 0, .25);
 @include helper-loop(0, 4, 1, 'margin-right', 'margin-right', 'rem', 0, .25);
 @include helper-loop(0, 8, 1, 'margin-bottom', 'margin-bottom', 'rem', 0, .25);
 @include helper-loop(0, 4, 1, 'margin-left', 'margin-left', 'rem', 0, .25);
 
 
 /* Padding */
+@include helper-loop(0, 4, 1, 'padding', 'padding', 'rem', 0, .25);
 @include helper-loop(0, 4, 1, 'padding-top', 'padding-top', 'rem', 0, .25);
 @include helper-loop(0, 4, 1, 'padding-right', 'padding-right', 'rem', 0, .25);
 @include helper-loop(0, 4, 1, 'padding-bottom', 'padding-bottom', 'rem', 0, .25);
@@ -41,6 +43,19 @@
 .border-radius {
  border-radius: var(--border-radius);
 }
+.border-radius-top-left {
+  border-top-left-radius: var(--border-radius);
+ }
+ .border-radius-top-right {
+  border-top-right-radius: var(--border-radius);
+ }
+ .border-radius-bottom-left {
+  border-bottom-left-radius: var(--border-radius);
+ }
+ .border-radius-bottom-right {
+  border-bottom-right-radius: var(--border-radius);
+ }
+    
 
 /* Positioning */
 // Used for nudging elements slightly.
@@ -60,7 +75,10 @@
 }
 
 /* Flex */
-.d-flex {
+.display-block, .d-block {
+  display: block;
+}
+.display-flex, .d-flex {
   display: flex;
 }
 .justify-content-start {

src/lib/styles/mixins/_color.scss

@@ -3,17 +3,17 @@
 //  Create shades of each color and return values as map
 @function color-map($color, $values) {
     $base:        $values;
-    $lightest-ssjgssj:    scale-color(mix(#fff, $values, 99%), $saturation: 21%);
-    $lightest-ssjg:    scale-color(mix(#fff, $values, 97%), $saturation: 19%);
-    $lightest-ssj3:    scale-color(mix(#fff, $values, 93%), $saturation: 18%);
-    $lightest-ssj2:    scale-color(mix(#fff, $values, 90%), $saturation: 17%);
-    $lightest-ssj:    scale-color(mix(#fff, $values, 80%), $saturation: 15%);
-    $lightest:    scale-color(mix(#fff, $values, 60%), $saturation: 13%);
-    $lighter:     scale-color(mix(#fff, $values, 25%), $saturation: 11%);
-    $light-hint:  scale-color(mix(#fff, $values, 15%), $saturation:  9%);
-    $dark-hint:   scale-color(mix(#000, $values,  5%), $saturation: -3%);
-    $darker:      scale-color(mix(#000, $values, 30%), $saturation: -9%);
-    $darkest:     scale-color(mix(#000, $values, 45%), $saturation: -15%);
+    $lightest-ssjgssj:    scale-color(mix(#fff, $values, 99.5%), $saturation: 16%);
+    $lightest-ssjg:    scale-color(mix(#fff, $values, 99%), $saturation: 14%);
+    $lightest-ssj3:    scale-color(mix(#fff, $values, 95%), $saturation: 12%);
+    $lightest-ssj2:    scale-color(mix(#fff, $values, 90%), $saturation: 10%);
+    $lightest-ssj:    scale-color(mix(#fff, $values, 80%), $saturation: 8%);
+    $lightest:    scale-color(mix(#fff, $values, 60%), $saturation: 6%);
+    $lighter:     scale-color(mix(#fff, $values, 25%), $saturation: 4%);
+    $light-hint:  scale-color(mix(#fff, $values, 15%), $saturation:  2%);
+    $dark-hint:   scale-color(mix(#000, $values,  5%), $saturation: -2%);
+    $darker:      scale-color(mix(#000, $values, 30%), $saturation: -4%);
+    $darkest:     scale-color(mix(#000, $values, 45%), $saturation: -6%);
 
 
     $color-shades: (
@@ -25,7 +25,28 @@
             #{$color}-25:  $darker,
             #{$color}-0:   $darkest
     );
+
+    // There's always a need to go even further beyond with gray.
+    @if $color == "gray" {
+      $map: (#{$color}-200: $lightest-ssj);
+      $color-shades: map-merge($color-shades, $map);
+    }
 
+    @if $color == "gray" {
+      $map: (#{$color}-300: $lightest-ssj2);
+      $color-shades: map-merge($color-shades, $map);
+    }
+      
+    @if $color == "gray" {
+      $map: (#{$color}-400: $lightest-ssj3);
+      $color-shades: map-merge($color-shades, $map);
+    }
+          
+    @if $color == "gray" {
+      $map: (#{$color}-500: $lightest-ssjg);
+      $color-shades: map-merge($color-shades, $map);
+    }
+
     @return $color-shades;
   }
   //  Set up master map for all colors

src/lib/styles/mixins/_flex.scss

@@ -0,0 +1,44 @@
+/* Flex
+ * Stuff to generate display-flex helpers
+ */
+
+.display-flex {
+  display: flex;
+}
+
+/* EXAMPLE: .col-margin-1 or .row-margin-1 or .row-padding-1 or .col-margin-12 */
+// You get 1, 2, 3, 4, 8, 12, 16.  Padding isn't enabled (so enable if needed). Jump to end of file.
+
+// Add the breakpoints as they are needed: 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'
+$flex-breakpoints: 'xs', 'sm', 'md', 'lg'; 
+
+@mixin flex-styles($breakpoint) {
+
+  @if $breakpoint == 'xs' {
+    $breakpoint: '';
+  }
+  @else {
+    $breakpoint: '-#{$breakpoint}';
+  }
+
+  .display-flex#{$breakpoint} {
+    display: flex;
+  }
+  .justify-content-start#{$breakpoint} {
+    justify-content: start;
+  }
+}
+
+@mixin flex-breakpoint-loop($breakpoints) {
+
+  @each $breakpoint in $breakpoints {
+
+    @media (min-width: map-get($bootstrap-breakpoints, $breakpoint)) {
+      @include flex-styles($breakpoint);
+    }
+
+  }
+
+}
+
+@include flex-breakpoint-loop($flex-breakpoints);