nk_jtb 0.8.6 → 0.8.7

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nk_jtb",
     "description": "Yet another utility based framework.",
-    "version": "0.8.6",
+    "version": "0.8.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/naykel76/nk_jtb.git"

package/src/_nk.scss

@@ -1,6 +1,11 @@
 @use "./base/vars_all" as *;
 @use "./mixins/media" as *;
 
+#nk-header {
+    background: $header-bg;
+    margin: 0; // override spacing
+}
+
 // ==========================================================================
 // -- MARKDOWN --
 // ==========================================================================

package/src/base/_vars_base.scss

@@ -22,6 +22,8 @@ $primary: $primary !default;
 $secondary: $secondary !default;
 $accent: $accent !default;
 
+$img-path: "/images" !default;
+
 $border-color: rgba(0, 0, 0, 0.15) !default;
 $border: 1px solid $border-color !default;
 $border-radius: 8px !default;

package/src/base/_vars_components.scss

@@ -1 +1,21 @@
+@use "../base/vars_base" as *;
+
 $zebra-alt-bg: rgb(245, 245, 245) !default; //
+
+// ==========================================================================
+// -- HERO COMPONENT --
+// ==========================================================================
+// $hero-background-color: $primary;
+$hero-title-color: #eee !default;
+$hero-title-lg: 3rem !default;
+$hero-title-sm: 2rem !default;
+
+$hero-subtitle-color: #eee !default;
+$hero-subtitle-lg: 2.5rem !default;
+$hero-subtitle-sm: 1.75rem !default;
+
+
+
+$hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)) !default;
+
+$hero-text-padding: $content-gap !default;

package/src/components-extended/_hero.scss

@@ -0,0 +1,29 @@
+@use "../base/vars_base" as *;
+@use "../base/vars_components" as *;
+@use "../mixins/media" as *;
+
+// ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
+// constant debate has surrounded a `hero-text` wrapper. It has been
+// removed because it is easier to manage with utility classes
+// ------------------------------------------------------------------
+
+.hero {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+
+    .title {
+        color: $hero-title-color;
+        font-size: $hero-title-sm;
+        @include from-md {
+            font-size: $hero-title-lg;
+        }
+    }
+    .subtitle {
+        color: $hero-subtitle-color;
+        font-size: $hero-subtitle-sm;
+        @include from-md {
+            font-size: $hero-subtitle-lg;
+        }
+    }
+}

package/src/jtb.scss

@@ -8,12 +8,12 @@
 
 // -- ORDER MATTERS -- Components need to be loaded before utility
 // classes to make sure they can be overridden
+@forward "./components-extended/hero";
+@forward "./components/button";
 @forward "./scss/components/accordion";
 @forward "./scss/components/article";
 @forward "./scss/components/box";
-@forward "./components/button";
 @forward "./scss/components/dropdown";
-@forward "./scss/components/hero";
 @forward "./scss/components/icon";
 @forward "./scss/components/list";
 @forward "./scss/components/menu";
@@ -39,6 +39,7 @@
 @forward "./scss/utilities/translate";
 @forward "./utilities/general";
 @forward "./utilities/grid";
+@forward "./utilities/responsive_display_visibility";
 @forward "./utilities/size";
 @forward "./utilities/text";
 @forward "./utilities/transition";

package/src/mixins/_extendedThemeClass.scss

@@ -60,11 +60,11 @@
             }
         }
 
-        //     // do not apply to :hover let component or specialty classes look after it
-        //     &.outline:not(:hover) {
-        //         background-color: transparent;
-        //         border-color: $base;
-        //         color: $base;
-        //     }
+        // do not apply to :hover let component or specialty classes look after it
+        &.outline:not(:hover) {
+            background-color: transparent;
+            border-color: $base;
+            color: $base;
+        }
     }
 }

package/src/mixins/_utilityClassCreators.scss

@@ -19,18 +19,24 @@
 }
 
 // ----------------------------------------------------------------
-// -- CREATE SINGLE UNIT BASED PROPERTY CLASSES --
+// -- CREATE UNIT BASED PROPERTY CLASSES --
 // ----------------------------------------------------------------
 //
 // $text-sizes: (2, 2.5, 3, 4);
+// @include unitBasedUtilityClasses(font-size, $text-sizes, "txt");
 //
-// @include utilityClassesUnit(font-size, $text-sizes, "txt");
+// $text-sizes-px: (16, 20, 24);
+// @include unitBasedUtilityClasses(font-size, $text-sizes, "txt", "px");
+//
+
+@mixin unitBasedUtilityClasses($property, $map, $identifier, $unit: "rem") {
+    // add unit to class name if not 'rem'
+    $suffix: if($unit!= "rem", $unit, "");
 
-@mixin utilityClassesUnit($property, $map, $prefix, $unit: rem) {
     @each $value in $map {
         // {prefix}-{value} excluding unit with escaped dot
         $escapedValue: escapeDecimal($value);
-        $class: #{$prefix}-#{$escapedValue};
+        $class: #{$identifier}-#{$escapedValue}#{$suffix};
 
         @include singlePropertyClass($class, $property, #{$value}#{$unit});
     }

package/src/play.scss

@@ -1,36 +1,24 @@
-// @forward "./scss/utilities/sizes";
-// @use "../scss/base/vars_all" as *;
-// @use "../scss/base/vars_base" as *;
-// @use "../scss/base/vars_utility_maps" as *;
-// @use "../scss/functions/classNaming" as *;
-// @use "../scss/mixins/makeMagicClass" as *;
-// @use "../scss/mixins/makeMagicGrid2Cols" as *;
-// @use "../scss/mixins/makeMagicGridEqualWidths" as *;
-// @use "../scss/mixins/positionUtilityClasses" as *;
 // @use "./base/vars_base" as *;
 // @use "./base/vars_colors" as *;
 // @use "./color/shades" as *;
 // @use "./color/tailwind-colors" as *;
 // @use "./color/themes" as *;
 // @use "./functions/colorShades" as *;
-// @use "./mixins/basicColorScheme" as *;
-// @use "./mixins/extendedThemeClass" as *;
-// @use "./mixins/media" as *;
-// @use "./mixins/responsiveClassCreators" as *;
 // @use "./scss/components/button"as *;
 // @use "./scss/utilities/spacing" as *;
 // @use "./utilities/grid" as *;
+// @use "./utilities/responsive_display_visibility";
+// @use "./utilities/size";
 // @use "./utilities/text" as *;
 @use "./functions/colorFunctions" as *;
 @use "./functions/helpers" as *;
+@use "./mixins/extendedThemeClass" as *;
 @use "./mixins/helpers" as *;
+@use "./mixins/media" as *;
+@use "./mixins/responsiveClassCreators" as *;
 @use "./mixins/utilityClassCreators" as *;
 @use "sass:list";
 @use "sass:map";
 @use "sass:string";
 
-$x: setTextColor(transparent) !default;
-
-@debug $x;
-
 

package/src/scss/_nk.scss

@@ -7,31 +7,6 @@ body {
     flex-direction: column;
 }
 
-#nk-header {
-    background: $header-bg;
-}
-
-// This needs to be reviewed because it is too specific and causes problems
-// for some layouts I have removed because of the QMH site but I am not sure
-// what else it affects
-// #nk-header,
-// #nk-header > .#{$container-class} {
-//     #search {
-//         display: flex;
-//         flex: 1 1 auto;
-
-//         input {
-//             width: 100%;
-//             margin-right: 4px;
-//         }
-
-//         @include to-xl {
-//             flex: 1 1 100%;
-//             order: 3;
-//         }
-//     }
-// }
-
 #nk-main {
     flex: 1; // 1. allow to grow to fill height
     background-color: $main-bg;
@@ -92,20 +67,20 @@ trix-editor {
 // ==========================================================================
 // -- Primary banner for page layouts --
 // ==========================================================================
-$banner-height: 450px !default;
-$banner-bg: transparent !default;
-$banner-text-bg: transparent !default;
-
-.banner {
-    background-repeat: no-repeat;
-    background-position: right center;
-    height: $banner-height;
-    background-color: $banner-bg;
-
-    // banner-text is the wrapper
-    &-text {
-        // color: white;
-        background-color: $banner-text-bg;
-        padding: 1rem;
-    }
-}
+// $banner-height: 450px !default;
+// $banner-bg: transparent !default;
+// $banner-text-bg: transparent !default;
+
+// .banner {
+//     background-repeat: no-repeat;
+//     background-position: right center;
+//     height: $banner-height;
+//     background-color: $banner-bg;
+
+//     // banner-text is the wrapper
+//     &-text {
+//         // color: white;
+//         background-color: $banner-text-bg;
+//         padding: 1rem;
+//     }
+// }

package/src/scss/utilities/_display_visibility.scss

@@ -1,6 +1,4 @@
 @use "../../base/vars_base" as *;
-@use "../../mixins/media" as *;
-@use "../../mixins/responsiveClassCreators" as *;
 
 $visibility-utilities: (
     "display": (
@@ -60,11 +58,3 @@ $visibility-utilities: (
 
 
 
-@include makeFromBreakpoint(display, block, "block", "sm", "md", "lg", "xl", "xxl");
-@include makeFromBreakpoint(display, none, "hide", "sm", "md", "lg", "xl", "xxl");
-
-@include makeOnBreakpoint(display, block, "block", "sm", "md", "lg", "xl", "xxl");
-@include makeOnBreakpoint(display, none, "hide", "sm", "md", "lg", "xl", "xxl");
-
-@include makeToBreakpoint(display, block, "block", "sm", "md", "lg", "xl");
-@include makeToBreakpoint(display, none, "hide", "sm", "md", "lg", "xl");

package/src/scss/utilities/_sizes.scss

@@ -43,52 +43,6 @@ $size-utilities: (
     }
 }
 
-
-
-// ------------------------------------------------------------------
-// -- MAKE UTILITY SIZE CLASSES --
-// ------------------------------------------------------------------
-
-@mixin makeSizeUtilities($sizes, $unit: "rem") {
-    $suffix: if($unit!= "rem", $unit, "");
-
-    @each $size in $sizes {
-        // wrap size in quotes to convert to string
-        $class: "#{$size}";
-        // search and escape decimals
-        $class: strReplace($class, ".", "\\.");
-
-        .w-#{$class}#{$suffix} {
-            width: #{$size}#{$unit};
-        }
-        .h-#{$class}#{$suffix} {
-            height: #{$size}#{$unit};
-        }
-        .wh-#{$class}#{$suffix} {
-            width: #{$size}#{$unit};
-            height: #{$size}#{$unit};
-        }
-    }
-}
-
-$rem-sizes: (0, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24);
-@include makeSizeUtilities($rem-sizes);
-
-$pixel-sizes: (16, 24, 32, 40, 64, 100, 150, 200, 300, 400, 600);
-@include makeSizeUtilities($pixel-sizes, "px");
-
-// ------------------------------------------------------------------
-// -- FRACTIONAL SIZES --
-// ------------------------------------------------------------------
-
-$fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%);
-
-@each $key, $value in $fractional-sizes {
-    .w-#{$key} {
-        width: $value;
-    }
-}
-
 $max-min-sizes: (
     200: 200px,
     250: 250px,
@@ -101,14 +55,6 @@ $max-min-sizes: (
     "lg": $lg,
 );
 
-.h-1\/1 {
-    height: 100%;
-}
-
-.maxw-full {
-    max-width: 100%;
-}
-
 @each $key, $value in $max-min-sizes {
     .minw-#{$key} {
         // this seems very redundant!!

package/src/utilities/_responsive_display_visibility.scss

@@ -0,0 +1,32 @@
+@use "../base/vars_base" as *;
+@use "../mixins/media" as *;
+@use "../mixins/responsiveClassCreators" as *;
+
+
+
+// ----------------------------------------------------------------
+// DISPLAY AND HIDE 'FROM' THE SELECTED SCREEN SIZE
+// ----------------------------------------------------------------
+// Example output: .sm:block, .md:block ... .xxl:block
+// Example output: .sm:hide, .md:hide ... .xxl:hide
+
+@include makeFromBreakpoint(display, block, "block", "sm", "md", "lg", "xl", "xxl");
+@include makeFromBreakpoint(display, none, "hide", "sm", "md", "lg", "xl", "xxl");
+
+// ----------------------------------------------------------------
+// DISPLAY AND HIDE 'ON' THE SELECTED SCREEN SIZE
+// ----------------------------------------------------------------
+// Example output: .on-sm:block, .on-md:block ... .on-xxl:block
+// Example output: .on-sm:hide, .on-md:hide ... .on-xxl:hide
+
+@include makeOnBreakpoint(display, block, "block", "sm", "md", "lg", "xl", "xxl");
+@include makeOnBreakpoint(display, none, "hide", "sm", "md", "lg", "xl", "xxl");
+
+// ----------------------------------------------------------------
+// DISPLAY AND HIDE 'TO' THE SELECTED SCREEN SIZE
+// ----------------------------------------------------------------
+// Example output: .to-sm:block, .to-md:block ... .to-lg:block
+// Example output: .to-sm:hide, .to-md:hide ... .to-lg:hide
+
+@include makeToBreakpoint(display, block, "block", "sm", "md", "lg", "xl");
+@include makeToBreakpoint(display, none, "hide", "sm", "md", "lg", "xl");

package/src/utilities/_size.scss

@@ -1,16 +1,55 @@
+@use "../functions/helpers" as *;
 @use "../mixins/media" as *;
+@use "../mixins/responsiveClassCreators" as *;
+@use "../mixins/utilityClassCreators" as *;
 
+// ------------------------------------------------------------------
+// -- WIDTH AND HEIGHT UTILITY CLASSES --
+// ------------------------------------------------------------------
+
+$rem-sizes: (0, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24) !default;
+$pixel-sizes: (100, 150, 200, 300, 400, 600) !default;
+
+// -- HEIGHT --
+@include unitBasedUtilityClasses(height, $rem-sizes, "h");
+@include unitBasedUtilityClasses(height, $pixel-sizes, "h", "px");
+// -- WIDTH --
+@include unitBasedUtilityClasses(width, $rem-sizes, "w");
+@include unitBasedUtilityClasses(width, $pixel-sizes, "w", "px");
 
+// -- NK::TD --
+// -- WIDTH & HEIGHT --
+// this needs to be updated to work with multiple properties
+@each $size in $rem-sizes {
+    // wrap size in quotes to convert to string
+    $class: "#{$size}";
+    // // search and escape decimals
+    $class: strReplace($class, ".", "\\.");
+
+    .wh-#{$class} {
+        width: #{$size}rem;
+        height: #{$size}rem;
+    }
+}
 
 // ------------------------------------------------------------------
-// -- RESPONSIVE SIZES --
+// -- FRACTIONAL WIDTH UTILITY CLASSES --
 // ------------------------------------------------------------------
 
-@include from-md {
-    .md\:w-16 {
-        width: 16rem;
-    }
-    .md\:w-20 {
-        width: 20rem;
+$fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%) !default;
+
+@each $key, $value in $fractional-sizes {
+    .w-#{$key} {
+        width: $value;
     }
+    // -- RESPONSIVE --
+    @include makeFromBreakpoint(width, $value, "w-#{$key}", "sm", "md", "lg", "xl");
 }
+// ------------------------------------------------------------------
+// -- RESPONSIVE SIZES --
+// ------------------------------------------------------------------
+
+@include makeFromBreakpoint(width, 16rem, "w-16", "sm", "md", "lg", "xl");
+@include makeFromBreakpoint(width, 20rem, "w-20", "sm", "md", "lg", "xl");
+// -- FULL WIDTH --
+@include makeFromBreakpoint(width, 100%, "w-full", "sm", "md", "lg", "xl");

package/src/utilities/_text.scss

@@ -12,4 +12,4 @@
 
 $text-sizes: (2, 2.5, 3, 4);
 
-@include utilityClassesUnit(font-size, $text-sizes, "txt", "rem");
+@include unitBasedUtilityClasses(font-size, $text-sizes, "txt");

package/src/scss/components/_hero.scss

@@ -1,34 +0,0 @@
-@use "../../mixins/media" as *;
-@use "../../base/vars_base" as *;
-
-// $hero-background-color: $primary;
-$hero-title-color: #eee !default;
-$hero-subtitle-color: #eee !default;
-$hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
-
-.hero {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-
-    .title {
-        color: $hero-title-color;
-        font-size: 2.25rem;
-
-        // font size never is or will be a one size fits all! STOP changing!!!
-        @include from-md {
-            font-size: 3rem;
-        }
-    }
-}
-
-.hero-text {
-    .subtitle {
-        color: $hero-subtitle-color;
-        font-size: 1.5rem;
-
-        @include from-xl {
-            font-size: 2.1rem;
-        }
-    }
-}