@lobergdesign/dot-grid 1.0.0

package/src/_utilities.scss

@@ -0,0 +1,203 @@
+// ========================================
+// dot-grid Utilities
+// ========================================
+
+@use 'variables' as *;
+
+@layer grid.utilities {
+
+  // ========================================
+  // Gap Utilities
+  // ========================================
+
+  .gap-none,
+  .no-gap {
+    gap: var(--grid-gap-none, 0) !important;
+  }
+
+  .gap-xs {
+    gap: var(--grid-gap-xs, 0.5rem) !important;
+  }
+
+  .gap-sm {
+    gap: var(--grid-gap-sm, 1rem) !important;
+  }
+
+  .gap,
+  .gap-md {
+    gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
+  }
+
+  .gap-lg {
+    gap: var(--grid-gap-lg, 3rem) !important;
+  }
+
+  .gap-xl {
+    gap: var(--grid-gap-xl, 4rem) !important;
+  }
+
+  // Gap directional utilities
+  .gap-b-none,
+  .no-gap-b {
+    row-gap: 0 !important;
+  }
+
+  .gap-sides-none,
+  .no-gap-sides {
+    column-gap: 0 !important;
+  }
+
+  // ========================================
+  // Placement Utilities (Grid Alignment)
+  // ========================================
+  // Pattern: .place-{vertical}-{horizontal}
+  // Using logical properties where appropriate
+
+  @mixin placement($align, $justify) {
+    display: grid;
+    align-items: $align;
+    justify-items: $justify;
+  }
+
+  // Top row
+  .place-t-l {
+    @include placement(start, start); // Fixed: 'top' is not a valid value
+  }
+
+  .place-t-c {
+    @include placement(start, center);
+  }
+
+  .place-t-r {
+    @include placement(start, end);
+  }
+
+  // Center row
+  .place-c-l {
+    @include placement(center, start);
+  }
+
+  .place-c-c {
+    @include placement(center, center);
+  }
+
+  .place-c-r {
+    @include placement(center, end);
+  }
+
+  // Bottom row
+  .place-b-l {
+    @include placement(end, start);
+  }
+
+  .place-b-c {
+    @include placement(end, center);
+  }
+
+  .place-b-r {
+    @include placement(end, end);
+  }
+
+  // ========================================
+  // Flexbox Justify Utilities
+  // ========================================
+
+  @mixin justify($justify) {
+    display: flex;
+    justify-content: $justify;
+  }
+
+  .justify-start {
+    @include justify(flex-start);
+  }
+
+  .justify-end {
+    @include justify(flex-end);
+  }
+
+  .justify-center,
+  .justify-space-center {
+    @include justify(center);
+  }
+
+  .justify-between,
+  .justify-space-between {
+    @include justify(space-between);
+  }
+
+  .justify-around,
+  .justify-space-around {
+    @include justify(space-around);
+  }
+
+  .justify-evenly {
+    @include justify(space-evenly);
+  }
+
+  // ========================================
+  // Aspect Ratio Utilities (Modern CSS)
+  // ========================================
+
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+
+  .aspect-video {
+    aspect-ratio: 16 / 9;
+  }
+
+  .aspect-4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  .aspect-21-9 {
+    aspect-ratio: 21 / 9;
+  }
+
+  .aspect-auto {
+    aspect-ratio: auto;
+  }
+
+  // ========================================
+  // Min/Max Content Utilities
+  // ========================================
+
+  .col-min {
+    width: min-content;
+    grid-column: auto;
+  }
+
+  .col-max {
+    width: max-content;
+    grid-column: auto;
+  }
+
+  .col-fit {
+    width: fit-content;
+    grid-column: auto;
+  }
+
+  // ========================================
+  // Display Utilities
+  // ========================================
+
+  .hidden {
+    display: none !important;
+  }
+
+  // ========================================
+  // Order Utilities (Grid/Flex)
+  // ========================================
+
+  .order-first {
+    order: -1;
+  }
+
+  .order-last {
+    order: 999;
+  }
+
+  .order-none {
+    order: 0;
+  }
+}

package/src/_variables.scss

@@ -0,0 +1,67 @@
+// ========================================
+// dot-grid Variables
+// ========================================
+
+// Breakpoints (Modern standard, aligned with Tailwind v3)
+$breakpoints: (
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1536px
+);
+
+// Grid configuration
+$grid-columns: 12;
+$grid-gap-default: clamp(1rem, 2vw, 2rem);
+
+// Gap scale
+$gap-scale: (
+  none: 0,
+  xs: 0.5rem,
+  sm: 1rem,
+  md: clamp(1rem, 2vw, 2rem), // default
+  lg: 3rem,
+  xl: 4rem
+);
+
+// Wrapper/Container
+$wrap-max-width: 180rem;
+$wrap-width: 90vw;
+
+// CSS Custom Properties
+// These will be output as CSS variables for user customization
+:root {
+  // Grid
+  --grid-columns: #{$grid-columns};
+  --grid-gap: #{$grid-gap-default};
+
+  // Breakpoints (for reference/documentation)
+  --grid-bp-sm: 640px;
+  --grid-bp-md: 768px;
+  --grid-bp-lg: 1024px;
+  --grid-bp-xl: 1280px;
+  --grid-bp-xxl: 1536px;
+
+  // Container
+  --grid-wrap-max-width: #{$wrap-max-width};
+  --grid-wrap-width: #{$wrap-width};
+
+  // Gap scale
+  --grid-gap-none: 0;
+  --grid-gap-xs: 0.5rem;
+  --grid-gap-sm: 1rem;
+  --grid-gap-md: clamp(1rem, 2vw, 2rem);
+  --grid-gap-lg: 3rem;
+  --grid-gap-xl: 4rem;
+}
+
+// Helper function to get breakpoint value
+@function breakpoint($name) {
+  @return map-get($breakpoints, $name);
+}
+
+// Helper function to get gap value
+@function gap($name) {
+  @return map-get($gap-scale, $name);
+}

package/src/grid.scss

@@ -0,0 +1,83 @@
+/*!
+ * dot-grid v1.0.0
+ * A modern, flexible 12-column CSS Grid system
+ *
+ * Features:
+ * - Container queries for responsive layouts
+ * - Fluid/automatic layout utilities
+ * - Subgrid support
+ * - CSS custom properties for easy customization
+ * - Cascade layers for better specificity control
+ *
+ * (c) 2024 Jean Loberg
+ * Released under the MIT License
+ * https://github.com/lobergdesign/dot-grid
+ */
+
+// ========================================
+// Import all modules
+// ========================================
+
+@use 'variables';
+@use 'base';
+@use 'utilities';
+@use 'responsive';
+@use 'fluid';
+
+// ========================================
+// Export CSS Custom Properties
+// ========================================
+// Variables module already exports :root with custom properties
+// Users can override these in their own CSS:
+//
+// :root {
+//   --grid-gap: 1.5rem;
+//   --grid-columns: 16;
+//   --grid-wrap-max-width: 1400px;
+// }
+
+// ========================================
+// Usage Examples
+// ========================================
+
+/*
+
+BASIC GRID:
+<div class="wrap">
+  <div class="row">
+    <div class="col-12 col-md-6 col-lg-4">Column</div>
+    <div class="col-12 col-md-6 col-lg-4">Column</div>
+    <div class="col-12 col-md-6 col-lg-4">Column</div>
+  </div>
+</div>
+
+FLUID GRID (auto-responsive):
+<div class="wrap">
+  <div class="grid-auto-fit">
+    <div>Card 1</div>
+    <div>Card 2</div>
+    <div>Card 3</div>
+  </div>
+</div>
+
+SUBGRID:
+<div class="row">
+  <div class="col-12 row-subgrid">
+    <div class="col-4">Nested 1</div>
+    <div class="col-4">Nested 2</div>
+    <div class="col-4">Nested 3</div>
+  </div>
+</div>
+
+CUSTOM GAP:
+<div class="row gap-lg">
+  <div class="col-6">Large gap</div>
+  <div class="col-6">Large gap</div>
+</div>
+
+PLACEMENT:
+<div class="row">
+  <div class="col-6 place-c-c">Centered content</div>
+</div>
+
+*/