ply-css 1.3.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ply-css",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "ply — A ratio-based, AI-ready CSS framework with dark mode, accessibility, and a small footprint",
   "main": "dist/css/ply.css",
   "style": "dist/css/ply.min.css",

package/ply-classes.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.3",
+  "version": "1.4.0",
   "framework": "ply",
   "totalClasses": 457,
   "uniqueClasses": 457,

package/src/scss/components/_container-queries.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "media-queries";
 @use "variables";
 
@@ -23,8 +24,11 @@ $container-breakpoints: (
   @container (max-width: #{$bp-value}) {
     @each $name, $value in variables.$unit-scale {
       .container-#{$bp-name}-unit-#{$name} {
-        max-width: $value;
-        flex-basis: $value;
+        @if $name == 100 {
+          flex-basis: 100%;
+        } @else {
+          flex-basis: calc(#{$value} - var(--units-gap, 1rem) * #{1 - math.div($name, 100)});
+        }
       }
     }
     .container-#{$bp-name}-unit-auto {

package/src/scss/components/_grid.scss

@@ -23,7 +23,8 @@
   display: flex;
   flex: 0 1 auto;
   flex-flow: row wrap;
-  margin: 0 (-(variables.$grid-gutter-width)) variables.$base-line;
+  gap: var(--units-gap, #{variables.$grid-gutter-width * 2});
+  margin: 0 0 variables.$base-line;
 
   &.reverse-direction,
   &.right-to-left {
@@ -31,11 +32,8 @@
   }
 
   &.split {
-    margin: 0 0 variables.$base-line;
-
-    [class*='unit-'] {
-      padding: 0;
-    }
+    --units-gap: 0px;
+    gap: 0;
   }
 
   &.centered-content {
@@ -74,8 +72,6 @@
 [class*='unit-'] {
   box-sizing: border-box;
 
-  padding: 0 variables.$grid-gutter-width;
-
   &.fill-height {
     display: flex;
   }
@@ -89,8 +85,11 @@
 
 @each $name, $value in variables.$unit-scale {
   .unit-#{$name} {
-    flex-basis: $value;
-    max-width: $value;
+    @if $name == 100 {
+      flex-basis: 100%;
+    } @else {
+      flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
+    }
   }
 }
 
@@ -102,8 +101,11 @@
 
 @each $name, $value in variables.$unit-scale {
   .forever-unit-#{$name} {
-    flex-basis: $value;
-    max-width: $value;
+    @if $name == 100 {
+      flex-basis: 100%;
+    } @else {
+      flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
+    }
   }
 }
 
@@ -112,8 +114,7 @@
   @each $name, $value in variables.$width-scale {
     @if $name != 100 {
       .large-screen-unit-#{$name} {
-        max-width: $value;
-        flex-basis: $value;
+        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
       }
     }
   }
@@ -124,8 +125,7 @@
   @each $name, $value in variables.$width-scale {
     @if $name != 100 {
       .x-large-screen-unit-#{$name} {
-        max-width: $value;
-        flex-basis: $value;
+        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
       }
     }
   }
@@ -134,9 +134,14 @@
 // Small desktop (max-width)
 @media (max-width: media-queries.$breakpoint-small-desktop) {
   @each $name, $value in variables.$width-scale {
-    .small-desktop-unit-#{$name} {
-      max-width: $value;
-      flex-basis: $value;
+    @if $name == 100 {
+      .small-desktop-unit-#{$name} {
+        flex-basis: 100%;
+      }
+    } @else {
+      .small-desktop-unit-#{$name} {
+        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
+      }
     }
   }
 }
@@ -161,13 +166,17 @@
   .unit-20,
   .unit-10 {
     flex-basis: 100%;
-    max-width: 100%;
   }
 
   @each $name, $value in variables.$width-scale {
-    .tablet-unit-#{$name} {
-      max-width: $value;
-      flex-basis: $value;
+    @if $name == 100 {
+      .tablet-unit-#{$name} {
+        flex-basis: 100%;
+      }
+    } @else {
+      .tablet-unit-#{$name} {
+        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
+      }
     }
   }
 }
@@ -175,9 +184,14 @@
 // Large phone (max-width)
 @media (max-width: media-queries.$breakpoint-large-phone) {
   @each $name, $value in variables.$width-scale {
-    .large-phone-unit-#{$name} {
-      max-width: $value;
-      flex-basis: $value;
+    @if $name == 100 {
+      .large-phone-unit-#{$name} {
+        flex-basis: 100%;
+      }
+    } @else {
+      .large-phone-unit-#{$name} {
+        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
+      }
     }
   }
 }
@@ -185,9 +199,14 @@
 // Phone (max-width)
 @media (max-width: media-queries.$breakpoint-phone) {
   @each $name, $value in variables.$width-scale {
-    .phone-unit-#{$name} {
-      max-width: $value;
-      flex-basis: $value;
+    @if $name == 100 {
+      .phone-unit-#{$name} {
+        flex-basis: 100%;
+      }
+    } @else {
+      .phone-unit-#{$name} {
+        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
+      }
     }
   }
 }

package/src/scss/components/_helpers.scss

@@ -330,13 +330,36 @@ $width-breakpoints: (
 .bg-green  { background-color: var(--ply-bg-green); }
 .bg-yellow { background-color: var(--ply-bg-yellow); }
 
-// Gap utilities
-.gap-xs  { gap: var(--ply-space-xs, 0.25rem); }
-.gap-sm  { gap: var(--ply-space-sm, 0.5rem); }
-.gap     { gap: var(--ply-space-md, 0.75rem); }
-.gap-lg  { gap: var(--ply-space-lg, 1.5rem); }
-.gap-xl  { gap: var(--ply-space-xl, 2rem); }
-.gap-xxl { gap: var(--ply-space-xxl, 3rem); }
+// Gap utilities — also set --units-gap so unit calc() sizing adjusts automatically
+.gap-xs {
+  --units-gap: var(--ply-space-xs, 0.25rem);
+  gap: var(--units-gap);
+}
+
+.gap-sm {
+  --units-gap: var(--ply-space-sm, 0.5rem);
+  gap: var(--units-gap);
+}
+
+.gap {
+  --units-gap: var(--ply-space-md, 0.75rem);
+  gap: var(--units-gap);
+}
+
+.gap-lg {
+  --units-gap: var(--ply-space-lg, 1.5rem);
+  gap: var(--units-gap);
+}
+
+.gap-xl {
+  --units-gap: var(--ply-space-xl, 2rem);
+  gap: var(--units-gap);
+}
+
+.gap-xxl {
+  --units-gap: var(--ply-space-xxl, 3rem);
+  gap: var(--units-gap);
+}
 
 // Link reset — suppress link styling inside a container
 .no-link-style {