kata-css 0.0.2 → 0.0.3

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 (2) hide show
  1. package/README.md +306 -307
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,16 +1,26 @@
1
- # KataCSS
2
1
 
3
- A utility-first inline CSS engine. Write `kata-*` classes, get inline styles. No build step, no config, no compiler.
2
+
3
+ <h1 align="center">KataCSS</h1>
4
+
5
+ <p align="center">
6
+ A utility-first inline CSS engine. Write <code>kata-*</code> classes, get inline styles.<br/>
7
+ No build step, no config, no compiler.
8
+ </p>
9
+
10
+ <p align="center">
11
+ <a href="https://www.npmjs.com/package/kata-css"><img src="https://img.shields.io/npm/v/kata-css" alt="npm version"/></a>
12
+ <a href="https://www.npmjs.com/package/kata-css"><img src="https://img.shields.io/npm/dw/kata-css" alt="npm downloads"/></a>
13
+ </p>
4
14
 
5
15
  ---
6
16
 
7
- ## What this is
17
+ ## What is KataCSS?
8
18
 
9
- KataCSS reads `kata-*` class names on your HTML elements and converts them into inline CSS styles when the page loads. That's the whole thing.
19
+ KataCSS reads `kata-*` class names on your HTML elements and converts them into inline CSS styles the moment the page loads. That's the whole thing.
10
20
 
11
- No PostCSS. No JIT. No purge configuration. You add a script tag or an npm import, write some classes, open the browser, and it works.
21
+ No PostCSS. No JIT compiler. No purge configuration to think about. Drop a script tag in, write some classes, open the browser, and it works.
12
22
 
13
- The spacing scale is `i × 0.25rem` — so `kata-p-4` is `1rem`, same as Tailwind. If you've used Tailwind before, the spacing feels immediately familiar.
23
+ The spacing scale is `i × 0.25rem` so `kata-p-4` gives you `1rem`, same as Tailwind. If you've used Tailwind before, the muscle memory transfers instantly.
14
24
 
15
25
  ---
16
26
 
@@ -21,12 +31,10 @@ The spacing scale is `i × 0.25rem` — so `kata-p-4` is `1rem`, same as Tailwin
21
31
  ```html
22
32
  <script src="https://cdn.jsdelivr.net/npm/kata-css@latest/dist/kata.min.js"></script>
23
33
  ```
24
- Drop the script tag and start using styling by typing `kata-` followed by style
25
34
 
26
- ### npm
35
+ Paste this into your HTML and start styling immediately.
27
36
 
28
- [![npm version](https://img.shields.io/npm/v/kata-css)](https://www.npmjs.com/package/kata-css)
29
- [![npm downloads](https://img.shields.io/npm/dw/kata-css)](https://www.npmjs.com/package/kata-css)
37
+ ### npm
30
38
 
31
39
  ```bash
32
40
  npm install kata-css
@@ -36,11 +44,11 @@ npm install kata-css
36
44
  import "kata-css";
37
45
  ```
38
46
 
39
- That single import is all you need. It self-executes — no initialization, no setup object.
47
+ That single import is all you need. It self-executes, no initialization function to call, no setup object to configure.
40
48
 
41
49
  ---
42
50
 
43
- ## How it works
51
+ ## How it Works
44
52
 
45
53
  KataCSS listens for `DOMContentLoaded`. Once the DOM is ready, it scans every element with a class attribute, finds anything starting with `kata-`, looks it up in a flat key-value map, writes the result as an inline `style`, and removes the original class.
46
54
 
@@ -50,28 +58,26 @@ Browser parses HTML
50
58
  → DOM finishes loading
51
59
  → KataCSS scans all elements
52
60
  → finds kata-* classes
53
- → looks up each in classMap
61
+ → looks kata- classes in classMap
54
62
  → writes inline style attribute
55
63
  → removes kata-* classes from classList
56
64
  ```
57
65
 
58
- Nothing left behind. No `kata-*` classes in the final DOM, just plain inline styles.
59
-
60
- If you write a class that doesn't exist in the map, KataCSS tells you:
66
+ Nothing left behind. No `kata-*` classes in the final DOM — just clean inline styles. If you write a class that doesn't exist in the map, KataCSS tells you:
61
67
 
62
68
  ```
63
- [kata-css] Unknown class: "kata-xyz"
69
+ [kata-css] Unknown class: "kata-[style]"
64
70
  ```
65
71
 
66
72
  ---
67
73
 
68
- ## Basic usage
74
+ ## Basic Usage
69
75
 
70
76
  ```html
71
77
  <!DOCTYPE html>
72
78
  <html>
73
79
  <head>
74
- <script src="https://cdn.jsdelivr.net/npm/kata-css@latest/dist/kata.min.js"></script>
80
+ <script src="https://cdn.jsdelivr.net/npm/kata-css@latest/dist/kata.min.js"></script>
75
81
  </head>
76
82
  <body>
77
83
 
@@ -89,9 +95,9 @@ If you write a class that doesn't exist in the map, KataCSS tells you:
89
95
 
90
96
  ---
91
97
 
92
- ## Spacing scale
98
+ ## Spacing Scale
93
99
 
94
- All spacing utilities multiply by `0.25rem`. Scale runs 0 to 96.
100
+ All spacing utilities multiply by `0.25rem`. The scale runs 0 to 96. No decimals in class names, need `0.75rem`? Use `kata-p-3`.
95
101
 
96
102
  | Class | Value |
97
103
  |---|---|
@@ -101,99 +107,99 @@ All spacing utilities multiply by `0.25rem`. Scale runs 0 to 96.
101
107
  | `kata-p-8` | `2rem` (32px) |
102
108
  | `kata-p-16` | `4rem` (64px) |
103
109
 
104
- No decimals in class names. Need `0.75rem`? Use `kata-p-3`.
105
-
106
110
  ### Padding
107
111
 
108
- ```
109
- kata-p-{n} padding: n×0.25rem
110
- kata-px-{n} padding-left + padding-right
111
- kata-py-{n} padding-top + padding-bottom
112
- kata-pt-{n} padding-top
113
- kata-pb-{n} padding-bottom
114
- kata-pl-{n} padding-left
115
- kata-pr-{n} padding-right
116
- ```
112
+ | Class | Property |
113
+ |---|---|
114
+ | `kata-p-{n}` | `padding: n×0.25rem` |
115
+ | `kata-px-{n}` | `padding-left + padding-right` |
116
+ | `kata-py-{n}` | `padding-top + padding-bottom` |
117
+ | `kata-pt-{n}` | `padding-top` |
118
+ | `kata-pb-{n}` | `padding-bottom` |
119
+ | `kata-pl-{n}` | `padding-left` |
120
+ | `kata-pr-{n}` | `padding-right` |
117
121
 
118
122
  ### Margin
119
123
 
120
- ```
121
- kata-m-{n} margin: n×0.25rem
122
- kata-mx-{n} margin-left + margin-right
123
- kata-my-{n} margin-top + margin-bottom
124
- kata-mt-{n} margin-top
125
- kata-mb-{n} margin-bottom
126
- kata-ml-{n} margin-left
127
- kata-mr-{n} margin-right
128
- kata-m-auto margin: auto
129
- kata-mx-auto margin-left: auto; margin-right: auto
130
- kata-my-auto margin-top: auto; margin-bottom: auto
131
- kata-mt-auto margin-top: auto
132
- kata-mb-auto margin-bottom: auto
133
- kata-ml-auto margin-left: auto
134
- kata-mr-auto margin-right: auto
135
- ```
124
+ | Class | Property |
125
+ |---|---|
126
+ | `kata-m-{n}` | `margin: n×0.25rem` |
127
+ | `kata-mx-{n}` | `margin-left + margin-right` |
128
+ | `kata-my-{n}` | `margin-top + margin-bottom` |
129
+ | `kata-mt-{n}` | `margin-top` |
130
+ | `kata-mb-{n}` | `margin-bottom` |
131
+ | `kata-ml-{n}` | `margin-left` |
132
+ | `kata-mr-{n}` | `margin-right` |
133
+ | `kata-m-auto` | `margin: auto` |
134
+ | `kata-mx-auto` | `margin-left: auto; margin-right: auto` |
135
+ | `kata-my-auto` | `margin-top: auto; margin-bottom: auto` |
136
+ | `kata-mt-auto` | `margin-top: auto` |
137
+ | `kata-mb-auto` | `margin-bottom: auto` |
138
+ | `kata-ml-auto` | `margin-left: auto` |
139
+ | `kata-mr-auto` | `margin-right: auto` |
136
140
 
137
141
  ### Gap
138
142
 
139
- ```
140
- kata-gap-{n} gap: n×0.25rem
141
- kata-gap-x-{n} column-gap: n×0.25rem
142
- kata-gap-y-{n} row-gap: n×0.25rem
143
- ```
143
+ | Class | Property |
144
+ |---|---|
145
+ | `kata-gap-{n}` | `gap: n×0.25rem` |
146
+ | `kata-gap-x-{n}` | `column-gap: n×0.25rem` |
147
+ | `kata-gap-y-{n}` | `row-gap: n×0.25rem` |
144
148
 
145
149
  ---
146
150
 
147
- ## Width
151
+ ## Sizing
148
152
 
149
- ```
150
- kata-w-{0–96} width: n×0.25rem
151
- kata-w-auto width: auto
152
- kata-w-full width: 100%
153
- kata-w-half width: 50%
154
- kata-w-screen width: 100vw
155
- kata-w-min width: min-content
156
- kata-w-max width: max-content
157
- kata-w-fit width: fit-content
158
- ```
153
+ ### Width
159
154
 
160
- ## Height
155
+ | Class | Value |
156
+ |---|---|
157
+ | `kata-w-{0–96}` | `width: n×0.25rem` |
158
+ | `kata-w-auto` | `width: auto` |
159
+ | `kata-w-full` | `width: 100%` |
160
+ | `kata-w-half` | `width: 50%` |
161
+ | `kata-w-screen` | `width: 100vw` |
162
+ | `kata-w-min` | `width: min-content` |
163
+ | `kata-w-max` | `width: max-content` |
164
+ | `kata-w-fit` | `width: fit-content` |
161
165
 
162
- ```
163
- kata-h-{0–96} height: n×0.25rem
164
- kata-h-auto height: auto
165
- kata-h-full height: 100%
166
- kata-h-half height: 50%
167
- kata-h-screen height: 100vh
168
- kata-h-min height: min-content
169
- kata-h-max height: max-content
170
- kata-h-fit height: fit-content
171
- ```
166
+ ### Height
167
+
168
+ | Class | Value |
169
+ |---|---|
170
+ | `kata-h-{0–96}` | `height: n×0.25rem` |
171
+ | `kata-h-auto` | `height: auto` |
172
+ | `kata-h-full` | `height: 100%` |
173
+ | `kata-h-half` | `height: 50%` |
174
+ | `kata-h-screen` | `height: 100vh` |
175
+ | `kata-h-min` | `height: min-content` |
176
+ | `kata-h-max` | `height: max-content` |
177
+ | `kata-h-fit` | `height: fit-content` |
172
178
 
173
179
  ---
174
180
 
175
- ## Box sizing
181
+ ## Box Sizing
176
182
 
177
- ```
178
- kata-box-border box-sizing: border-box
179
- kata-box-content box-sizing: content-box
180
- ```
183
+ | Class | Value |
184
+ |---|---|
185
+ | `kata-box-border` | `box-sizing: border-box` |
186
+ | `kata-box-content` | `box-sizing: content-box` |
181
187
 
182
188
  ---
183
189
 
184
190
  ## Display
185
191
 
186
- ```
187
- kata-block display: block
188
- kata-inline display: inline
189
- kata-inline-block display: inline-block
190
- kata-flex display: flex
191
- kata-inline-flex display: inline-flex
192
- kata-grid display: grid
193
- kata-inline-grid display: inline-grid
194
- kata-hidden display: none
195
- kata-contents display: contents
196
- ```
192
+ | Class | Value |
193
+ |---|---|
194
+ | `kata-block` | `display: block` |
195
+ | `kata-inline` | `display: inline` |
196
+ | `kata-inline-block` | `display: inline-block` |
197
+ | `kata-flex` | `display: flex` |
198
+ | `kata-inline-flex` | `display: inline-flex` |
199
+ | `kata-grid` | `display: grid` |
200
+ | `kata-inline-grid` | `display: inline-grid` |
201
+ | `kata-hidden` | `display: none` |
202
+ | `kata-contents` | `display: contents` |
197
203
 
198
204
  ---
199
205
 
@@ -201,171 +207,171 @@ kata-contents display: contents
201
207
 
202
208
  ### Direction
203
209
 
204
- ```
205
- kata-flex-row flex-direction: row
206
- kata-flex-row-reverse flex-direction: row-reverse
207
- kata-flex-col flex-direction: column
208
- kata-flex-col-reverse flex-direction: column-reverse
209
- ```
210
+ | Class | Value |
211
+ |---|---|
212
+ | `kata-flex-row` | `flex-direction: row` |
213
+ | `kata-flex-row-reverse` | `flex-direction: row-reverse` |
214
+ | `kata-flex-col` | `flex-direction: column` |
215
+ | `kata-flex-col-reverse` | `flex-direction: column-reverse` |
210
216
 
211
217
  ### Wrap
212
218
 
213
- ```
214
- kata-flex-wrap flex-wrap: wrap
215
- kata-flex-wrap-reverse flex-wrap: wrap-reverse
216
- kata-flex-nowrap flex-wrap: nowrap
217
- ```
219
+ | Class | Value |
220
+ |---|---|
221
+ | `kata-flex-wrap` | `flex-wrap: wrap` |
222
+ | `kata-flex-wrap-reverse` | `flex-wrap: wrap-reverse` |
223
+ | `kata-flex-nowrap` | `flex-wrap: nowrap` |
218
224
 
219
- ### Justify content
225
+ ### Justify Content
220
226
 
221
- ```
222
- kata-justify-start justify-content: flex-start
223
- kata-justify-end justify-content: flex-end
224
- kata-justify-center justify-content: center
225
- kata-justify-between justify-content: space-between
226
- kata-justify-around justify-content: space-around
227
- kata-justify-evenly justify-content: space-evenly
228
- ```
227
+ | Class | Value |
228
+ |---|---|
229
+ | `kata-justify-start` | `justify-content: flex-start` |
230
+ | `kata-justify-end` | `justify-content: flex-end` |
231
+ | `kata-justify-center` | `justify-content: center` |
232
+ | `kata-justify-between` | `justify-content: space-between` |
233
+ | `kata-justify-around` | `justify-content: space-around` |
234
+ | `kata-justify-evenly` | `justify-content: space-evenly` |
229
235
 
230
- ### Align items
236
+ ### Align Items
231
237
 
232
- ```
233
- kata-items-start align-items: flex-start
234
- kata-items-end align-items: flex-end
235
- kata-items-center align-items: center
236
- kata-items-baseline align-items: baseline
237
- kata-items-stretch align-items: stretch
238
- ```
238
+ | Class | Value |
239
+ |---|---|
240
+ | `kata-items-start` | `align-items: flex-start` |
241
+ | `kata-items-end` | `align-items: flex-end` |
242
+ | `kata-items-center` | `align-items: center` |
243
+ | `kata-items-baseline` | `align-items: baseline` |
244
+ | `kata-items-stretch` | `align-items: stretch` |
239
245
 
240
246
  ---
241
247
 
242
248
  ## Position
243
249
 
244
- ```
245
- kata-static position: static
246
- kata-relative position: relative
247
- kata-absolute position: absolute
248
- kata-fixed position: fixed
249
- kata-sticky position: sticky
250
- kata-inset-0 top: 0; right: 0; bottom: 0; left: 0
251
- kata-inset-auto top: auto; right: auto; bottom: auto; left: auto
252
- kata-top-{0–96} top: n×0.25rem
253
- kata-right-{0–96} right: n×0.25rem
254
- kata-bottom-{0–96} bottom: n×0.25rem
255
- kata-left-{0–96} left: n×0.25rem
256
- kata-top-auto top: auto
257
- kata-right-auto right: auto
258
- kata-bottom-auto bottom: auto
259
- kata-left-auto left: auto
260
- ```
250
+ | Class | Value |
251
+ |---|---|
252
+ | `kata-static` | `position: static` |
253
+ | `kata-relative` | `position: relative` |
254
+ | `kata-absolute` | `position: absolute` |
255
+ | `kata-fixed` | `position: fixed` |
256
+ | `kata-sticky` | `position: sticky` |
257
+ | `kata-inset-0` | `top: 0; right: 0; bottom: 0; left: 0` |
258
+ | `kata-inset-auto` | `top: auto; right: auto; bottom: auto; left: auto` |
259
+ | `kata-top-{0–96}` | `top: n×0.25rem` |
260
+ | `kata-right-{0–96}` | `right: n×0.25rem` |
261
+ | `kata-bottom-{0–96}` | `bottom: n×0.25rem` |
262
+ | `kata-left-{0–96}` | `left: n×0.25rem` |
263
+ | `kata-top-auto` | `top: auto` |
264
+ | `kata-right-auto` | `right: auto` |
265
+ | `kata-bottom-auto` | `bottom: auto` |
266
+ | `kata-left-auto` | `left: auto` |
261
267
 
262
268
  ---
263
269
 
264
- ## Z-index
270
+ ## Z-Index
265
271
 
266
- ```
267
- kata-z-{0–96} z-index: n
268
- kata-z-auto z-index: auto
269
- ```
272
+ | Class | Value |
273
+ |---|---|
274
+ | `kata-z-{0–96}` | `z-index: n` |
275
+ | `kata-z-auto` | `z-index: auto` |
270
276
 
271
277
  ---
272
278
 
273
279
  ## Typography
274
280
 
275
- ### Font family
281
+ ### Font Family
276
282
 
277
- ```
278
- kata-font-sans font-family: ui-sans-serif, system-ui, -apple-system, sans-serif
279
- kata-font-serif font-family: ui-serif, Georgia, Cambria, serif
280
- kata-font-mono font-family: ui-monospace, Cascadia Code, Courier New, monospace
281
- ```
283
+ | Class | Stack |
284
+ |---|---|
285
+ | `kata-font-sans` | `ui-sans-serif, system-ui, -apple-system, sans-serif` |
286
+ | `kata-font-serif` | `ui-serif, Georgia, Cambria, serif` |
287
+ | `kata-font-mono` | `ui-monospace, Cascadia Code, Courier New, monospace` |
282
288
 
283
- ### Font size
289
+ ### Font Size
284
290
 
285
291
  Each size also sets a default line-height.
286
292
 
287
- ```
288
- kata-text-xs 0.75rem / line-height: 1rem
289
- kata-text-sm 0.875rem / line-height: 1.25rem
290
- kata-text-base 1rem / line-height: 1.5rem
291
- kata-text-lg 1.125rem / line-height: 1.75rem
292
- kata-text-xl 1.25rem / line-height: 1.75rem
293
- kata-text-2xl 1.5rem / line-height: 2rem
294
- kata-text-3xl 1.875rem / line-height: 2.25rem
295
- kata-text-4xl 2.25rem / line-height: 2.5rem
296
- kata-text-5xl 3rem / line-height: 1
297
- kata-text-6xl 3.75rem / line-height: 1
298
- ```
299
-
300
- ### Font weight
301
-
302
- ```
303
- kata-font-thin font-weight: 100
304
- kata-font-extralight font-weight: 200
305
- kata-font-light font-weight: 300
306
- kata-font-normal font-weight: 400
307
- kata-font-medium font-weight: 500
308
- kata-font-semibold font-weight: 600
309
- kata-font-bold font-weight: 700
310
- kata-font-extrabold font-weight: 800
311
- kata-font-black font-weight: 900
312
- ```
293
+ | Class | Font Size | Line Height |
294
+ |---|---|---|
295
+ | `kata-text-xs` | `0.75rem` | `1rem` |
296
+ | `kata-text-sm` | `0.875rem` | `1.25rem` |
297
+ | `kata-text-base` | `1rem` | `1.5rem` |
298
+ | `kata-text-lg` | `1.125rem` | `1.75rem` |
299
+ | `kata-text-xl` | `1.25rem` | `1.75rem` |
300
+ | `kata-text-2xl` | `1.5rem` | `2rem` |
301
+ | `kata-text-3xl` | `1.875rem` | `2.25rem` |
302
+ | `kata-text-4xl` | `2.25rem` | `2.5rem` |
303
+ | `kata-text-5xl` | `3rem` | `1` |
304
+ | `kata-text-6xl` | `3.75rem` | `1` |
305
+
306
+ ### Font Weight
313
307
 
314
- ### Font style
308
+ | Class | Value |
309
+ |---|---|
310
+ | `kata-font-thin` | `font-weight: 100` |
311
+ | `kata-font-extralight` | `font-weight: 200` |
312
+ | `kata-font-light` | `font-weight: 300` |
313
+ | `kata-font-normal` | `font-weight: 400` |
314
+ | `kata-font-medium` | `font-weight: 500` |
315
+ | `kata-font-semibold` | `font-weight: 600` |
316
+ | `kata-font-bold` | `font-weight: 700` |
317
+ | `kata-font-extrabold` | `font-weight: 800` |
318
+ | `kata-font-black` | `font-weight: 900` |
319
+
320
+ ### Font Style
315
321
 
316
- ```
317
- kata-italic font-style: italic
318
- kata-not-italic font-style: normal
319
- ```
322
+ | Class | Value |
323
+ |---|---|
324
+ | `kata-italic` | `font-style: italic` |
325
+ | `kata-not-italic` | `font-style: normal` |
320
326
 
321
- ### Text align
327
+ ### Text Align
322
328
 
323
- ```
324
- kata-text-left text-align: left
325
- kata-text-center text-align: center
326
- kata-text-right text-align: right
327
- kata-text-justify text-align: justify
328
- kata-text-start text-align: start
329
- kata-text-end text-align: end
330
- ```
329
+ | Class | Value |
330
+ |---|---|
331
+ | `kata-text-left` | `text-align: left` |
332
+ | `kata-text-center` | `text-align: center` |
333
+ | `kata-text-right` | `text-align: right` |
334
+ | `kata-text-justify` | `text-align: justify` |
335
+ | `kata-text-start` | `text-align: start` |
336
+ | `kata-text-end` | `text-align: end` |
331
337
 
332
- ### Line height
338
+ ### Line Height
333
339
 
334
- ```
335
- kata-leading-none line-height: 1
336
- kata-leading-tight line-height: 1.25
337
- kata-leading-snug line-height: 1.375
338
- kata-leading-normal line-height: 1.5
339
- kata-leading-relaxed line-height: 1.625
340
- kata-leading-loose line-height: 2
341
- ```
340
+ | Class | Value |
341
+ |---|---|
342
+ | `kata-leading-none` | `line-height: 1` |
343
+ | `kata-leading-tight` | `line-height: 1.25` |
344
+ | `kata-leading-snug` | `line-height: 1.375` |
345
+ | `kata-leading-normal` | `line-height: 1.5` |
346
+ | `kata-leading-relaxed` | `line-height: 1.625` |
347
+ | `kata-leading-loose` | `line-height: 2` |
342
348
 
343
- ### Letter spacing
349
+ ### Letter Spacing
344
350
 
345
- ```
346
- kata-tracking-tighter letter-spacing: -0.05em
347
- kata-tracking-tight letter-spacing: -0.025em
348
- kata-tracking-normal letter-spacing: 0em
349
- kata-tracking-wide letter-spacing: 0.025em
350
- kata-tracking-wider letter-spacing: 0.05em
351
- kata-tracking-widest letter-spacing: 0.1em
352
- ```
351
+ | Class | Value |
352
+ |---|---|
353
+ | `kata-tracking-tighter` | `letter-spacing: -0.05em` |
354
+ | `kata-tracking-tight` | `letter-spacing: -0.025em` |
355
+ | `kata-tracking-normal` | `letter-spacing: 0em` |
356
+ | `kata-tracking-wide` | `letter-spacing: 0.025em` |
357
+ | `kata-tracking-wider` | `letter-spacing: 0.05em` |
358
+ | `kata-tracking-widest` | `letter-spacing: 0.1em` |
353
359
 
354
360
  ---
355
361
 
356
- ## Text decoration
362
+ ## Text Decoration
357
363
 
358
- ```
359
- kata-underline text-decoration-line: underline
360
- kata-overline text-decoration-line: overline
361
- kata-line-through text-decoration-line: line-through
362
- kata-no-underline text-decoration: none
363
- kata-decoration-solid text-decoration-style: solid
364
- kata-decoration-dashed text-decoration-style: dashed
365
- kata-decoration-dotted text-decoration-style: dotted
366
- kata-decoration-double text-decoration-style: double
367
- kata-decoration-wavy text-decoration-style: wavy
368
- ```
364
+ | Class | Value |
365
+ |---|---|
366
+ | `kata-underline` | `text-decoration-line: underline` |
367
+ | `kata-overline` | `text-decoration-line: overline` |
368
+ | `kata-line-through` | `text-decoration-line: line-through` |
369
+ | `kata-no-underline` | `text-decoration: none` |
370
+ | `kata-decoration-solid` | `text-decoration-style: solid` |
371
+ | `kata-decoration-dashed` | `text-decoration-style: dashed` |
372
+ | `kata-decoration-dotted` | `text-decoration-style: dotted` |
373
+ | `kata-decoration-double` | `text-decoration-style: double` |
374
+ | `kata-decoration-wavy` | `text-decoration-style: wavy` |
369
375
 
370
376
  ---
371
377
 
@@ -374,48 +380,42 @@ kata-decoration-wavy text-decoration-style: wavy
374
380
  Every color key works with three prefixes:
375
381
 
376
382
  ```
377
- kata-text-{key} color
378
- kata-bg-{key} background-color
379
- kata-border-{key} border-color
383
+ kata-text-{key} → color
384
+ kata-bg-{key} → background-color
385
+ kata-border-{key} → border-color
380
386
  ```
381
387
 
382
- ### Standard palette
388
+ ### Standard Palette
383
389
 
384
390
  ```
385
391
  black, white, transparent
386
392
 
387
- gray: 50 100 200 300 400 500 600 700 800 900
388
- red: 100 300 500 700 900
389
- orange: 100 300 500 700
390
- yellow: 100 300 500 700
391
- green: 100 300 500 700 900
392
- teal: 100 300 500 700
393
- blue: 100 300 500 700 900
394
- indigo: 100 300 500 700
395
- purple: 100 300 500 700
396
- pink: 100 300 500 700
397
- ```
398
-
399
- Example:
400
-
401
- ```html
402
- <p class="kata-text-blue-500 kata-bg-gray-100 kata-border-red-300">...</p>
393
+ gray: 50 100 200 300 400 500 600 700 800 900
394
+ red: 100 300 500 700 900
395
+ orange: 100 300 500 700
396
+ yellow: 100 300 500 700
397
+ green: 100 300 500 700 900
398
+ teal: 100 300 500 700
399
+ blue: 100 300 500 700 900
400
+ indigo: 100 300 500 700
401
+ purple: 100 300 500 700
402
+ pink: 100 300 500 700
403
403
  ```
404
404
 
405
405
  ---
406
406
 
407
- ## Background helpers
407
+ ## Background Helpers
408
408
 
409
- ```
410
- kata-bg-none background: none
411
- kata-bg-cover background-size: cover
412
- kata-bg-contain background-size: contain
413
- kata-bg-center background-position: center
414
- kata-bg-top background-position: top
415
- kata-bg-bottom background-position: bottom
416
- kata-bg-no-repeat background-repeat: no-repeat
417
- kata-bg-repeat background-repeat: repeat
418
- ```
409
+ | Class | Value |
410
+ |---|---|
411
+ | `kata-bg-none` | `background: none` |
412
+ | `kata-bg-cover` | `background-size: cover` |
413
+ | `kata-bg-contain` | `background-size: contain` |
414
+ | `kata-bg-center` | `background-position: center` |
415
+ | `kata-bg-top` | `background-position: top` |
416
+ | `kata-bg-bottom` | `background-position: bottom` |
417
+ | `kata-bg-no-repeat` | `background-repeat: no-repeat` |
418
+ | `kata-bg-repeat` | `background-repeat: repeat` |
419
419
 
420
420
  ---
421
421
 
@@ -423,74 +423,72 @@ kata-bg-repeat background-repeat: repeat
423
423
 
424
424
  ### Width
425
425
 
426
- ```
427
- kata-border-0 border-width: 0
428
- kata-border border-width: 1px
429
- kata-border-2 border-width: 2px
430
- kata-border-4 border-width: 4px
431
- kata-border-8 border-width: 8px
432
- kata-border-t border-top-width: 1px
433
- kata-border-r border-right-width: 1px
434
- kata-border-b border-bottom-width: 1px
435
- kata-border-l border-left-width: 1px
436
- ```
426
+ | Class | Value |
427
+ |---|---|
428
+ | `kata-border-0` | `border-width: 0` |
429
+ | `kata-border` | `border-width: 1px` |
430
+ | `kata-border-2` | `border-width: 2px` |
431
+ | `kata-border-4` | `border-width: 4px` |
432
+ | `kata-border-8` | `border-width: 8px` |
433
+ | `kata-border-t` | `border-top-width: 1px` |
434
+ | `kata-border-r` | `border-right-width: 1px` |
435
+ | `kata-border-b` | `border-bottom-width: 1px` |
436
+ | `kata-border-l` | `border-left-width: 1px` |
437
437
 
438
438
  ### Style
439
439
 
440
- ```
441
- kata-border-solid border-style: solid
442
- kata-border-dashed border-style: dashed
443
- kata-border-dotted border-style: dotted
444
- kata-border-double border-style: double
445
- kata-border-none border-style: none
446
- ```
440
+ | Class | Value |
441
+ |---|---|
442
+ | `kata-border-solid` | `border-style: solid` |
443
+ | `kata-border-dashed` | `border-style: dashed` |
444
+ | `kata-border-dotted` | `border-style: dotted` |
445
+ | `kata-border-double` | `border-style: double` |
446
+ | `kata-border-none` | `border-style: none` |
447
447
 
448
448
  ### Radius
449
449
 
450
- ```
451
- kata-rounded-none border-radius: 0
452
- kata-rounded-sm border-radius: 0.125rem
453
- kata-rounded border-radius: 0.25rem
454
- kata-rounded-md border-radius: 0.375rem
455
- kata-rounded-lg border-radius: 0.5rem
456
- kata-rounded-xl border-radius: 0.75rem
457
- kata-rounded-2xl border-radius: 1rem
458
- kata-rounded-3xl border-radius: 1.5rem
459
- kata-rounded-full border-radius: 9999px
460
- kata-rounded-{n} border-radius: n×0.25rem
461
- ```
450
+ | Class | Value |
451
+ |---|---|
452
+ | `kata-rounded-none` | `border-radius: 0` |
453
+ | `kata-rounded-sm` | `border-radius: 0.125rem` |
454
+ | `kata-rounded` | `border-radius: 0.25rem` |
455
+ | `kata-rounded-md` | `border-radius: 0.375rem` |
456
+ | `kata-rounded-lg` | `border-radius: 0.5rem` |
457
+ | `kata-rounded-xl` | `border-radius: 0.75rem` |
458
+ | `kata-rounded-2xl` | `border-radius: 1rem` |
459
+ | `kata-rounded-3xl` | `border-radius: 1.5rem` |
460
+ | `kata-rounded-full` | `border-radius: 9999px` |
461
+ | `kata-rounded-{n}` | `border-radius: n×0.25rem` |
462
462
 
463
463
  ---
464
464
 
465
465
  ## Cursor
466
466
 
467
- ```
468
- kata-cursor-auto cursor: auto
469
- kata-cursor-default cursor: default
470
- kata-cursor-pointer cursor: pointer
471
- kata-cursor-wait cursor: wait
472
- kata-cursor-text cursor: text
473
- kata-cursor-move cursor: move
474
- kata-cursor-not-allowed cursor: not-allowed
475
- kata-cursor-grab cursor: grab
476
- ```
467
+ | Class | Value |
468
+ |---|---|
469
+ | `kata-cursor-auto` | `cursor: auto` |
470
+ | `kata-cursor-default` | `cursor: default` |
471
+ | `kata-cursor-pointer` | `cursor: pointer` |
472
+ | `kata-cursor-wait` | `cursor: wait` |
473
+ | `kata-cursor-text` | `cursor: text` |
474
+ | `kata-cursor-move` | `cursor: move` |
475
+ | `kata-cursor-not-allowed` | `cursor: not-allowed` |
476
+ | `kata-cursor-grab` | `cursor: grab` |
477
477
 
478
478
  ---
479
479
 
480
480
  ## Visibility
481
481
 
482
- ```
483
- kata-visible visibility: visible
484
- kata-invisible visibility: hidden
485
- ```
482
+ | Class | Value |
483
+ |---|---|
484
+ | `kata-visible` | `visibility: visible` |
485
+ | `kata-invisible` | `visibility: hidden` |
486
486
 
487
487
  ---
488
488
 
489
- ## Chai color scheme (ChaiCode Exclusive)
490
-
491
- Colors named after real chai and tea varieties. Built for the ChaiCode cohort.
489
+ ## Chai Color Scheme
492
490
 
493
- All chai colors follow the same three-prefix pattern:
491
+ Colors named after real chai and tea varieties. Built for the ChaiCode cohort. All chai colors follow the same three-prefix pattern:
494
492
 
495
493
  ```
496
494
  kata-bg-kata-chai-masala
@@ -498,8 +496,6 @@ kata-text-kata-chai-earl-grey
498
496
  kata-border-kata-chai-matcha
499
497
  ```
500
498
 
501
- ### The Flavours of Tea
502
-
503
499
  | Key | Hex | Tea |
504
500
  |---|---|---|
505
501
  | `kata-chai-masala` | `#8B4A2E` | Classic spiced milk tea |
@@ -558,19 +554,22 @@ kata-border-kata-chai-matcha
558
554
 
559
555
  ---
560
556
 
561
- ## Project structure
557
+ ## Project Structure
562
558
 
563
559
  ```
564
560
  kata-css/
565
- ├── src/
566
- │ ├── classMap.js class → CSS string definitions
567
- │ └── index.js engine + DOMContentLoaded listener
568
561
  ├── dist/
569
- │ ├── kata.js UMD build (CDN)
570
- │ └── kata.min.js minified UMD build
562
+ │ ├── kata.js UMD build (CDN)
563
+ │ └── kata.min.js minified UMD build
564
+ ├── docs/
565
+ │ ├── docs.html documentation page
566
+ │ └── index.html landing page
567
+ ├── src/
568
+ │ ├── classMap.js class: CSS string definitions
569
+ │ └── index.js engine + DOMContentLoaded listener
571
570
  ├── .gitignore
572
571
  ├── package.json
573
- └── package-lock.json
572
+ ├── package-lock.json
574
573
  └── README.md
575
574
  ```
576
575
 
@@ -578,4 +577,4 @@ kata-css/
578
577
 
579
578
  ## License
580
579
 
581
- MIT. Built for the [ChaiCode](https://chaicode.com) cohort.
580
+ MIT. Built for [ChaiCode](https://chaicode.com).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kata-css",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "A tailwind style CSS styling which is a hobby project",
5
5
  "homepage": "https://github.com/idreamfyrei/kata-css#readme",
6
6
  "bugs": {