@nuvoui/core 1.1.8 → 1.2.1

package/src/styles/layouts/_grid.scss

@@ -1,9 +1,10 @@
 // Section: Layout
 // Module: Grid | Grid Inline
+// Note: Gap utilities are defined in _spacing.scss
 
 @use 'sass:math';
-@use '../utilities/functions' as FN;
-@use '../utilities/variables' as VAR;
+@use '../abstracts/functions' as FN;
+@use '../abstracts'  as VAR;
 
 /**
  * @description Establishes a grid container.
@@ -50,6 +51,14 @@
 
 // Grid Alignment Mixins
 
+// Alignment Classes
+$alignments: (
+  'start': start,
+  'end': end,
+  'center': center,
+  'stretch': stretch
+);
+
 /**
  * @description justify-items container.
  * @param {string} $value - The value for the justify-items property.
@@ -87,120 +96,81 @@
   grid-row: $row;
 }
 
-@mixin grid-gap($value) { gap: $value; }
-@mixin col-gap($value) { column-gap: $value; }
-@mixin row-gap($value) { row-gap: $value; }
-
-// Classes
-.grid { @include grid; }
-.grid.inline { @include grid-inline; }
+@if VAR.$generate-utility-classes {
+  // Classes
+  .grid { @include grid; }
+  .grid.inline { @include grid-inline; }
 
 
-@for $i from 1 through VAR.$column-count {
-  .grid.cols-#{$i} { @include cols($i); }
-  .grid.rows-#{$i} { @include rows($i); }
-}
-
-// Grid Template Classes
-@each $breakpoint, $width in VAR.$breakpoints {
-  // Responsive grid columns
-  @media (min-width: #{$width}) {
-    @for $i from 1 through VAR.$column-count {
-      .grid.cols-#{$i}\@#{$breakpoint} { @include cols($i); }
-      .grid.rows-#{$i}\@#{$breakpoint} { @include rows($i); }
-    }
+  @for $i from 1 through VAR.$column-count {
+    .grid.cols-#{$i} { @include cols($i); }
+    .grid.rows-#{$i} { @include rows($i); }
   }
-}
-
 
-// Add corresponding classes
-.grid-gap-1 { @include grid-gap(0.25rem); }
-.grid-gap-2 { @include grid-gap(0.5rem); }
-.grid-gap-4 { @include grid-gap(1rem); }
-.col-gap-1 { @include col-gap(0.25rem); }
-.col-gap-2 { @include col-gap(0.5rem); }
-.col-gap-4 { @include col-gap(1rem); }
-.row-gap-1 { @include row-gap(0.25rem); }
-.row-gap-2 { @include row-gap(0.5rem); }
-.row-gap-4 { @include row-gap(1rem); }
-
-// Responsive grid gaps
-@each $breakpoint, $width in VAR.$breakpoints {
-  @media (min-width: #{$width}) {
-    .grid-gap-1\@#{$breakpoint} { @include grid-gap(0.25rem); }
-    .grid-gap-2\@#{$breakpoint} { @include grid-gap(0.5rem); }
-    .grid-gap-4\@#{$breakpoint} { @include grid-gap(1rem); }
-
-    .col-gap-1\@#{$breakpoint} { @include col-gap(0.25rem); }
-    .col-gap-2\@#{$breakpoint} { @include col-gap(0.5rem); }
-    .col-gap-4\@#{$breakpoint} { @include col-gap(1rem); }
-    
-    .row-gap-1\@#{$breakpoint} { @include row-gap(0.25rem); }
-    .row-gap-2\@#{$breakpoint} { @include row-gap(0.5rem); }
-    .row-gap-4\@#{$breakpoint} { @include row-gap(1rem); }
+  // Grid Template Classes
+  @each $breakpoint, $width in VAR.$breakpoints {
+    // Responsive grid columns
+    @media (min-width: #{$width}) {
+      @for $i from 1 through VAR.$column-count {
+        .grid.cols-#{$i}\@#{$breakpoint} { @include cols($i); }
+        .grid.rows-#{$i}\@#{$breakpoint} { @include rows($i); }
+      }
+    }
   }
-}
 
 
-// Generate Column Span Classes with Responsive Variants
-@for $i from 1 through VAR.$column-count {
-  .span-col-#{$i} {
-    @include span-col($i);
-  }
+  // Generate Column Span Classes with Responsive Variants
+  @for $i from 1 through VAR.$column-count {
+    .span-col-#{$i} {
+      @include span-col($i);
+    }
 
-  .span-row-#{$i} {
-    @include span-row($i);
-  }
+    .span-row-#{$i} {
+      @include span-row($i);
+    }
 
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      .span-col-#{$i}\@#{$breakpoint} {
-        @include span-col($i);
-      }
+    @each $breakpoint, $width in VAR.$breakpoints {
+      @media (min-width: #{$width}) {
+        .span-col-#{$i}\@#{$breakpoint} {
+          @include span-col($i);
+        }
 
-      .span-row-#{$i}\@#{$breakpoint} {
-        @include span-row($i);
+        .span-row-#{$i}\@#{$breakpoint} {
+          @include span-row($i);
+        }
       }
     }
   }
-}
-
 
-// Auto-fit/fill Classes
-@each $size, $width in VAR.$grid-item-sizes {
-  .grid.auto-fit-#{$size} { @include auto-fit($width); }
-  .grid.auto-fill-#{$size} { @include auto-fill($width); }
-}
-
-// Flow Classes
-.grid.flow-row { @include flow-in-row; }
-.grid.flow-col { @include flow-in-col; }
-.grid.flow-dense { @include flow-dense-items; }
-
-// Alignment Classes
-$alignments: (
-  'start': start,
-  'end': end,
-  'center': center,
-  'stretch': stretch
-);
 
-@each $name, $value in $alignments {
-  .justify-items-#{$name} { justify-items: $value; }
-  .align-items-#{$name} { align-items: $value; }
-  .place-items-#{$name} { place-items: $value; }
+  // Auto-fit/fill Classes
+  @each $size, $width in VAR.$grid-item-sizes {
+    .grid.auto-fit-#{$size} { @include auto-fit($width); }
+    .grid.auto-fill-#{$size} { @include auto-fill($width); }
+  }
 
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      .justify-items-#{$name}\@#{$breakpoint} {
-        justify-items: $value;
-      }
-      .align-items-#{$name}\@#{$breakpoint} {
-        align-items: $value;
-      }
-      .place-items-#{$name}\@#{$breakpoint} {  
-        place-items: $value;
+  // Flow Classes
+  .grid.flow-row { @include flow-in-row; }
+  .grid.flow-col { @include flow-in-col; }
+  .grid.flow-dense { @include flow-dense-items; }
+
+  @each $name, $value in $alignments {
+    .justify-items-#{$name} { justify-items: $value; }
+    .align-items-#{$name} { align-items: $value; }
+    .place-items-#{$name} { place-items: $value; }
+
+    @each $breakpoint, $width in VAR.$breakpoints {
+      @media (min-width: #{$width}) {
+        .justify-items-#{$name}\@#{$breakpoint} {
+          justify-items: $value;
+        }
+        .align-items-#{$name}\@#{$breakpoint} {
+          align-items: $value;
+        }
+        .place-items-#{$name}\@#{$breakpoint} {  
+          place-items: $value;
+        }
       }
     }
   }
-}
+}

package/src/styles/layouts/_index.scss

@@ -0,0 +1,3 @@
+@forward "container";
+@forward "flex";
+@forward "grid";