@keenmate/pure-css 1.0.0-rc01

package/src/scss/_pa-grid.scss

@@ -0,0 +1,292 @@
+// ============================================================================
+// NATIVE GRID SYSTEM
+// ============================================================================
+// Flexbox-based grid with percentage and fraction columns.
+// (Replaces the legacy PureCSS `.pure-g` / `.pure-u-*` grid — Pure v3.)
+@use 'variables/index' as *;
+//
+// Naming convention:
+// - .pa-row            → flex container
+// - .pa-col            → auto-equal width column
+// - .pa-col-{n}        → percentage width in 5% increments (5, 10, 15... 100)
+// - .pa-col-{x}-{y}    → fraction width (1-2, 1-3, 2-3, 1-4, 3-4, 1-6, 5-6, etc.)
+// - .pa-col-{bp}-{n}   → responsive variants (sm, md, lg, xl)
+// - .pa-offset-{n}     → left margin offset
+// ============================================================================
+
+@use "sass:math";
+
+// Configuration (note: $grid-breakpoints is in variables/_spacing.scss for shared use)
+$grid-gutter: 0.8rem !default; // 8px gutter on each side (with 10px base), total gap = 16px
+
+// Column sizes - 5% increments (n*5, n=1-20)
+$grid-columns-5: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
+
+// Column sizes - fractions (for unintuitive percentages)
+$grid-columns-fractions: (
+  '1-2': 50%,
+  '1-3': 33.333%,
+  '2-3': 66.667%,
+  '1-4': 25%,
+  '3-4': 75%,
+  '1-5': 20%,
+  '2-5': 40%,
+  '3-5': 60%,
+  '4-5': 80%,
+  '1-6': 16.667%,
+  '5-6': 83.333%,
+  '1-12': 8.333%,
+  '5-12': 41.667%,
+  '7-12': 58.333%,
+  '11-12': 91.667%
+);
+
+// ============================================================================
+// ROW (Container)
+// ============================================================================
+.pa-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-inline: -$grid-gutter; // RTL: flips automatically
+  row-gap: $grid-gutter; // Vertical gap when columns wrap (half the horizontal gutter total)
+
+  // Nested rows reset margins
+  .pa-row {
+    margin-inline: 0;
+  }
+}
+
+// Row modifiers
+.pa-row--no-gutter {
+  margin-inline: 0;
+
+  > [class*="pa-col"] {
+    padding-inline: 0;
+  }
+}
+
+.pa-row--center {
+  justify-content: center;
+}
+
+.pa-row--end {
+  justify-content: flex-end;
+}
+
+.pa-row--between {
+  justify-content: space-between;
+}
+
+.pa-row--around {
+  justify-content: space-around;
+}
+
+.pa-row--stretch {
+  align-items: stretch;
+}
+
+.pa-row--top {
+  align-items: flex-start;
+}
+
+.pa-row--middle {
+  align-items: center;
+}
+
+.pa-row--bottom {
+  align-items: flex-end;
+}
+
+.pa-row--same-height {
+  > [class*="pa-col"] {
+    > .pa-card {
+      height: 100%;
+    }
+  }
+}
+
+// ============================================================================
+// COLUMN (Base)
+// ============================================================================
+.pa-col {
+  flex: 1;
+  padding-inline: $grid-gutter; // RTL: flips automatically
+  min-width: 0; // Prevent content overflow
+}
+
+// Auto-width column
+.pa-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  padding-inline: $grid-gutter;
+}
+
+// ============================================================================
+// PERCENTAGE COLUMNS (Base - 5% increments)
+// ============================================================================
+@each $size in $grid-columns-5 {
+  .pa-col-#{$size} {
+    flex: 0 0 math.percentage(math.div($size, 100));
+    max-width: math.percentage(math.div($size, 100));
+    padding-inline: $grid-gutter; // RTL: flips automatically
+    min-width: 0; // Prevent content overflow
+  }
+}
+
+// ============================================================================
+// FRACTION COLUMNS (Base - intuitive naming)
+// ============================================================================
+@each $name, $width in $grid-columns-fractions {
+  .pa-col-#{$name} {
+    flex: 0 0 $width;
+    max-width: $width;
+    padding-inline: $grid-gutter; // RTL: flips automatically
+    min-width: 0; // Prevent content overflow
+  }
+}
+
+// ============================================================================
+// OFFSETS (Base - 5% increments)
+// ============================================================================
+@each $size in $grid-columns-5 {
+  @if $size < 100 {
+    .pa-offset-#{$size} {
+      margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
+    }
+  }
+}
+
+// ============================================================================
+// RESPONSIVE COLUMNS & OFFSETS (Container-query based)
+// Requires a containment context ancestor: .pa-layout__main (automatic) or .pa-cq
+// ============================================================================
+@each $bp, $min-width in $grid-breakpoints {
+  @container (min-width: #{$min-width}) {
+    // Responsive percentage columns (5% increments)
+    @each $size in $grid-columns-5 {
+      .pa-col-#{$bp}-#{$size} {
+        flex: 0 0 math.percentage(math.div($size, 100));
+        max-width: math.percentage(math.div($size, 100));
+        padding-inline: $grid-gutter; // RTL: flips automatically
+        min-width: 0; // Prevent content overflow
+      }
+    }
+
+    // Responsive fraction columns
+    @each $name, $width in $grid-columns-fractions {
+      .pa-col-#{$bp}-#{$name} {
+        flex: 0 0 $width;
+        max-width: $width;
+        padding-inline: $grid-gutter; // RTL: flips automatically
+        min-width: 0; // Prevent content overflow
+      }
+    }
+
+    // Responsive offsets (5% increments)
+    @each $size in $grid-columns-5 {
+      @if $size < 100 {
+        .pa-offset-#{$bp}-#{$size} {
+          margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
+        }
+      }
+    }
+
+    // Responsive auto column
+    .pa-col-#{$bp}-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+  }
+}
+
+// ============================================================================
+// COLUMN MODIFIERS
+// ============================================================================
+.pa-col--no-padding {
+  padding-inline: 0;
+}
+
+.pa-col--grow {
+  flex-grow: 1;
+}
+
+.pa-col--shrink {
+  flex-shrink: 1;
+}
+
+// ============================================================================
+// VISIBILITY HELPERS (Responsive)
+// ============================================================================
+.pa-hide {
+  display: none !important;
+}
+
+.pa-show {
+  display: block !important;
+}
+
+@each $bp, $min-width in $grid-breakpoints {
+  // Hide at breakpoint and up
+  @media (min-width: $min-width) {
+    .pa-hide-#{$bp} {
+      display: none !important;
+    }
+
+    .pa-show-#{$bp} {
+      display: block !important;
+    }
+  }
+
+  // Hide below breakpoint
+  @media (max-width: $min-width - 1px) {
+    .pa-hide-below-#{$bp} {
+      display: none !important;
+    }
+
+    .pa-show-below-#{$bp} {
+      display: block !important;
+    }
+  }
+}
+
+// ============================================================================
+// REMOVE BOTTOM PADDING IN CARDS
+// ============================================================================
+// Remove bottom padding from grid columns inside cards to avoid conflicts
+.pa-card__body .pa-row > [class*="pa-col"] {
+  padding-bottom: 0;
+}
+
+// ============================================================================
+// AUTO-STACK ON MOBILE
+// ============================================================================
+// Base percentage/fraction columns auto-stack to 100% on mobile
+// Use explicit responsive classes (pa-col-sm-*, pa-col-md-*) to override
+@media (max-width: $mobile-breakpoint) {
+  // Stack percentage columns
+  @each $size in $grid-columns-5 {
+    @if $size < 100 {
+      .pa-col-#{$size} {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+    }
+  }
+
+  // Stack fraction columns
+  @each $name, $width in $grid-columns-fractions {
+    .pa-col-#{$name} {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+
+  // Reset base offsets when stacking
+  @each $size in $grid-columns-5 {
+    @if $size < 100 {
+      .pa-offset-#{$size} {
+        margin-inline-start: 0;
+      }
+    }
+  }
+}

package/src/scss/base.scss

@@ -0,0 +1,15 @@
+// @keenmate/pure-css — theming contract only
+// ============================================================================
+// Emits nothing but the `:root` custom-property defaults (--base-* + derived
+// --pa-* + light alert vars). Link this when you only need the variables — to
+// theme embedded web/svelte components, or as the base a theme override layers
+// on top of — without pulling in the grid or utility classes.
+// ============================================================================
+
+@use 'base-css-variables' as bcv;
+
+:root {
+  @include bcv.output-base-css-variables;
+  @include bcv.output-pa-css-variables;
+  @include bcv.output-pa-alert-variables-light;
+}

package/src/scss/grid.scss

@@ -0,0 +1,7 @@
+// @keenmate/pure-css — grid only
+// The native flexbox grid: .pa-row / .pa-col (percentage + fraction columns,
+// container-query responsive variants, offsets, visibility helpers).
+// No variables, no utilities — link alongside base.css when you want layout
+// without the full bundle.
+
+@use 'pa-grid';

package/src/scss/pure-css.scss

@@ -0,0 +1,28 @@
+// @keenmate/pure-css — full foundation bundle
+// ============================================================================
+// The KeenMate CSS foundation, extracted from @keenmate/pure-admin-core so it
+// can be consumed on its own (docs sites, standalone pages, non-admin portals)
+// and so pure-admin-core, themes and any web/svelte component share ONE
+// theming contract: the `--base-*` (and derived `--pa-*`) custom properties.
+//
+// This bundle emits:
+//   1. `:root` defaults for every --base-*/--pa-* variable (light values)
+//   2. the native flexbox grid (.pa-row / .pa-col)
+//   3. the utility classes (.m-*, .d-flex, .w-*, …)
+//
+// A *theme* is just an override of the `$base-*` SCSS variables (or the
+// `--base-*` custom properties) — everything else re-derives. See README.
+// ============================================================================
+
+@use 'base-css-variables' as bcv;
+@use 'pa-grid';
+@use 'utilities';
+
+// CSS variable defaults at :root. Themes ship their own values by overriding
+// $base-* before importing base-css-variables; this only affects the unthemed
+// bundle and the FOUC window before a theme stylesheet resolves.
+:root {
+  @include bcv.output-base-css-variables;
+  @include bcv.output-pa-css-variables;
+  @include bcv.output-pa-alert-variables-light;
+}