mastors-gridder 1.0.0 → 1.3.0

package/_mastors-gridder.scss

@@ -5,7 +5,6 @@
 // -------------------------------
 // AUTO-FIT RESPONSIVE GRID
 // -------------------------------
-// Creates a responsive grid that automatically fits columns
 @mixin grid-auto($min: 250px, $gap: 1rem) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax($min, 1fr));
@@ -15,17 +14,24 @@
 // -------------------------------
 // AUTO-FILL RESPONSIVE GRID
 // -------------------------------
-// Creates a responsive grid that fills with empty columns
 @mixin grid-fill($min: 250px, $gap: 1rem) {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax($min, 1fr));
     gap: $gap;
 }
 
+// -------------------------------
+// GRID CONTAINER
+// -------------------------------
+@mixin grid-container($cols: 12, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($cols, 1fr);
+    gap: $gap;
+}
+
 // -------------------------------
 // FIXED COLUMN GRID
 // -------------------------------
-// Creates a grid with a specific number of columns
 @mixin grid-cols($cols: 12, $gap: 1rem) {
     display: grid;
     grid-template-columns: repeat($cols, 1fr);
@@ -35,7 +41,6 @@
 // -------------------------------
 // FIXED ROW GRID
 // -------------------------------
-// Creates a grid with a specific number of rows
 @mixin grid-rows($rows: 3, $gap: 1rem) {
     display: grid;
     grid-template-rows: repeat($rows, 1fr);
@@ -45,7 +50,6 @@
 // -------------------------------
 // CUSTOM TEMPLATE GRID
 // -------------------------------
-// Creates a grid with custom column sizes
 @mixin grid-template($template, $gap: 1rem) {
     display: grid;
     grid-template-columns: $template;
@@ -55,7 +59,6 @@
 // -------------------------------
 // CENTERED GRID ITEM
 // -------------------------------
-// Centers content within a grid cell
 @mixin grid-center {
     display: grid;
     place-items: center;
@@ -64,7 +67,6 @@
 // -------------------------------
 // GRID ITEM SPAN
 // -------------------------------
-// Makes a grid item span across columns/rows
 @mixin grid-span($col-span: 1, $row-span: 1) {
     grid-column: span $col-span;
     grid-row: span $row-span;
@@ -73,7 +75,6 @@
 // -------------------------------
 // GRID AREA PLACEMENT
 // -------------------------------
-// Places item in specific grid area
 @mixin grid-area($col-start, $col-end, $row-start: auto, $row-end: auto) {
     grid-column: #{$col-start} / #{$col-end};
 
@@ -85,7 +86,6 @@
 // -------------------------------
 // HOLY GRAIL LAYOUT
 // -------------------------------
-// Classic header/sidebar/content/footer layout
 @mixin grid-holy-grail($sidebar-width: 250px, $gap: 1rem) {
     display: grid;
     grid-template-columns: $sidebar-width 1fr $sidebar-width;
@@ -101,7 +101,6 @@
 // -------------------------------
 // MASONRY-STYLE GRID
 // -------------------------------
-// Creates a masonry layout effect
 @mixin grid-masonry($cols: 3, $gap: 1rem) {
     display: grid;
     grid-template-columns: repeat($cols, 1fr);
@@ -112,7 +111,6 @@
 // -------------------------------
 // SIDEBAR LAYOUT
 // -------------------------------
-// Creates a sidebar + main content layout
 @mixin grid-sidebar($sidebar-width: 300px, $gap: 1rem, $position: left) {
     display: grid;
     gap: $gap;
@@ -129,7 +127,6 @@
 // -------------------------------
 // RESPONSIVE SIDEBAR
 // -------------------------------
-// Sidebar that stacks on mobile
 @mixin grid-sidebar-responsive($sidebar-width: 300px, $gap: 1rem, $breakpoint: 768px) {
     display: grid;
     gap: $gap;
@@ -143,7 +140,6 @@
 // -------------------------------
 // DENSE GRID
 // -------------------------------
-// Fills gaps by placing items densely
 @mixin grid-dense($min: 150px, $gap: 1rem) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax($min, 1fr));
@@ -154,7 +150,6 @@
 // -------------------------------
 // EQUAL HEIGHT ROWS
 // -------------------------------
-// Creates rows with equal height
 @mixin grid-equal-rows($rows: 3, $gap: 1rem) {
     display: grid;
     grid-auto-rows: 1fr;
@@ -164,7 +159,6 @@
 // -------------------------------
 // FULL BLEED GRID
 // -------------------------------
-// Grid that allows items to break out
 @mixin grid-full-bleed($content-width: 1200px, $gap: 1rem) {
     display: grid;
     grid-template-columns: 1fr min(#{$content-width}, 100%) 1fr;
@@ -178,7 +172,6 @@
 // -------------------------------
 // CARD GRID
 // -------------------------------
-// Responsive card grid with min/max sizes
 @mixin grid-cards($min: 280px, $max: 1fr, $gap: 1.5rem) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min($min, 100%), $max));
@@ -188,7 +181,6 @@
 // -------------------------------
 // ASYMMETRIC GRID
 // -------------------------------
-// Creates an asymmetric 2-column layout
 @mixin grid-asymmetric($ratio: 2, $gap: 1rem) {
     display: grid;
     grid-template-columns: #{$ratio}fr 1fr;
@@ -198,7 +190,6 @@
 // -------------------------------
 // STACKED GRID
 // -------------------------------
-// Mobile-first stacked grid that expands
 @mixin grid-stacked($cols: 2, $gap: 1rem, $breakpoint: 640px) {
     display: grid;
     grid-template-columns: 1fr;
@@ -230,17 +221,24 @@
 // -------------------------------
 // SUBGRID MIXIN
 // -------------------------------
-// Creates a subgrid (CSS Subgrid)
-@mixin grid-subgrid($rows: true, $cols: true) {
+@mixin grid-subgrid($rows: true, $cols: true, $fallback: 1fr) {
     display: grid;
 
     @if $cols {
         grid-template-columns: subgrid;
     }
 
+    @else {
+        grid-template-columns: $fallback;
+    }
+
     @if $rows {
         grid-template-rows: subgrid;
     }
+
+    @else {
+        grid-template-rows: $fallback;
+    }
 }
 
 // -------------------------------
@@ -270,11 +268,190 @@
     align-self: $align;
 }
 
+// -------------------------------
+// GRID AUTO-FLOW CONTROL
+// -------------------------------
+@mixin grid-auto-flow($direction: row, $dense: false) {
+    display: grid;
+
+    @if $dense {
+        grid-auto-flow: #{$direction} dense;
+    }
+
+    @else {
+        grid-auto-flow: $direction;
+    }
+}
+
+// -------------------------------
+// GRID MINMAX UTILITY
+// -------------------------------
+@mixin grid-minmax($min, $max, $cols: auto-fit, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($cols, minmax($min, $max));
+    gap: $gap;
+}
+
+// -------------------------------
+// GRID CONTENT ALIGNMENT
+// -------------------------------
+@mixin grid-content($justify: center, $align: center) {
+    display: grid;
+    justify-content: $justify;
+    align-content: $align;
+}
+
+// -------------------------------
+// GRID AUTO ROWS
+// -------------------------------
+@mixin grid-auto-rows($size: auto) {
+    display: grid;
+    grid-auto-rows: $size;
+}
+
+// -------------------------------
+// GRID AUTO COLUMNS
+// -------------------------------
+@mixin grid-auto-cols($size: auto) {
+    display: grid;
+    grid-auto-columns: $size;
+}
+
+// -------------------------------
+// GRID OVERLAY/LAYERING
+// -------------------------------
+@mixin grid-layer($col-start: 1, $col-end: -1, $row-start: 1, $row-end: -1) {
+    grid-column: #{$col-start} / #{$col-end};
+    grid-row: #{$row-start} / #{$row-end};
+}
+
+// -------------------------------
+// GRID FR UNITS
+// -------------------------------
+@mixin grid-fr($fr-values...) {
+    display: grid;
+    grid-template-columns: $fr-values;
+}
+
+// -------------------------------
+// GRID INTRINSIC SIZING
+// -------------------------------
+@mixin grid-intrinsic($cols: auto-fit, $sizing: min-content, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($cols, $sizing);
+    gap: $gap;
+}
+
+// -------------------------------
+// GRID EXPLICIT ROWS & COLUMNS
+// -------------------------------
+@mixin grid-explicit($cols, $rows, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: $cols;
+    grid-template-rows: $rows;
+    gap: $gap;
+}
+
+// -------------------------------
+// RESPONSIVE GRID AREAS
+// -------------------------------
+@mixin grid-areas-responsive($mobile-areas, $desktop-areas, $breakpoint: 768px) {
+    display: grid;
+    grid-template-areas: $mobile-areas;
+
+    @media (min-width: $breakpoint) {
+        grid-template-areas: $desktop-areas;
+    }
+}
+
+// -------------------------------
+// GRID FIT-CONTENT
+// -------------------------------
+@mixin grid-fit-content($max-width, $cols: auto-fit, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($cols, fit-content($max-width));
+    gap: $gap;
+}
+
+// -------------------------------
+// GRID REPEAT PATTERN
+// -------------------------------
+@mixin grid-repeat-pattern($pattern, $times: 1, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($times, $pattern);
+    gap: $gap;
+}
+
+// -------------------------------
+// GRID CONTAINER QUERY READY
+// -------------------------------
+@mixin grid-container-aware($min: 250px, $gap: 1rem) {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax($min, 1fr));
+    gap: $gap;
+}
+
+// -------------------------------
+// GRID PLACE ITEMS SHORTHAND
+// -------------------------------
+@mixin grid-place($place: center) {
+    display: grid;
+    place-items: $place;
+}
+
+// -------------------------------
+// GRID PLACE CONTENT SHORTHAND
+// -------------------------------
+@mixin grid-place-content($place: center) {
+    display: grid;
+    place-content: $place;
+}
+
+// -------------------------------
+// GRID ITEM FULL WIDTH
+// -------------------------------
+@mixin grid-full-width {
+    grid-column: 1 / -1;
+}
+
+// -------------------------------
+// GRID ITEM FULL HEIGHT
+// -------------------------------
+@mixin grid-full-height {
+    grid-row: 1 / -1;
+}
+
+// -------------------------------
+// MODERN MASONRY GRID
+// -------------------------------
+@mixin grid-masonry-modern($cols: 3, $row-size: 50px, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($cols, 1fr);
+    grid-auto-rows: $row-size;
+    grid-auto-flow: row dense;
+    gap: $gap;
+}
+
+// -------------------------------
+// GRID AUTO TRACK
+// -------------------------------
+@mixin grid-auto-track($type: auto-fit, $min: 200px, $max: 1fr, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($type, minmax($min, $max));
+    gap: $gap;
+}
+
 // ===============================
 // USAGE EXAMPLES
 // ===============================
 
 /*
+// Grid container
+.container {
+    @include grid-container(12, 1rem);
+}
+
 // Auto-fit grid
 .gallery {
     @include grid-auto(300px, 2rem);
@@ -320,4 +497,39 @@
 .cards {
     @include grid-stacked(3, 1.5rem, 768px);
 }
+
+// Grid overlay for hero sections
+.hero-overlay {
+    @include grid-layer(1, -1, 1, -1);
+}
+
+// Intrinsic sizing
+.tag-list {
+    @include grid-intrinsic(auto-fit, max-content, 0.5rem);
+}
+
+// FR units
+.layout {
+    @include grid-fr(2fr, 1fr, 1fr);
+}
+
+// Container aware grid
+.responsive-cards {
+    @include grid-container-aware(280px, 1.5rem);
+}
+
+// Place items shorthand
+.centered-box {
+    @include grid-place(center);
+}
+
+// Full width item
+.full-width-banner {
+    @include grid-full-width;
+}
+
+// Modern masonry
+.masonry-gallery {
+    @include grid-masonry-modern(4, 40px, 1rem);
+}
 */

package/index.scss

@@ -0,0 +1,2 @@
+// index.scss
+@use './_mastors-fluider' as *;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "mastors-gridder",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "description": "A lightweight SCSS grid and layout utility with responsive mixins and CSS helpers for building flexible layouts, from simple grids to Holy Grail structures.",
-  "main": "_mastors-gridder.scss",
+  "main": "index.scss",
   "files": [
-    "_mastors-gridder.scss"
+    "_mastors-gridder.scss",
+    "index.scss"
   ],
   "keywords": [
     "scss",
@@ -55,5 +56,5 @@
   "bugs": {
     "url": "https://github.com/KEHEM-IT/Mastors-Gridder/issues"
   },
-  "homepage": "https://github.com/KEHEM-IT/Mastors-Gridder#readme"
+  "homepage": "https://mastorscdn.kehem.com/mastors-gridder"
 }