kempo-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 (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +97 -0
  3. package/build.js +101 -0
  4. package/index.html +1327 -0
  5. package/kempo-hljs.css +125 -0
  6. package/kempo.css +1021 -0
  7. package/package.json +17 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Dustin Poissant
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,97 @@
1
+ # Kempo CSS
2
+
3
+ A lightweight, modern CSS framework that provides kempo utilities and components for rapid web development.
4
+
5
+ ## Features
6
+
7
+ - **Lightweight**: Minimal footprint with only the essentials
8
+ - **Modern**: Built with modern CSS practices and design principles
9
+ - **Flexible**: Utility-first approach with semantic components
10
+ - **Dark Mode**: Built-in dark theme support with easy toggling
11
+ - **Color Utilities**: Comprehensive background and text color classes
12
+
13
+ ## Documentation
14
+
15
+ View the complete documentation and live examples at:
16
+ **[https://dustinpoissant.github.io/kempo-css/](https://dustinpoissant.github.io/kempo-css/)**
17
+
18
+ ## Installation
19
+
20
+ ### NPM
21
+
22
+ ```bash
23
+ npm install kempo-css
24
+ ```
25
+
26
+ Then include the CSS files in your project:
27
+ ```html
28
+ <link rel="stylesheet" href="node_modules/kempo-css/kempo.css">
29
+ <link rel="stylesheet" href="node_modules/kempo-css/kempo-hljs.css">
30
+ ```
31
+
32
+ Or import in your CSS/SCSS files:
33
+ ```css
34
+ @import 'kempo-css/kempo.css';
35
+ @import 'kempo-css/kempo-hljs.css';
36
+ ```
37
+
38
+ ### Download
39
+
40
+ 1. Download the CSS files from the [documentation page](https://dustinpoissant.github.io/kempo-css/)
41
+ 2. Include them in your project:
42
+
43
+ ```html
44
+ <link rel="stylesheet" href="path/to/kempo.css">
45
+ <link rel="stylesheet" href="path/to/kempo-hljs.css">
46
+ ```
47
+
48
+ ### Build from Source
49
+
50
+ 1. Clone the repository:
51
+ ```bash
52
+ git clone https://github.com/dustinpoissant/kempo-css.git
53
+ cd kempo-css
54
+ ```
55
+
56
+ 2. Install dependencies:
57
+ ```bash
58
+ npm install
59
+ ```
60
+
61
+ 3. Build minified versions:
62
+ ```bash
63
+ npm run build
64
+ ```
65
+
66
+ ## Quick Start
67
+
68
+ ```html
69
+ <!DOCTYPE html>
70
+ <html lang="en">
71
+ <head>
72
+ <meta charset="UTF-8">
73
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
74
+ <title>My App</title>
75
+ <link rel="stylesheet" href="https://dustinpoissant.github.io/kempo-css/kempo.css">
76
+ </head>
77
+ <body>
78
+ <div class="container">
79
+ <h1 class="tc-primary">Hello, Kempo CSS!</h1>
80
+ <button class="btn btn-primary">Get Started</button>
81
+ </div>
82
+ </body>
83
+ </html>
84
+ ```
85
+
86
+ ## Development
87
+
88
+ - `npm run build` - Build minified CSS files
89
+ - `npm run build:watch` - Watch for changes and rebuild automatically
90
+
91
+ ## License
92
+
93
+ ISC License - feel free to use in personal and commercial projects.
94
+
95
+ ---
96
+
97
+ **[View Documentation](https://dustinpoissant.github.io/kempo-css/)** | **[Report Issues](https://github.com/dustinpoissant/kempo-css/issues)**
package/build.js ADDED
@@ -0,0 +1,101 @@
1
+ #!/usr/bin/env node
2
+
3
+ const { execSync } = require('child_process');
4
+ const fs = require('fs');
5
+ const path = require('path');
6
+
7
+ // Check for watch flag
8
+ const isWatchMode = process.argv.includes('--watch');
9
+
10
+ if (isWatchMode) {
11
+ console.log('Watch mode enabled - monitoring CSS files for changes...\n');
12
+ } else {
13
+ console.log('Building Kempo CSS...\n');
14
+ }
15
+
16
+ // Define input and output files
17
+ const inputFiles = [
18
+ 'kempo.css',
19
+ 'kempo-hljs.css'
20
+ ];
21
+
22
+ const outputDir = 'dist';
23
+ const outputFiles = [
24
+ 'kempo.min.css',
25
+ 'kempo-hljs.min.css'
26
+ ];
27
+
28
+ // Create dist directory if it doesn't exist
29
+ if (!fs.existsSync(outputDir)) {
30
+ fs.mkdirSync(outputDir);
31
+ console.log(`Created ${outputDir}/ directory`);
32
+ }
33
+
34
+ // Minify each CSS file
35
+ inputFiles.forEach((inputFile, index) => {
36
+ const outputFile = path.join(outputDir, outputFiles[index]);
37
+
38
+ try {
39
+ // Check if input file exists
40
+ if (!fs.existsSync(inputFile)) {
41
+ console.log(`Skipping ${inputFile} (file not found)`);
42
+ return;
43
+ }
44
+
45
+ // Get file size before minification
46
+ const originalSize = fs.statSync(inputFile).size;
47
+
48
+ // Minify the CSS using clean-css-cli
49
+ console.log(`Minifying ${inputFile}...`);
50
+ execSync(`npx cleancss -o ${outputFile} ${inputFile}`, { stdio: 'inherit' });
51
+
52
+ // Get file size after minification
53
+ const minifiedSize = fs.statSync(outputFile).size;
54
+ const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
55
+
56
+ console.log(`${inputFile} → ${outputFile}`);
57
+ console.log(` Original: ${(originalSize / 1024).toFixed(1)}KB`);
58
+ console.log(` Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
59
+ console.log(` Savings: ${savings}%\n`);
60
+ } catch (error) {
61
+ console.error(`Error minifying ${inputFile}:`, error.message);
62
+ }
63
+ });
64
+
65
+ console.log('Build complete!');
66
+ console.log(`Minified files are in the ${outputDir}/ directory`);
67
+
68
+ // Watch mode functionality
69
+ if (isWatchMode) {
70
+ console.log('Watching for changes... (Press Ctrl+C to stop)\n');
71
+
72
+ inputFiles.forEach(inputFile => {
73
+ if (fs.existsSync(inputFile)) {
74
+ fs.watchFile(inputFile, { interval: 1000 }, (curr, prev) => {
75
+ if (curr.mtime !== prev.mtime) {
76
+ console.log(`\n${inputFile} changed, rebuilding...`);
77
+
78
+ // Find the corresponding output file
79
+ const index = inputFiles.indexOf(inputFile);
80
+ const outputFile = path.join(outputDir, outputFiles[index]);
81
+ try {
82
+ const originalSize = fs.statSync(inputFile).size;
83
+ console.log(`Minifying ${inputFile}...`);
84
+ execSync(`npx cleancss -o ${outputFile} ${inputFile}`, { stdio: 'inherit' });
85
+
86
+ const minifiedSize = fs.statSync(outputFile).size;
87
+ const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
88
+
89
+ console.log(`${inputFile} → ${outputFile}`);
90
+ console.log(` Original: ${(originalSize / 1024).toFixed(1)}KB`);
91
+ console.log(` Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
92
+ console.log(` Savings: ${savings}%`);
93
+ console.log('\nWatching for changes...');
94
+ } catch (error) {
95
+ console.error(`Error minifying ${inputFile}:`, error.message);
96
+ }
97
+ }
98
+ });
99
+ }
100
+ });
101
+ }