mastors-gridder 1.0.0

package/_mastors-gridder.scss

@@ -0,0 +1,323 @@
+// ===============================
+// COMPREHENSIVE GRID MIXINS
+// ===============================
+
+// -------------------------------
+// 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));
+    gap: $gap;
+}
+
+// -------------------------------
+// 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;
+}
+
+// -------------------------------
+// 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);
+    gap: $gap;
+}
+
+// -------------------------------
+// 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);
+    gap: $gap;
+}
+
+// -------------------------------
+// CUSTOM TEMPLATE GRID
+// -------------------------------
+// Creates a grid with custom column sizes
+@mixin grid-template($template, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: $template;
+    gap: $gap;
+}
+
+// -------------------------------
+// CENTERED GRID ITEM
+// -------------------------------
+// Centers content within a grid cell
+@mixin grid-center {
+    display: grid;
+    place-items: center;
+}
+
+// -------------------------------
+// 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;
+}
+
+// -------------------------------
+// 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};
+
+    @if $row-start !=auto {
+        grid-row: #{$row-start} / #{$row-end};
+    }
+}
+
+// -------------------------------
+// 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;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+        "header header header"
+        "sidebar-left content sidebar-right"
+        "footer footer footer";
+    gap: $gap;
+    min-height: 100vh;
+}
+
+// -------------------------------
+// MASONRY-STYLE GRID
+// -------------------------------
+// Creates a masonry layout effect
+@mixin grid-masonry($cols: 3, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($cols, 1fr);
+    grid-auto-rows: 10px;
+    gap: $gap;
+}
+
+// -------------------------------
+// SIDEBAR LAYOUT
+// -------------------------------
+// Creates a sidebar + main content layout
+@mixin grid-sidebar($sidebar-width: 300px, $gap: 1rem, $position: left) {
+    display: grid;
+    gap: $gap;
+
+    @if $position ==left {
+        grid-template-columns: $sidebar-width 1fr;
+    }
+
+    @else {
+        grid-template-columns: 1fr $sidebar-width;
+    }
+}
+
+// -------------------------------
+// RESPONSIVE SIDEBAR
+// -------------------------------
+// Sidebar that stacks on mobile
+@mixin grid-sidebar-responsive($sidebar-width: 300px, $gap: 1rem, $breakpoint: 768px) {
+    display: grid;
+    gap: $gap;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $breakpoint) {
+        grid-template-columns: $sidebar-width 1fr;
+    }
+}
+
+// -------------------------------
+// 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));
+    grid-auto-flow: dense;
+    gap: $gap;
+}
+
+// -------------------------------
+// EQUAL HEIGHT ROWS
+// -------------------------------
+// Creates rows with equal height
+@mixin grid-equal-rows($rows: 3, $gap: 1rem) {
+    display: grid;
+    grid-auto-rows: 1fr;
+    gap: $gap;
+}
+
+// -------------------------------
+// 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;
+    gap: $gap;
+
+    >* {
+        grid-column: 2;
+    }
+}
+
+// -------------------------------
+// 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));
+    gap: $gap;
+}
+
+// -------------------------------
+// ASYMMETRIC GRID
+// -------------------------------
+// Creates an asymmetric 2-column layout
+@mixin grid-asymmetric($ratio: 2, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: #{$ratio}fr 1fr;
+    gap: $gap;
+}
+
+// -------------------------------
+// STACKED GRID
+// -------------------------------
+// Mobile-first stacked grid that expands
+@mixin grid-stacked($cols: 2, $gap: 1rem, $breakpoint: 640px) {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $gap;
+
+    @media (min-width: $breakpoint) {
+        grid-template-columns: repeat($cols, 1fr);
+    }
+}
+
+// -------------------------------
+// GRID ALIGNMENT UTILITIES
+// -------------------------------
+@mixin grid-align($justify: center, $align: center) {
+    display: grid;
+    justify-items: $justify;
+    align-items: $align;
+}
+
+// -------------------------------
+// GRID GAP UTILITIES
+// -------------------------------
+@mixin grid-gap($row-gap: 1rem, $col-gap: 1rem) {
+    display: grid;
+    row-gap: $row-gap;
+    column-gap: $col-gap;
+}
+
+// -------------------------------
+// SUBGRID MIXIN
+// -------------------------------
+// Creates a subgrid (CSS Subgrid)
+@mixin grid-subgrid($rows: true, $cols: true) {
+    display: grid;
+
+    @if $cols {
+        grid-template-columns: subgrid;
+    }
+
+    @if $rows {
+        grid-template-rows: subgrid;
+    }
+}
+
+// -------------------------------
+// GRID WITH NAMED LINES
+// -------------------------------
+@mixin grid-named-lines($cols, $rows: auto) {
+    display: grid;
+    grid-template-columns: $cols;
+
+    @if $rows !=auto {
+        grid-template-rows: $rows;
+    }
+}
+
+// -------------------------------
+// GRID ORDER
+// -------------------------------
+@mixin grid-order($order: 0) {
+    order: $order;
+}
+
+// -------------------------------
+// GRID JUSTIFY & ALIGN SELF
+// -------------------------------
+@mixin grid-self($justify: auto, $align: auto) {
+    justify-self: $justify;
+    align-self: $align;
+}
+
+// ===============================
+// USAGE EXAMPLES
+// ===============================
+
+/*
+// Auto-fit grid
+.gallery {
+    @include grid-auto(300px, 2rem);
+}
+
+// Fixed columns
+.dashboard {
+    @include grid-cols(4, 1.5rem);
+}
+
+// Sidebar layout
+.layout {
+    @include grid-sidebar(250px, 2rem);
+}
+
+// Card grid
+.products {
+    @include grid-cards(300px, 1fr, 2rem);
+}
+
+// Centered content
+.hero {
+    @include grid-center;
+    min-height: 400px;
+}
+
+// Span multiple columns
+.featured {
+    @include grid-span(2, 1);
+}
+
+// Holy grail layout
+.page {
+    @include grid-holy-grail(200px, 1rem);
+}
+
+// Custom template
+.custom {
+    @include grid-template(200px 1fr 200px, 1rem);
+}
+
+// Responsive stacked
+.cards {
+    @include grid-stacked(3, 1.5rem, 768px);
+}
+*/

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "mastors-gridder",
+  "version": "1.0.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",
+  "files": [
+    "_mastors-gridder.scss"
+  ],
+  "keywords": [
+    "scss",
+    "sass",
+    "css",
+    "grid",
+    "grid system",
+    "responsive",
+    "responsive grid",
+    "layout",
+    "layout system",
+    "flexbox",
+    "css grid",
+    "holy grail layout",
+    "columns",
+    "rows",
+    "breakpoints",
+    "media queries",
+    "mixins",
+    "utilities",
+    "utility classes",
+    "sass mixins",
+    "scss mixins",
+    "sass utilities",
+    "scss utilities",
+    "sass library",
+    "scss library",
+    "sass responsive",
+    "scss responsive",
+    "frontend",
+    "ui layout",
+    "web layout",
+    "css framework",
+    "lightweight css",
+    "modular css",
+    "design system",
+    "css helpers",
+    "css cdn",
+    "mastors",
+    "gridder"
+  ],
+  "author": "KEHEM-IT",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KEHEM-IT/Mastors-Gridder.git"
+  },
+  "bugs": {
+    "url": "https://github.com/KEHEM-IT/Mastors-Gridder/issues"
+  },
+  "homepage": "https://github.com/KEHEM-IT/Mastors-Gridder#readme"
+}