swatchkit 0.0.3 → 0.0.4
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.
- package/README.md +16 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,14 +9,14 @@ It follows the "Magic Folder" principle: drop files in, and a library comes out.
|
|
|
9
9
|
Try it instantly in any project:
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
|
-
# 1. Initialize the layout
|
|
12
|
+
# 1. Initialize the layout and design tokens
|
|
13
13
|
npx swatchkit init
|
|
14
14
|
|
|
15
15
|
# 2. Build the library
|
|
16
16
|
npx swatchkit
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
This will create a `swatches/` folder and build your site to `public/swatchkit/`.
|
|
19
|
+
This will create a `swatches/` folder, generate a `src/tokens/colors.json` file, and build your site to `public/swatchkit/`.
|
|
20
20
|
|
|
21
21
|
---
|
|
22
22
|
|
|
@@ -36,23 +36,31 @@ Then add it to your `package.json` scripts:
|
|
|
36
36
|
}
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
##
|
|
39
|
+
## Features
|
|
40
40
|
|
|
41
41
|
### 1. The Magic Folder
|
|
42
42
|
By default, SwatchKit looks for a `swatches/` folder in your project root.
|
|
43
43
|
* **Single File:** Drop `card.html` into `swatches/`. It appears in the library.
|
|
44
44
|
* **Component Folder:** Drop a folder like `swatches/carousel/` containing `index.html`. It works the same way.
|
|
45
45
|
|
|
46
|
-
### 2.
|
|
46
|
+
### 2. Design Tokens (Colors)
|
|
47
|
+
SwatchKit includes a basic **Token Engine**.
|
|
48
|
+
* **Source:** Edit `src/tokens/colors.json`.
|
|
49
|
+
* **Output:** SwatchKit auto-generates `src/css/tokens.css` with CSS variables.
|
|
50
|
+
* **Docs:** It creates `swatches/colors.html` to visualize your palette.
|
|
51
|
+
|
|
52
|
+
*(More token types like Typography and Spacing coming soon!)*
|
|
53
|
+
|
|
54
|
+
### 3. Custom Layouts
|
|
47
55
|
When you run `swatchkit init`, we create `swatches/_layout.html`.
|
|
48
56
|
**You own this file.**
|
|
49
57
|
* Add your own `<link rel="stylesheet" href="/css/app.css">`.
|
|
50
58
|
* Add custom fonts, scripts, or meta tags.
|
|
51
59
|
* Change the HTML structure, logo, or classes.
|
|
52
60
|
|
|
53
|
-
SwatchKit simply injects the content into the `<!-- PATTERNS
|
|
61
|
+
SwatchKit simply injects the content into the `<!-- PATTERNS -->`, `<!-- SIDEBAR_LINKS -->`, and `<!-- HEAD_EXTRAS -->` placeholders.
|
|
54
62
|
|
|
55
|
-
###
|
|
63
|
+
### 4. JavaScript Bundling
|
|
56
64
|
If your component needs client-side JS:
|
|
57
65
|
1. Create a folder: `swatches/carousel/`.
|
|
58
66
|
2. Add `index.html` (Markup).
|
|
@@ -68,7 +76,7 @@ swatchkit [command] [options]
|
|
|
68
76
|
|
|
69
77
|
### Commands
|
|
70
78
|
* `swatchkit` (Default): Builds the library.
|
|
71
|
-
* `swatchkit init`: Scaffolds the
|
|
79
|
+
* `swatchkit init`: Scaffolds the layout and token files.
|
|
72
80
|
|
|
73
81
|
### Flags
|
|
74
82
|
| Flag | Short | Description |
|
|
@@ -90,4 +98,4 @@ module.exports = {
|
|
|
90
98
|
// Override default output directory
|
|
91
99
|
outDir: './dist/docs'
|
|
92
100
|
};
|
|
93
|
-
```
|
|
101
|
+
```
|