nk_jtb 0.6.0 → 0.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nk_jtb",
   "description": "Yet another utility based framework.",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/naykel76/nk_jtb.git"
@@ -14,6 +14,7 @@
     "flex": "sass --watch --no-source-map ./scss/utilities/_flex.scss:dist/css/flex.css",
     "grid": "sass --watch --no-source-map ./scss/utilities/_grid.scss:dist/css/grid.css",
     "play": "sass --watch --no-source-map ./scss/play.scss:dist/css/play.css",
+    "jtb": "sass --watch --no-source-map ./scss/jtb.scss:dist/css/jtb.css",
     "dev": "vite --open",
     "build": "vite build",
     "preview": "vite preview"

package/scss/_nk.scss

@@ -16,7 +16,6 @@
 // what else it affects
 #nk-header,
 #nk-header > .#{$container-class} {
-
     #search {
         display: flex;
         flex: 1 1 auto;
@@ -74,16 +73,6 @@
 // -- BITS AND BOB'S --
 // ==========================================================================
 
-// make code block comments stand out
-.hljs-comment {
-    color: hsl(120, 98%, 35%) !important;
-}
-
-pre code.hljs{
-    padding: 1.5em !important;
-    line-height: 2;
-}
-
 trix-editor {
     background: white !important;
     min-height: 100px !important;
@@ -98,6 +87,81 @@ trix-editor {
     }
 }
 
+// ==========================================================================
+// -- MARKDOWN --
+// ==========================================================================
+
+// make code block comments stand out
+.hljs-comment {
+    color: hsl(120, 98%, 35%) !important;
+}
+
+pre code.hljs {
+    padding: 1.5em !important;
+    line-height: 2;
+}
+
+.code-first-col,
+.code-second-col,
+.code-all-col {
+    + table tbody {
+        margin-top: $content-gap;
+        font-size: 0.85em;
+        tr td:first-child {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            color: #f0506e;
+            border-radius: 0.25rem;
+        }
+    }
+}
+
+.code-all-col {
+    + table tbody {
+        td {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            color: #f0506e;
+            border-radius: 0.25rem;
+        }
+    }
+}
+
+.markdown {
+    // hack to remove indented when using @verbatim
+    .-ml-2 pre code {
+        margin-left: -2rem;
+    }
+    .-ml-3 pre code {
+        margin-left: -3rem;
+    }
+    .-ml-4 pre code {
+        margin-left: -4rem;
+    }
+    .-ml-5 pre code {
+        margin-left: -5rem;
+    }
+    .-ml-7 pre code {
+        margin-left: -7rem;
+    }
+
+    table {
+        width: 100%; // DON'T CHANGE!!
+    }
+
+    // allow to work in markdown component with div
+    pre {
+        margin-top: $content-gap;
+        margin-bottom: $content-gap;
+    }
+
+    h2::before {
+        content: " ";
+        display: block;
+        width: 100%;
+        margin-bottom: 2rem;
+        height: 12px;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20px' height='12px' viewBox='0 0 20 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3e%3cpath d='M25,1 C20,1 20,11 15,11 C10,11 10,1 5,1 C0,1 0,11 -5,11 C-10,11 -10,1 -15,1' id='Line' stroke='%23CBD5DF' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
+    }
+}
 
 // ==========================================================================
 // -- Primary banner for page layouts --
@@ -119,4 +183,3 @@ $banner-text-bg: transparent !default;
         padding: 1rem;
     }
 }
-

package/scss/base/_base.scss

@@ -287,8 +287,7 @@ ul {
 
 li ul,
 li ol {
-    margin-top: 0.5em;
-    margin-top: 0;
+    margin-top: 0.25em;
     margin-left: 1rem;
 }
 

package/scss/mixins/{_makeCssPropertyMixins.scss → _helpers.scss}

@@ -1,21 +1,20 @@
 // --------------------------------------------------------------
-// -- CREATE POSITION BASED CSS PROPERTIES --
+// -- CREATE POSITION BASED PROPERTIES --
 // --------------------------------------------------------------
 // iterates through a list of positions creating the appropriate
 // property (top, bottom, left, right)
 
-@mixin makeCssPositionProperty($property, $value, $positions) {
+@mixin makePositionProperties($property, $value, $positions) {
     @each $position in $positions {
         #{$property}-#{$position}: $value;
     }
 }
 
 // --------------------------------------------------------------
-// -- CREATE SINGLE CSS PROPERTY --
+// -- CREATE SINGLE PROPERTY --
 // --------------------------------------------------------------
-// creates a single size based properties. if the situation arises when you do
-// not need a unit, re-write with conditional
-@mixin makeCssProperty($property, $value, $unit: null) {
+// creates a single size based properties.
+@mixin makeUnitProperty($property, $value, $unit: null) {
     $val: if($value == "full", 100, $value);
     $u: if($value == "full", "%", $unit);
     #{$property}: #{$val}#{$u};
@@ -24,7 +23,8 @@
 // --------------------------------------------------------------
 // -- CREATE SINGLE PROPERTY CLASS --
 // --------------------------------------------------------------
-@mixin makeClassSingleProperty($class, $property, $value) {
+// optionally add a breakpoint to make responsive
+@mixin makeClass($class, $property, $value) {
     .#{$class} {
         #{$property}: $value;
     }

package/scss/mixins/_makeMagicClass.scss

@@ -1,5 +1,5 @@
 @use "./media" as *;
-@use "./makeCssPropertyMixins" as *;
+@use "./helpers" as *;
 @use "sass:list";
 @use "sass:map";
 @use "sass:string";
@@ -35,24 +35,24 @@
 
             .#{$prefix}-#{$derived-class} {
                 @include from-sm {
-                    @include makeCssProperty($property, $smValue, $unit);
+                    @include makeUnitProperty($property, $smValue, $unit);
                 }
                 @include from-md {
-                    @include makeCssProperty($property, $mdValue, $unit);
+                    @include makeUnitProperty($property, $mdValue, $unit);
                 }
                 @if ($numBreakPoints >= 3) {
                     @include from-lg {
-                        @include makeCssProperty($property, $lgValue, $unit);
+                        @include makeUnitProperty($property, $lgValue, $unit);
                     }
                 }
                 @if ($numBreakPoints >= 4) {
                     @include from-xl {
-                        @include makeCssProperty($property, $xlValue, $unit);
+                        @include makeUnitProperty($property, $xlValue, $unit);
                     }
                 }
                 @if ($numBreakPoints >= 5) {
                     @include from-xxl {
-                        @include makeCssProperty($property, $xxlValue,$unit);
+                        @include makeUnitProperty($property, $xxlValue,$unit);
                     }
                 }
             }

package/scss/mixins/_makeResponsiveClasses.scss

@@ -1,89 +1,88 @@
 @use "./media" as *;
 
-// At first glance it seems really dumb to create mixins full of if-else
-// statements and that is because it is! SCSS will not allow interpolation for
-// @include so there is no other way.
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
+// SCSS does not support interpolation for @include so there is no
+// choice other than using multiple if-else statements.
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
 
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-// must be marked !important to ensure override default property
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-
-@mixin makeFromDevice($prefix, $property, $value, $args...) {
-    @each $device in $args {
-        .#{$prefix}#{$device} {
-            @if ($device == "sm") {
+// output:  {bp}\:class
+@mixin makeFromBreakpoint($class, $property, $value, $breakpoints...) {
+    @each $bp in $breakpoints {
+        .#{$bp}\:#{$class} {
+            @if ($bp == "sm") {
                 @include from-sm {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "md") {
+            } @else if($bp == "md") {
                 @include from-md {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "lg") {
+            } @else if($bp == "lg") {
                 @include from-lg {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "xl") {
+            } @else if($bp == "xl") {
                 @include from-xl {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "xxl") {
+            } @else if($bp == "xxl") {
                 @include from-xxl {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
             }
         }
     }
 }
 
-@mixin makeToDevice($prefix, $property, $value, $args...) {
-    @each $device in $args {
-        .#{$prefix}#{$device} {
-            @if ($device == "sm") {
+// output:  to-{breakpoint}\:class
+@mixin makeToBreakpoint($class, $property, $value, $breakpoints...) {
+    @each $bp in $breakpoints {
+        .#{$bp}\:#{$class} {
+            @if ($bp == "sm") {
                 @include to-sm {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "md") {
+            } @else if($bp == "md") {
                 @include to-md {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "lg") {
+            } @else if($bp == "lg") {
                 @include to-lg {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "xl") {
+            } @else if($bp == "xl") {
                 @include to-xl {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
             } @else {
-                @error 'The device '#{$device}' is not available for this mixin, you need to remove it from the args list.';
+                @error 'The device '#{$bp}' is not available for this mixin, you need to remove it from the args list.';
             }
         }
     }
 }
 
-@mixin makeOnDevice($prefix, $property, $value, $args...) {
-    @each $device in $args {
-        .#{$prefix}#{$device} {
-            @if ($device == "sm") {
+@mixin makeOnBreakpoint($class, $property, $value, $breakpoints...) {
+    @each $bp in $breakpoints {
+        .#{$bp}\:#{$class} {
+            @if ($bp == "sm") {
                 @include on-sm {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "md") {
+            } @else if($bp == "md") {
                 @include on-md {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "lg") {
+            } @else if($bp == "lg") {
                 @include on-lg {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "xl") {
+            } @else if($bp == "xl") {
                 @include on-xl {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
-            } @else if($device == "xxl") {
+            } @else if($bp == "xxl") {
                 @include on-xxl {
-                    #{$property}: $value !important;
+                    #{$property}: $value;
                 }
             }
         }

package/scss/mixins/_makeResponsivePositionUtilities.scss

@@ -1,5 +1,5 @@
 @use '../base/vars_all' as *;
-@use "./makeCssPropertyMixins" as *;
+@use "./helpers" as *;
 @use "./media" as *;
 @use "sass:list";
 @use "sass:map";
@@ -38,19 +38,19 @@
 
             // use -index to select from the end to ensure correct order with different length lists
             .#{$class} {
-                @include makeCssPositionProperty($property, #{nth($sizes-list, -1)}rem, $positions);
+                @include makePositionProperties($property, #{nth($sizes-list, -1)}rem, $positions);
 
                 @include from-md {
-                    @include makeCssPositionProperty($property, #{nth($sizes-list, -2)}rem, $positions);
+                    @include makePositionProperties($property, #{nth($sizes-list, -2)}rem, $positions);
                 }
 
                 @include from-xl {
-                    @include makeCssPositionProperty($property, #{nth($sizes-list, -3)}rem, $positions);
+                    @include makePositionProperties($property, #{nth($sizes-list, -3)}rem, $positions);
                 }
 
                 @if ($numSizes==4) {
                     @include from-xxl {
-                        @include makeCssPositionProperty($property, #{nth($sizes-list, -4)}rem, $positions);
+                        @include makePositionProperties($property, #{nth($sizes-list, -4)}rem, $positions);
                     }
                 }
             }

package/scss/mixins/_positionUtilityClasses.scss

@@ -1,5 +1,5 @@
-@use "./makeCssPropertyMixins" as *;
 @use "../functions/helpers" as *;
+@use "../mixins/helpers" as *;
 // --------------------------------------------------------------
 // -- CREATES BASE AND POSITION BASED UTILITY CLASSES FROM MAP --
 // --------------------------------------------------------------
@@ -50,7 +50,7 @@
                         #{$property}-left: #{$value};
                         #{$property}-right: #{$value};
                     } @else {
-                        @include makeCssPositionProperty($property, #{$value}, $positions);
+                        @include makePositionProperties($property, #{$value}, $positions);
                     }
                 }
             }

package/scss/play.scss

@@ -1,15 +1,15 @@
-// @use "./base/vars_all" as *;
-// @use "./base/vars_base" as *;
-// @use "./base/vars_utility_maps" as *;
-// @use "./functions/helpers" as *;
-// @use "./mixins/makeCssPropertyMixins" as *;
-// @use "./mixins/makeMagicClass" as *;
-// @use "./mixins/makeMagicGrid2Cols" as *;
-// @use "./mixins/media" as *;
-// @use "./mixins/positionUtilityClasses" as *;
-// @use "sass:list";
-// @use "sass:map";
-// @use "sass:string";
-// add accordion component variables here instead of the main
+@use "./base/vars_all" as *;
+@use "./base/vars_base" as *;
+@use "./base/vars_utility_maps" as *;
+@use "./functions/helpers" as *;
+@use "./mixins/helpers" as *;
+@use "./mixins/makeMagicClass" as *;
+@use "./mixins/makeMagicGrid2Cols" as *;
+@use "./mixins/makeResponsiveClasses" as *;
+@use "./mixins/media" as *;
+@use "./mixins/positionUtilityClasses" as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
 
 

package/scss/utilities/_display_visibility.scss

@@ -48,19 +48,21 @@ $visibility-utilities: (
 
 // |--\0/-- DISPLAY --\0/--|
 // --------------------------------------------------------------------------
-[class*="block-to"],
-[class*="block-from"],
-[class*="block-on"] {
-    display: none;
-}
 
-@include makeFromDevice("block-from-", display, block, "sm", "md", "lg", "xl", "xxl");
-@include makeOnDevice("block-on-", display, block, "sm", "md", "lg", "xl", "xxl");
-@include makeToDevice("block-to-", display, block, "sm", "md", "lg", "xl");
+// NK::TD THIS IS A PROBLEM!!!
+// [class*="block-to"],
+// [class*="block-from"],
+// [class*="block-on"] {
+//     display: none;
+// }
 
-// |--\0/-- HIDE --\0/--|
-// --------------------------------------------------------------------------
+// [class$=":block"]
+
+@include makeFromBreakpoint(block, display, block, "sm", "md", "lg", "xl", "xxl");
+@include makeFromBreakpoint(hide, display, none, "sm", "md", "lg", "xl", "xxl");
+
+@include makeOnBreakpoint("block", display, block, "sm", "md", "lg", "xl", "xxl");
+@include makeOnBreakpoint("hide", display, none, "sm", "md", "lg", "xl", "xxl");
 
-@include makeFromDevice("hide-from-", display, none, "sm", "md", "lg", "xl", "xxl");
-@include makeOnDevice("hide-on-", display, none, "sm", "md", "lg", "xl", "xxl");
-@include makeToDevice("hide-to-", display, none, "sm", "md", "lg", "xl");
+@include makeToBreakpoint("block", display, block, "sm", "md", "lg", "xl");
+@include makeToBreakpoint("hide", display, none, "sm", "md", "lg", "xl");