pind-css 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/bin/cli.js +13 -0
  2. package/engine.js +215 -0
  3. package/index.html +194 -0
  4. package/package.json +29 -0
  5. package/style.css +66 -0
package/bin/cli.js ADDED
@@ -0,0 +1,13 @@
1
+ #!/usr/bin/env node
2
+
3
+ console.log("\n==========================================");
4
+ console.log(" 🚀 Welcome to Pind CSS Runtime! 🚜🌾 ");
5
+ console.log("==========================================\n");
6
+ console.log("Pind CSS is a powerful, Zero-Build runtime engine.");
7
+ console.log("There is absolutely no CSS compilation step required!\n");
8
+ console.log("To use Pind CSS, simply drop this into your HTML <head>:\n");
9
+ console.log(" <script src=\"https://cdn.jsdelivr.net/gh/NipunMagotra/PindCSS@main/engine.js\"></script>\n");
10
+ console.log("Or, if you are using Node/Webpack/Vite plugins:");
11
+ console.log(" import 'pind-css';\n");
12
+ console.log("Check the full documentation: https://nipunmagotra.github.io/PindCSS/");
13
+ console.log("Happy styling! 🎨\n");
package/engine.js ADDED
@@ -0,0 +1,215 @@
1
+ const Pind = {
2
+ init() {
3
+ this.scan(document.body);
4
+
5
+ // Dynamic DOM observer so any new elements added or classes updated get styles applied instantly!
6
+ const observer = new MutationObserver(mutations => {
7
+ mutations.forEach(mutation => {
8
+ if (mutation.type === 'childList') {
9
+ mutation.addedNodes.forEach(node => {
10
+ if (node.nodeType === 1) this.scan(node);
11
+ });
12
+ } else if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
13
+ this.scan(mutation.target);
14
+ }
15
+ });
16
+ });
17
+
18
+ // Start observing document body for injected elements AND class changes!
19
+ observer.observe(document.body, {
20
+ childList: true,
21
+ subtree: true,
22
+ attributes: true,
23
+ attributeFilter: ['class']
24
+ });
25
+ },
26
+
27
+ scan(rootNode) {
28
+ // Collect all child elements with classes, including the root node itself
29
+ const elements = rootNode.querySelectorAll ? rootNode.querySelectorAll("[class]") : [];
30
+ const nodes = [rootNode, ...elements].filter(el => el.classList && el.classList.length > 0);
31
+
32
+ nodes.forEach(el => {
33
+ Array.from(el.classList).forEach(className => {
34
+ const styles = this.parse(className);
35
+ if (styles) {
36
+ // Apply extracted styles directly inline
37
+ Object.keys(styles).forEach(prop => {
38
+ el.style[prop] = styles[prop];
39
+ });
40
+
41
+ // Remove the class to keep HTML clean as requested
42
+ el.classList.remove(className);
43
+ }
44
+ });
45
+ });
46
+ },
47
+
48
+ parse(className) {
49
+ // Direct matches (no dashes needed for these popular layouts)
50
+ const directMap = {
51
+ 'flex': { display: 'flex' },
52
+ 'grid': { display: 'grid' },
53
+ 'block': { display: 'block' },
54
+ 'inline-block': { display: 'inline-block' },
55
+ 'hidden': { display: 'none' },
56
+ 'col': { flexDirection: 'column' },
57
+ 'row': { flexDirection: 'row' },
58
+ 'center': { display: 'flex', justifyContent: 'center', alignItems: 'center' },
59
+ 'pointer': { cursor: 'pointer' },
60
+ 'relative': { position: 'relative' },
61
+ 'absolute': { position: 'absolute' },
62
+ 'w-full': { width: '100%' },
63
+ 'h-full': { height: '100%' },
64
+ 'h-screen': { height: '100vh' },
65
+ 'w-screen': { width: '100vw' },
66
+
67
+ // Ultra-modern effects included by default
68
+ 'glass': {
69
+ background: 'rgba(255, 255, 255, 0.1)',
70
+ backdropFilter: 'blur(10px)',
71
+ WebkitBackdropFilter: 'blur(10px)',
72
+ border: '1px solid rgba(255, 255, 255, 0.2)',
73
+ boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
74
+ }
75
+ };
76
+
77
+ if (directMap[className]) return directMap[className];
78
+
79
+ // Process utility prefixes (e.g. mb-20, bg-red)
80
+ const parts = className.split('-');
81
+ if (parts.length < 2) return null;
82
+
83
+ const prefix = parts[0];
84
+ const valStr = parts.slice(1).join('-'); // Rejoin just in case value had hyphens
85
+
86
+ const val = this.formatValue(valStr);
87
+ const colorVal = this.formatColor(valStr);
88
+
89
+ switch (prefix) {
90
+ // Spacing
91
+ case 'p': return { padding: val };
92
+ case 'pt': return { paddingTop: val };
93
+ case 'pb': return { paddingBottom: val };
94
+ case 'pl': return { paddingLeft: val };
95
+ case 'pr': return { paddingRight: val };
96
+ case 'px': return { paddingLeft: val, paddingRight: val };
97
+ case 'py': return { paddingTop: val, paddingBottom: val };
98
+
99
+ case 'm': return { margin: val };
100
+ case 'mt': return { marginTop: val };
101
+ case 'mb': return { marginBottom: val };
102
+ case 'ml': return { marginLeft: val };
103
+ case 'mr': return { marginRight: val };
104
+ case 'mx': return { marginLeft: val, marginRight: val };
105
+ case 'my': return { marginTop: val, marginBottom: val };
106
+
107
+ // Sizing
108
+ case 'w': return { width: val };
109
+ case 'h': return { height: val };
110
+ case 'min-w': return { minWidth: val };
111
+ case 'min-h': return { minHeight: val };
112
+ case 'max-w': return { maxWidth: val };
113
+ case 'max-h': return { maxHeight: val };
114
+
115
+ // Colors
116
+ case 'bg': return { backgroundColor: colorVal };
117
+ case 'c':
118
+ case 'text':
119
+ // It could be an alignment instead of a color
120
+ if (['left', 'center', 'right', 'justify'].includes(valStr)) {
121
+ return { textAlign: valStr };
122
+ }
123
+ return { color: colorVal };
124
+
125
+ // Typography
126
+ case 'fs': return { fontSize: val };
127
+ case 'fw': return { fontWeight: valStr };
128
+ case 'lh': return { lineHeight: valStr };
129
+ case 'tracking': return { letterSpacing: val };
130
+
131
+ // Borders
132
+ case 'radius':
133
+ case 'rounded': return { borderRadius: val };
134
+ case 'border':
135
+ if (['none', 'solid', 'dashed', 'dotted'].includes(valStr)) return { borderStyle: valStr };
136
+ if (!isNaN(valStr)) return { borderWidth: val }; // e.g. border-2
137
+ return { border: `1px solid ${colorVal}` }; // e.g. border-red
138
+
139
+ // Flex/Grid utilities
140
+ case 'flex': return { flex: valStr }; // e.g., flex-1
141
+ case 'items': return { alignItems: valStr };
142
+ case 'justify': return { justifyContent: valStr };
143
+ case 'gap': return { gap: val };
144
+
145
+ // Positioning & Misc
146
+ case 'shadow': return { boxShadow: `0 ${(parseInt(valStr)||4)}px ${(parseInt(valStr)||10)*2}px rgba(0,0,0,0.15)` };
147
+ case 'opacity': return { opacity: valStr };
148
+ case 'z': return { zIndex: valStr };
149
+ case 'top': return { top: val };
150
+ case 'bottom': return { bottom: val };
151
+ case 'left': return { left: val };
152
+ case 'right': return { right: val };
153
+
154
+ // Gradients
155
+ case 'grad':
156
+ const gradients = {
157
+ 'sunset': 'linear-gradient(to right, #ff7e5f, #feb47b)',
158
+ 'ocean': 'linear-gradient(to right, #1d3557, #457b9d)',
159
+ 'candy': 'linear-gradient(to right, #ffb199, #ff0844)',
160
+ 'lemon': 'linear-gradient(to right, #bef264, #22c55e)'
161
+ };
162
+ return { background: gradients[valStr] || 'none' };
163
+ }
164
+
165
+ return null;
166
+ },
167
+
168
+ formatValue(val) {
169
+ // Automatically convert raw numbers to pixels (much easier than tailwind brackets!)
170
+ if (!isNaN(val)) return val + 'px';
171
+ // 'p' mapping to percentage for easy responsiveness: w-100p -> 100%
172
+ if (val.endsWith('p')) return val.replace('p', '%');
173
+ return val;
174
+ },
175
+
176
+ formatColor(val) {
177
+ // Automatically prefix hex codes with # if it looks like a hex color
178
+ if (/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(val)) return `#${val}`;
179
+
180
+ // Built-in curated beautiful palette (no ugly basic web colors)
181
+ const colorMap = {
182
+ 'black': '#0f172a',
183
+ 'white': '#ffffff',
184
+ 'gray': '#64748b',
185
+ 'red': '#ef4444',
186
+ 'green': '#22c55e',
187
+ 'yellow': '#eab308',
188
+ 'lemon': '#bef264',
189
+ 'blue': '#3b82f6',
190
+ 'ocean': '#1d3557', // From your theme
191
+ 'strawberry': '#e63946', // From your theme
192
+ 'honeydew': '#f1faee', // From your theme
193
+ 'sky': '#a8dadc', // From your theme
194
+ 'steel': '#457b9d' // From your theme
195
+ };
196
+
197
+ return colorMap[val.toLowerCase()] || val; // Fallback to raw value (e.g. "transparent")
198
+ }
199
+ };
200
+
201
+ // Support for NPM / Node Modules / ES6 Imports
202
+ if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
203
+ module.exports = Pind;
204
+ } else if (typeof define === 'function' && define.amd) {
205
+ define([], function() { return Pind; });
206
+ } else {
207
+ // Standard Browser Environment Setup
208
+ window.Pind = Pind;
209
+ // Automatically initialize Engine on page load if added as a raw script
210
+ if (document.readyState === 'loading') {
211
+ document.addEventListener("DOMContentLoaded", () => Pind.init());
212
+ } else {
213
+ Pind.init();
214
+ }
215
+ }
package/index.html ADDED
@@ -0,0 +1,194 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pind CSS</title>
7
+ <script src="engine.js"></script>
8
+ <link rel="stylesheet" href="style.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
10
+ </head>
11
+ <body class="bg-f1faee c-1d3557 type-body flex col pb-100 items-center">
12
+
13
+ <div class="relative w-100p max-w-900 mt-60 z-10 p-20" style="box-sizing: border-box;">
14
+
15
+ <div class="absolute bg-1d3557 w-100p h-500 top-40 left-40 z-0 hidden md:block" style="left: 40px; top: 40px; width: calc(100% - 40px);"></div>
16
+
17
+ <div class="bg-f1faee border-1d3557 pt-80 pr-40 pl-60 pb-80 z-10 relative flex col gap-20">
18
+ <h1 class="type-heading fs-72 m-0 lh-1.1 c-1d3557 max-w-700"><span class="pind-easter-egg" data-punjabi="ਪਿੰਡ">Pind</span> CSS</h1>
19
+ <p class="fs-18 m-0 lh-1.5 max-w-500 c-457b9d fw-400 mt-10">
20
+ The easiest way to style your website using just HTML classes. No setup required!
21
+ </p>
22
+
23
+ <div class="flex row gap-10 mt-20 flex-wrap pt-20 pb-20 border-1d3557" style="border-width: 1px 0; border-style: solid; border-left: none; border-right: none;">
24
+ <span class="bg-e63946 c-f1faee px-12 py-4 border-1d3557 fs-14 shadow-brutal-sm fw-700">v1.0.0</span>
25
+ </div>
26
+
27
+
28
+ </div>
29
+
30
+ <div class="mt-60 flex col gap-40 w-100p relative z-10">
31
+
32
+ <!-- Index Section -->
33
+ <div class="doc-section">
34
+ <h2 class="type-heading fs-32 m-0 c-1d3557">On this page</h2>
35
+ <ul class="m-0 mt-10 flex col gap-10 lh-1.5 fw-700" style="list-style-type: none; padding: 0;">
36
+ <li><a href="#what-is-pind" class="c-e63946" style="text-decoration: none;">&rarr; What is Pind CSS?</a></li>
37
+ <li><a href="#quick-start" class="c-e63946" style="text-decoration: none;">&rarr; Quick Start</a></li>
38
+ <li><a href="#spacing" class="c-e63946" style="text-decoration: none;">&rarr; 1. Spacing</a></li>
39
+ <li><a href="#colors" class="c-e63946" style="text-decoration: none;">&rarr; 2. Colors</a></li>
40
+ <li><a href="#text" class="c-e63946" style="text-decoration: none;">&rarr; 3. Text</a></li>
41
+ <li><a href="#borders" class="c-e63946" style="text-decoration: none;">&rarr; 4. Borders & Radius</a></li>
42
+ <li><a href="#layout" class="c-e63946" style="text-decoration: none;">&rarr; 5. Layout Settings</a></li>
43
+ <li><a href="#cool-effects" class="c-e63946" style="text-decoration: none;">&rarr; 6. Cool Advanced Effects</a></li>
44
+ </ul>
45
+ </div>
46
+
47
+ <div class="doc-section" id="what-is-pind">
48
+ <h2 class="type-heading fs-40 m-0">What is Pind CSS?</h2>
49
+ <p class="m-0 fs-16 lh-1.5">Pind CSS reads your standard HTML <code>class</code> tags, automatically resolves the names into beautiful properties, and applies the style rules directly onto your elements at runtime. No build tools needed.</p>
50
+ </div>
51
+
52
+ <div class="doc-section" id="quick-start">
53
+ <h2 class="type-heading fs-40 m-0">Quick Start</h2>
54
+ <p class="m-0 fs-16 lh-1.5 c-457b9d fw-700">Install from npm or drop the CDN script directly into your HTML file.</p>
55
+
56
+ <div class="flex row gap-10 mt-10 mb-10" style="flex-wrap: wrap;">
57
+ <a href="https://www.npmjs.com/package/pind-css" target="_blank" class="type-body bg-1d3557 c-f1faee border-1d3557 px-20 py-10 fs-14 fw-700 pointer btn-hover shadow-brutal-sm" style="text-decoration: none;">Open NPM Package</a>
58
+ <a href="https://github.com/NipunMagotra/PindCSS" target="_blank" class="type-body bg-e63946 c-f1faee border-1d3557 px-20 py-10 fs-14 fw-700 pointer btn-hover shadow-brutal-sm" style="text-decoration: none;">Open GitHub Repo</a>
59
+ </div>
60
+
61
+ <h3 class="type-heading fs-24 m-0 mt-20">NPM Install</h3>
62
+ <div class="code-block border-1d3557"><code>npm install github:NipunMagotra/PindCSS</code></div>
63
+
64
+ <h3 class="type-heading fs-24 m-0 mt-20">CDN (Drop-in script)</h3>
65
+ <div class="code-block border-1d3557"><code>&lt;script src="https://cdn.jsdelivr.net/gh/NipunMagotra/PindCSS@main/engine.js"&gt;&lt;/script&gt;</code></div>
66
+ </div>
67
+
68
+ <div class="doc-section" id="spacing">
69
+ <h2 class="type-heading fs-40 m-0">1. Spacing</h2>
70
+ <p class="m-0 fs-16 lh-1.5">Just type a number to add pixels. E.g `p-20` adds 20px padding.</p>
71
+ <ul class="m-0 mt-10">
72
+ <li><b>Padding:</b> <code>p-20</code> (all sides), <code>pt-10</code> (top), <code>px-20</code> (left and right)</li>
73
+ <li><b>Margin:</b> <code>m-10</code> (all sides), <code>mb-40</code> (bottom), <code>mx-auto</code> (center)</li>
74
+ </ul>
75
+ <div class="code-block border-1d3557"><code>&lt;div class="p-20 mt-10"&gt;Padded Box&lt;/div&gt;</code></div>
76
+
77
+ <p class="fw-700 c-457b9d mt-20 m-0">Interactive Demo: Spacing</p>
78
+ <div class="flex row gap-10 mt-10" style="flex-wrap: wrap;">
79
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo1').className += ' p-10 '">p-10</button>
80
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo1').className += ' p-40 '">p-40</button>
81
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo1').className += ' p-80 '">p-80</button>
82
+ </div>
83
+ <div id="demo1" class="bg-1d3557 c-f1faee p-20 mt-20 text-center fw-700" style="transition: all 0.3s ease;">Watch my padding change live!</div>
84
+ </div>
85
+
86
+ <div class="doc-section" id="colors">
87
+ <h2 class="type-heading fs-40 m-0">2. Colors</h2>
88
+ <p class="m-0 fs-16 lh-1.5">Use curated color names for beautiful results, or raw hex codes. No hashtags needed.</p>
89
+ <ul class="m-0 mt-10">
90
+ <li><b>Basic:</b> <code>bg-black</code>, <code>bg-red</code>, <code>bg-green</code>, <code>bg-lemon</code>, <code>bg-yellow</code>, <code>bg-blue</code></li>
91
+ <li><b>Theme:</b> <code>bg-ocean</code>, <code>bg-strawberry</code>, <code>bg-honeydew</code>, <code>bg-sky</code>, <code>bg-steel</code></li>
92
+ <li><b>Text Color:</b> <code>c-honeydew</code>, <code>c-ocean</code>, <code>c-white</code></li>
93
+ </ul>
94
+ <div class="code-block border-1d3557"><code>&lt;div class="bg-strawberry c-honeydew p-20"&gt;Strawberry Red&lt;/div&gt;</code></div>
95
+
96
+ <p class="fw-700 c-457b9d mt-20 m-0">Interactive Demo: Colors</p>
97
+ <div class="flex row gap-10 mt-10" style="flex-wrap: wrap;">
98
+ <button class="bg-e63946 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo2').className += ' bg-strawberry c-honeydew '">Strawberry</button>
99
+ <button class="bg-bef264 c-1d3557 border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo2').className += ' bg-lemon c-1d3557 '">Lemon</button>
100
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo2').className += ' bg-ocean c-white '">Ocean</button>
101
+ </div>
102
+ <div id="demo2" class="bg-1d3557 c-f1faee p-20 mt-20 fw-700 fs-20 text-center border-1d3557" style="transition: all 0.4s ease;">Click a button to change my color.</div>
103
+ </div>
104
+
105
+ <div class="doc-section" id="text">
106
+ <h2 class="type-heading fs-40 m-0">3. Text</h2>
107
+ <p class="m-0 fs-16 lh-1.5">Make your text look exactly how you want it.</p>
108
+ <ul class="m-0 mt-10">
109
+ <li><b>Size & Boldness:</b> <code>fs-32</code> (Font size 32px), <code>fw-700</code> (Bold)</li>
110
+ <li><b>Alignment:</b> <code>text-center</code>, <code>text-left</code>, <code>text-right</code></li>
111
+ </ul>
112
+ <div class="code-block border-1d3557"><code>&lt;p class="fs-32 fw-700 text-center c-457b9d"&gt;Large Text&lt;/p&gt;</code></div>
113
+
114
+ <p class="fw-700 c-457b9d mt-20 m-0">Interactive Demo: Typography</p>
115
+ <div class="flex row gap-10 mt-10" style="flex-wrap: wrap;">
116
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo3').className += ' fs-16 fw-400 text-left '">fs-16 & text-left</button>
117
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo3').className += ' fs-40 fw-900 text-center '">fs-40 & text-center</button>
118
+ </div>
119
+ <p id="demo3" class="fs-24 fw-700 text-center border-1d3557 p-20 m-0 mt-20 bg-f1faee c-457b9d" style="transition: all 0.3s ease;">Watch my font change.</p>
120
+ </div>
121
+
122
+ <div class="doc-section" id="borders">
123
+ <h2 class="type-heading fs-40 m-0">4. Borders and Radius</h2>
124
+ <p class="m-0 fs-16 lh-1.5">Draw lines around boxes and make the corners round easily.</p>
125
+ <ul class="m-0 mt-10">
126
+ <li><b>Radius:</b> <code>radius-10</code> (Make it slightly round), <code>radius-100p</code> (Make it a circle)</li>
127
+ <li><b>Borders:</b> <code>border-1d3557</code> (Use color to add a border), <code>border-none</code> (Remove borders)</li>
128
+ </ul>
129
+ <div class="code-block border-1d3557"><code>&lt;div class="border-1d3557 radius-10 p-20"&gt;Rounded&lt;/div&gt;</code></div>
130
+
131
+ <p class="fw-700 c-457b9d mt-20 m-0">Interactive Demo: Geometry</p>
132
+ <div class="flex row gap-10 mt-10" style="flex-wrap: wrap;">
133
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo4').className += ' radius-10 border-1d3557 border-dashed shadow-none '">Square Dashed</button>
134
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo4').className += ' radius-100p border-A03A13 shadow-brutal '">Brutal Circle</button>
135
+ </div>
136
+ <div id="demo4" class="border-1d3557 radius-10 p-20 mt-20 bg-f1faee text-center fw-700" style="border-style: solid; border-width: 2px; transition: all 0.4s ease; min-height: 100px; display: flex; align-items: center; justify-content: center;">Rounded Box</div>
137
+ </div>
138
+
139
+ <div class="doc-section" id="layout">
140
+ <h2 class="type-heading fs-40 m-0">5. Layout Settings</h2>
141
+ <p class="m-0 fs-16 lh-1.5">Put things exactly where you want them side by side.</p>
142
+ <ul class="m-0 mt-10">
143
+ <li><b>Display:</b> <code>flex</code>, <code>grid</code>, <code>hidden</code></li>
144
+ <li><b>Flex Settings:</b> <code>col</code>, <code>row</code>, <code>center</code>, <code>gap-20</code></li>
145
+ <li><b>Size:</b> <code>w-100p</code> (100% width)</li>
146
+ </ul>
147
+ <div class="code-block border-1d3557"><code>&lt;div class="flex row center gap-20 w-100p"&gt;...&lt;/div&gt;</code></div>
148
+
149
+ <p class="fw-700 c-457b9d mt-20 m-0">Interactive Demo: Flex Layout</p>
150
+ <div class="flex row gap-10 mt-10" style="flex-wrap: wrap;">
151
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo5').className += ' row '">flex row</button>
152
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo5').className += ' col '">flex col</button>
153
+ </div>
154
+ <div id="demo5" class="flex row center gap-20 w-100p mt-20 p-20 border-1d3557 bg-1d3557" style="box-sizing: border-box; transition: all 0.4s ease;">
155
+ <div class="bg-a8dadc c-1d3557 p-20 w-50p text-center border-1d3557 fw-700" style="box-sizing: border-box;">Box 1</div>
156
+ <div class="bg-457b9d c-f1faee p-20 w-50p text-center border-1d3557 fw-700" style="box-sizing: border-box;">Box 2</div>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="doc-section" id="cool-effects">
161
+ <h2 class="type-heading fs-40 m-0">6. Cool Advanced Effects</h2>
162
+ <p class="m-0 fs-16 lh-1.5">Want to impress people without writing crazy CSS? Use built-in effects.</p>
163
+ <ul class="m-0 mt-10">
164
+ <li><b>Frosted Glass:</b> Just write <code>glass</code> to make a frosty blurry background.</li>
165
+ <li><b>Gradients:</b> Write <code>grad-sunset</code>, <code>grad-ocean</code>, <code>grad-candy</code>, or <code>grad-lemon</code> to instantly apply beautiful gradients.</li>
166
+ </ul>
167
+ <div class="code-block border-1d3557"><code>&lt;div class="grad-ocean p-20 c-white"&gt;Wow!&lt;/div&gt;</code></div>
168
+
169
+ <p class="fw-700 c-457b9d mt-20 m-0">Interactive Demo: Gradients & Glass</p>
170
+ <div class="flex row gap-10 mt-10" style="flex-wrap: wrap;">
171
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo6').className += ' grad-ocean '">grad-ocean</button>
172
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo6').className += ' grad-candy '">grad-candy</button>
173
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo6').className += ' grad-lemon '">grad-lemon</button>
174
+ <button class="bg-1d3557 c-f1faee border-none py-10 px-20 fw-700 radius-10 pointer btn-hover" onclick="document.getElementById('demo6').className += ' glass '">glass effect</button>
175
+ </div>
176
+
177
+ <div class="grad-sunset p-40 mt-20 border-1d3557 relative flex col center" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80&w=1000'); background-size: cover; background-position: center; border-radius: 10px;">
178
+ <!-- The token applies the effect live! -->
179
+ <div id="demo6" class="glass p-20 text-center radius-10 c-ocean fw-700 fs-24 shadow-brutal w-100p" style="transition: all 0.5s ease;">
180
+ Try gradients and glass!
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="mt-40 mb-20 flex col center w-100p gap-20">
186
+ <p class="fs-24 fw-700 c-1d3557 bg-a8dadc inline-block p-16 border-1d3557 shadow-brutal-sm m-0 type-body text-center">More features coming soon...</p>
187
+ </div>
188
+
189
+ </div>
190
+ </div>
191
+
192
+
193
+ </body>
194
+ </html>
package/package.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "name": "pind-css",
3
+ "version": "1.0.0",
4
+ "description": "A lightweight utility-first styling library that runs directly in the browser.",
5
+ "main": "engine.js",
6
+ "bin": {
7
+ "pindcss": "bin/cli.js"
8
+ },
9
+ "scripts": {
10
+ "test": "echo \"Error: no test specified\" && exit 1"
11
+ },
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "git+https://github.com/NipunMagotra/PindCSS.git"
15
+ },
16
+ "keywords": [
17
+ "css",
18
+ "utility",
19
+ "runtime",
20
+ "pind",
21
+ "framework"
22
+ ],
23
+ "author": "Nipun Magotra",
24
+ "license": "MIT",
25
+ "bugs": {
26
+ "url": "https://github.com/NipunMagotra/PindCSS/issues"
27
+ },
28
+ "homepage": "https://nipunmagotra.github.io/PindCSS/"
29
+ }
package/style.css ADDED
@@ -0,0 +1,66 @@
1
+ /* Anti-slop core styling */
2
+ body { background-color: #f1faee; margin: 0; min-height: 100vh; }
3
+ .type-heading { font-family: 'Playfair Display', serif; }
4
+ .type-body { font-family: 'Space Mono', monospace; }
5
+
6
+ .shadow-brutal { box-shadow: 6px 6px 0px 0px #1d3557; }
7
+ .shadow-brutal-sm { box-shadow: 3px 3px 0px 0px #1d3557; }
8
+
9
+ .btn-hover { transition: transform 0.1s ease, box-shadow 0.1s ease; }
10
+ .btn-hover:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0px 0px #1d3557; }
11
+ .btn-hover:active { transform: translate(0, 0); box-shadow: 0px 0px 0px 0px #1d3557; }
12
+
13
+ pre, code { margin: 0; padding: 0; font-family: 'Space Mono', monospace; }
14
+ .code-block { background-color: #1d3557; color: #f1faee; padding: 16px; font-size: 14px; overflow-x: auto; margin-top: 15px; }
15
+ .doc-section { background-color: #f1faee; border: 1px solid #1d3557; padding: 40px; box-shadow: 6px 6px 0px 0px #1d3557; display: flex; flex-direction: column; gap: 10px; }
16
+
17
+ /* The Village Easter Egg Effects! */
18
+ .pind-easter-egg {
19
+ position: relative;
20
+ display: inline-block;
21
+ cursor: pointer;
22
+ color: inherit;
23
+ transition: color 0.3s ease;
24
+ }
25
+
26
+ /* The Punjabi Text Translation */
27
+ .pind-easter-egg::before {
28
+ content: attr(data-punjabi);
29
+ position: absolute;
30
+ left: 50%;
31
+ transform: translateX(-50%) translateY(15px);
32
+ color: #e63946; /* Strawberry Red highlight */
33
+ opacity: 0;
34
+ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
35
+ pointer-events: none;
36
+ }
37
+
38
+ /* The Floating Emojis */
39
+ .pind-easter-egg::after {
40
+ content: "🌽🚜🌾";
41
+ position: absolute;
42
+ top: -10px;
43
+ left: 50%;
44
+ transform: translateX(-50%) scale(0);
45
+ font-size: 40px;
46
+ opacity: 0;
47
+ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
48
+ white-space: nowrap;
49
+ pointer-events: none;
50
+ text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
51
+ }
52
+
53
+ .pind-easter-egg:hover {
54
+ color: transparent; /* Hide English text */
55
+ }
56
+
57
+ .pind-easter-egg:hover::before {
58
+ transform: translateX(-50%) translateY(0);
59
+ opacity: 1; /* Show Punjabi translation */
60
+ }
61
+
62
+ .pind-easter-egg:hover::after {
63
+ transform: translateX(-50%) scale(1);
64
+ opacity: 1;
65
+ top: -50px;
66
+ }