Update

Author: BackendExpert

package-lock.json

@@ -10,6 +10,10 @@
  "type": "commonjs",
  "main": "index.js",
  "scripts": {
+ "build": "node tools/build.js",
  "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "devDependencies": {
+ "sass": "^1.93.3"
  }
-}
+}

package.json

@@ -0,0 +1,19 @@
+// ========================================
+// JKCSS 7.0.0 – Color Utilities
+// ========================================
+
+@use "variables" as *;
+
+@each $name, $color in $colors {
+ .text-#{$name} {
+ color: #{$color};
+ }
+
+ .bg-#{$name} {
+ background-color: #{$color};
+ }
+
+ .border-#{$name} {
+ border-color: #{$color};
+ }
+}

src/core/_colors.scss

@@ -0,0 +1,23 @@
+// ========================================
+// JKCSS 7.0.0 – Responsive System
+// ========================================
+
+@use "variables" as *;
+
+@each $screen, $width in $screens {
+ @media (min-width: $width) {
+
+ // Example responsive utilities
+ @each $size, $value in $font-sizes {
+ .#{$screen}\:text-#{$size} {
+ font-size: $value;
+ }
+ }
+
+ @each $name, $color in $colors {
+ .#{$screen}\:text-#{$name} {
+ color: $color;
+ }
+ }
+ }
+}

src/core/_responsive.scss

@@ -0,0 +1,36 @@
+// ========================================
+// JKCSS 7.0.0 – Spacing Utilities
+// ========================================
+
+@use "variables" as *;
+
+@each $key, $val in $spacing {
+ .m-#{$key} {
+ margin: $val;
+ }
+
+ .p-#{$key} {
+ padding: $val;
+ }
+
+ .mt-#{$key} {
+ margin-top: $val;
+ }
+
+ .mb-#{$key} {
+ margin-bottom: $val;
+ }
+
+ .pt-#{$key} {
+ padding-top: $val;
+ }
+
+ .pb-#{$key} {
+ padding-bottom: $val;
+ }
+}
+
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+}

src/core/_spacing.scss

@@ -0,0 +1,45 @@
+// ========================================
+// JKCSS 7.0.0 – Typography
+// ========================================
+
+@use "variables" as *;
+
+body {
+ font-family: "Inter", "Poppins", sans-serif;
+ color: map-get($colors, "gray-700");
+ line-height: 1.6;
+}
+
+// Font sizes
+@each $size, $value in $font-sizes {
+ .text-#{$size} {
+ font-size: $value;
+ }
+}
+
+// Font weights
+$weights: (
+ light: 300,
+ normal: 400,
+ medium: 500,
+ bold: 700
+);
+
+@each $name, $weight in $weights {
+ .font-#{$name} {
+ font-weight: $weight;
+ }
+}
+
+// Alignment
+.text-left {
+ text-align: left;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}

src/core/_typography.scss

@@ -0,0 +1,73 @@
+// ========================================
+// JKCSS 7.0.0 – Core Utilities
+// ========================================
+
+@use "variables" as *;
+
+/* Display */
+.block {
+ display: block;
+}
+
+.inline-block {
+ display: inline-block;
+}
+
+.flex {
+ display: flex;
+}
+
+.grid {
+ display: grid;
+}
+
+/* Flexbox helpers */
+.flex-row {
+ flex-direction: row;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.items-center {
+ align-items: center;
+}
+
+/* Border radius */
+@each $name, $val in $radii {
+ .rounded-#{$name} {
+ border-radius: $val;
+ }
+}
+
+/* Shadows */
+$shadows: (
+ sm: 0 1px 2px rgba(0, 0, 0, 0.05),
+ md: 0 4px 6px rgba(0, 0, 0, 0.1),
+ lg: 0 10px 15px rgba(0, 0, 0, 0.15)
+);
+
+@each $name, $val in $shadows {
+ .shadow-#{$name} {
+ box-shadow: $val;
+ }
+}
+
+/* Width & height */
+.w-full {
+ width: 100%;
+}
+
+.h-full {
+ height: 100%;
+}
+
+/* Cursor */
+.cursor-pointer {
+ cursor: pointer;
+}

src/core/_utilities.scss

@@ -0,0 +1,46 @@
+// ========================================
+// JKCSS 7.0.0 – Variables
+// ========================================
+
+// Color map
+$colors: (
+ "red-500": #ef4444,
+ "blue-500": #3b82f6,
+ "green-500": #22c55e,
+ "gray-700": #374151,
+ "yellow-400": #facc15
+);
+
+// Font sizes
+$font-sizes: (
+ "sm": 0.875rem,
+ "base": 1rem,
+ "lg": 1.125rem,
+ "xl": 1.25rem,
+ "2xl": 1.5rem
+);
+
+// Spacing scale
+$spacing: (
+ 1: 0.25rem,
+ 2: 0.5rem,
+ 3: 0.75rem,
+ 4: 1rem,
+ 5: 1.25rem
+);
+
+// Border radius
+$radii: (
+ sm: 4px,
+ md: 8px,
+ lg: 16px
+);
+
+// Breakpoints
+$screens: (
+ sm: 640px,
+ md: 768px,
+ lg: 1024px,
+ xl: 1280px,
+ "2xl": 1536px
+);

src/core/_variables.scss

@@ -0,0 +1,7 @@
+// JKCSS 7.0.0 Master Import
+@use "./core/variables";
+@use "./core/colors";
+@use "./core/typography";
+@use "./core/spacing";
+@use "./core/responsive";
+@use "./core/utilities";

src/jkcss.scss

@@ -1,17 +1,31 @@
-import { execSync } from "child_process";
-import fs from "fs";
+const { execSync } = require("child_process");
+const fs = require("fs");
 
 console.log("🧩 Building JKCSS 7.0.0...");
 
-// Ensure dist exists
-if (!fs.existsSync("dist")) fs.mkdirSync("dist");
+// Ensure dist directory exists
+if (!fs.existsSync("dist")) fs.mkdirSync("dist", { recursive: true });
 
-// Build normal (expanded) version
-execSync("sass src/jkcss.scss dist/jkcss.css --no-source-map --style=expanded", { stdio: "inherit" });
+// Helper function to safely run commands
+function run(command) {
+ try {
+ execSync(command, { stdio: "inherit" });
+ } catch (err) {
+ console.error("❌ Build failed!");
+ console.error(err.message);
+ process.exit(1);
+ }
+}
 
-// Build minified version
-execSync("sass src/jkcss.scss dist/jkcss.min.css --no-source-map --style=compressed", { stdio: "inherit" });
+// Detect sass command: try local (npx) first, fallback to global
+const sassCmd = "npx sass";
 
-console.log("✅ Build complete!");
+console.log("⚙️ Compiling expanded version...");
+run(`${sassCmd} src/jkcss.scss dist/jkcss.css --no-source-map --style=expanded`);
+
+console.log("⚙️ Compiling minified version...");
+run(`${sassCmd} src/jkcss.scss dist/jkcss.min.css --no-source-map --style=compressed`);
+
+console.log("\n✅ Build complete!");
 console.log("📦 Generated: dist/jkcss.css");
 console.log("📦 Generated: dist/jkcss.min.css");