santycss 2.5.0 → 2.6.1

package/dist/santy.css

@@ -1,3 +1,5 @@
+
+/* @SANTYMOD:reset */
 /* ============================================================
    SantyCSS v2.3.0  —  Plain-English Utility CSS Framework
    https://github.com/santybad/santy_css
@@ -37,6 +39,8 @@
   --santy-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
 }
 
+
+/* @SANTYMOD:layout */
 /* ── Display ── */
 .make-block        { display: block; }
 .make-inline       { display: inline; }
@@ -54,6 +58,8 @@
 .make-invisible { visibility: hidden; }
 .make-collapse  { visibility: collapse; }
 
+
+/* @SANTYMOD:flex */
 /* ── Flex Direction ── */
 .flex-row            { flex-direction: row; }
 .flex-row-reverse    { flex-direction: row-reverse; }
@@ -142,6 +148,8 @@
 .order-11 { order: 11; }
 .order-12 { order: 12; }
 
+/* @SANTYMOD:grid */
+
 /* ── Grid Template Columns ── */
 .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -196,6 +204,8 @@
 .grid-auto-cols-fr   { grid-auto-columns: minmax(0, 1fr); }
 
 
+/* @SANTYMOD:spacing */
+
 /* ── Padding ── */
 .add-padding-0        { padding: 0px; }
 .add-padding-top-0    { padding-top: 0px; }
@@ -833,6 +843,8 @@
 .gap-x-1024 { column-gap: 1024px; }
 .gap-y-1024 { row-gap: 1024px; }
 
+/* @SANTYMOD:sizing */
+
 /* ── Width ── */
 .set-width-0 { width: 0px; }
 .set-width-1 { width: 1px; }
@@ -1073,6 +1085,8 @@
 .min-width-none    { min-width: none; }
 .max-width-none    { max-width: none; }
 
+/* @SANTYMOD:borders */
+
 /* ── Border Width ── */
 .add-border-0        { border: 0px solid; }
 .add-border-top-0    { border-top: 0px solid; }
@@ -1313,6 +1327,8 @@
 .round-left-128   { border-top-left-radius: 128px; border-bottom-left-radius: 128px; }
 .round-right-128  { border-top-right-radius: 128px; border-bottom-right-radius: 128px; }
 
+/* @SANTYMOD:typography */
+
 /* ── Font Size ── */
 .set-text-8 { font-size: 8px; }
 .set-text-9 { font-size: 9px; }
@@ -1436,6 +1452,8 @@
 .letter-space-wider  { letter-spacing: 0.05em; }
 .letter-space-widest { letter-spacing: 0.1em; }
 
+/* @SANTYMOD:colors */
+
 /* ── Text Colors ── */
 .color-red-50 { color: #fef2f2; }
 .color-red-100 { color: #fee2e2; }
@@ -2402,6 +2420,8 @@
 .gradient-to-bottom-right { background-image: linear-gradient(to bottom right, var(--grad-from, transparent), var(--grad-to, transparent)); }
 
 
+/* @SANTYMOD:layout */
+
 /* ── Position ── */
 .position-static   { position: static; }
 .position-relative { position: relative; }
@@ -2598,6 +2618,8 @@
 .overflow-y-visible { overflow-y: visible; }
 
 
+/* @SANTYMOD:effects */
+
 /* ── Opacity ── */
 .opacity-0 { opacity: 0; }
 .opacity-5 { opacity: 0.05; }
@@ -2730,6 +2752,8 @@
 .cursor-none        { cursor: none; }
 
 
+/* @SANTYMOD:layout */
+
 /* ── Object Fit ── */
 .fit-cover   { object-fit: cover; }
 .fit-contain { object-fit: contain; }
@@ -2774,6 +2798,8 @@
 .aspect-video      { aspect-ratio: 16 / 9; }
 
 
+/* @SANTYMOD:effects */
+
 /* ── Filter ── */
 .blur-sm  { filter: blur(4px); }
 .blur     { filter: blur(8px); }
@@ -2924,6 +2950,8 @@
 .will-change-transform { will-change: transform; }
 
 
+/* @SANTYMOD:variants */
+
 /* ═══════════════════════════════════════════════════════════════
    RESPONSIVE VARIANTS
    Usage: class="on-mobile:make-hidden md:make-flex lg:grid-cols-3"
@@ -16999,6 +17027,8 @@
 }
 /* ═══ VARIANTS_BLOCK_END ═══ */
 
+/* @SANTYMOD:animations */
+
 /* ═══════════════════════════════════════════════════════════════════════
    SANTY ANIMATIONS — animate.css compatible · Plain-English naming
    ═══════════════════════════════════════════════════════════════════════ */
@@ -18008,6 +18038,8 @@
 }
 
 
+/* @SANTYMOD:components */
+
 /* ═══ SANTY COMPONENTS ═══ */
 
 /* ═══════════════════════════════════════════════════════════════
@@ -19641,6 +19673,8 @@
 .set-max-width-narrow     { max-width: 45ch; }
 
 
+/* @SANTYMOD:typography */
+
 /* ── Variable Font Weights ── */
 .font-variable          { font-variation-settings: normal; }
 .font-condensed         { font-stretch: condensed;  font-variation-settings: 'wdth' 75; }
@@ -19677,6 +19711,8 @@
 .set-width-5-of-6 { width: 83.3333%; }
 
 
+/* @SANTYMOD:colors */
+
 /* ── Caret Colors (full shade scale) ── */
 .caret-red-50 { caret-color: #fef2f2; }
 .caret-red-100 { caret-color: #fee2e2; }
@@ -20278,6 +20314,8 @@
 .border-stone-shade-10 { border-color: color-mix(in srgb, #78716c 90%, #000000); }
 /* ═══ VARIANTS_BLOCK_END ═══ */
 
+/* @SANTYMOD:layout */
+
 /* ═══════════════════════════════════════════════════════════════════════════
    v1.7 — ACCESSIBILITY UTILITIES
 ═══════════════════════════════════════════════════════════════════════════ */

package/index.js

@@ -4,16 +4,29 @@
  * CSS path helpers:
  *   const santy = require('santycss');
  *   santy.css        → absolute path to dist/santy.css
- *   santy.min        → absolute path to dist/santy.min.css
  *   santy.core       → absolute path to dist/santy-core.css
  *   santy.components → absolute path to dist/santy-components.css
  *   santy.animations → absolute path to dist/santy-animations.css
  *
- * Import CSS directly (React / Vue / Vite / Next.js):
- *   import 'santycss/css';
- *   import 'santycss/css/core';
- *   import 'santycss/css/components';
- *   import 'santycss/css/animations';
+ * Granular module imports (React / Vue / Vite / Next.js):
+ *   import 'santycss/css/reset';      // CSS reset + design tokens
+ *   import 'santycss/css/layout';     // display, position, overflow, z-index, flex, grid helpers
+ *   import 'santycss/css/flex';       // flexbox utilities
+ *   import 'santycss/css/grid';       // CSS grid utilities
+ *   import 'santycss/css/spacing';    // padding & margin
+ *   import 'santycss/css/sizing';     // width & height
+ *   import 'santycss/css/typography'; // font size, weight, family, text alignment
+ *   import 'santycss/css/colors';     // text, background & border colors
+ *   import 'santycss/css/borders';    // border width, style & radius
+ *   import 'santycss/css/effects';    // opacity, shadows, filters, transitions, cursor
+ *   import 'santycss/css/animations'; // keyframe animations
+ *   import 'santycss/css/components'; // pre-built UI components
+ *   import 'santycss/css/variants';   // responsive & state variants (hover, dark, md, lg…)
+ *
+ * Full bundles:
+ *   import 'santycss/css';            // everything (1.2MB)
+ *   import 'santycss/css/core';       // utilities only, no components
+ *   import 'santycss/css/start';      // core + components, no extended variants
  *
  * Purge / tree-shake:
  *   const { purge, purgeFiles } = require('santycss');
@@ -23,30 +36,38 @@
 const path = require('path');
 const dist = path.join(__dirname, 'dist');
 
-// Path helpers (useful for webpack / rollup config)
+// Full bundle paths
 const css        = path.join(dist, 'santy.css');
 const min        = path.join(dist, 'santy.min.css');
 const core       = path.join(dist, 'santy-core.css');
+const start      = path.join(dist, 'santy-start.css');
 const components = path.join(dist, 'santy-components.css');
 const animations = path.join(dist, 'santy-animations.css');
+const variants   = path.join(dist, 'santy-variants.css');
 const email      = path.join(dist, 'santy-email.css');
 
+// Granular module paths
+const reset      = path.join(dist, 'santy-reset.css');
+const layout     = path.join(dist, 'santy-layout.css');
+const flex       = path.join(dist, 'santy-flex.css');
+const grid       = path.join(dist, 'santy-grid.css');
+const spacing    = path.join(dist, 'santy-spacing.css');
+const sizing     = path.join(dist, 'santy-sizing.css');
+const typography = path.join(dist, 'santy-typography.css');
+const colors     = path.join(dist, 'santy-colors.css');
+const borders    = path.join(dist, 'santy-borders.css');
+const effects    = path.join(dist, 'santy-effects.css');
+
 // Purge API (tree-shaking)
 const { purge, purgeFiles, extractClasses, minify, EXTS } = require('./lib/purge-core');
 
 module.exports = {
-  // CSS paths
-  css,
-  min,
-  core,
-  components,
-  animations,
-  email,
+  // Full bundles
+  css, min, core, start, components, animations, variants, email,
+
+  // Granular modules
+  reset, layout, flex, grid, spacing, sizing, typography, colors, borders, effects,
 
   // Purge API
-  purge,
-  purgeFiles,
-  extractClasses,
-  minify,
-  EXTS,
+  purge, purgeFiles, extractClasses, minify, EXTS,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "santycss",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "description": "Plain-English utility-first CSS framework — no build step, just classes",
   "main": "index.js",
   "style": "dist/santy.css",
@@ -13,6 +13,16 @@
     "./css/components": "./dist/santy-components.css",
     "./css/animations": "./dist/santy-animations.css",
     "./css/email": "./dist/santy-email.css",
+    "./css/reset": "./dist/santy-reset.css",
+    "./css/layout": "./dist/santy-layout.css",
+    "./css/flex": "./dist/santy-flex.css",
+    "./css/grid": "./dist/santy-grid.css",
+    "./css/spacing": "./dist/santy-spacing.css",
+    "./css/sizing": "./dist/santy-sizing.css",
+    "./css/typography": "./dist/santy-typography.css",
+    "./css/colors": "./dist/santy-colors.css",
+    "./css/borders": "./dist/santy-borders.css",
+    "./css/effects": "./dist/santy-effects.css",
     "./min": "./dist/santy.min.css",
     "./postcss": "./postcss/index.js",
     "./jit": "./santy-jit.js",