santycss 1.7.0 โ†’ 2.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.
package/README.md CHANGED
@@ -16,7 +16,102 @@ Class names read like sentences. No build step. No configuration. Just link and
16
16
  </div>
17
17
  ```
18
18
 
19
- > ๐ŸŒ **[santycss.santy.in](https://santycss.santy.in)** ยท ๐Ÿ“– **[Class Reference](https://santycss.santy.in/classes.html)** ยท ๐ŸŽฌ **[Animations](https://santycss.santy.in/animations.html)** ยท ๐Ÿ“ฆ **[npm Docs](https://santycss.santy.in/docs.html)**
19
+ > ๐ŸŒ **[santycss.santy.in](https://santycss.santy.in)** ยท ๐Ÿ“– **[Class Reference](https://santycss.santy.in/classes.html)** ยท ๐ŸŒŠ **[Webflow](https://santycss.santy.in/webflow.html)** ยท ๐ŸŽฌ **[Animations](https://santycss.santy.in/animations.html)** ยท ๐Ÿ“ฆ **[npm Docs](https://santycss.santy.in/docs.html)**
20
+
21
+ ---
22
+
23
+ ## What's New in v2.0
24
+
25
+ ### ๐Ÿฆ‡ Creature Animations โ€” Premium Free
26
+
27
+ 10 hand-crafted creature animations included free in v2.0. No extra import, no paywall โ€” just add the class.
28
+
29
+ | Class | Creature | Description |
30
+ |---|---|---|
31
+ | `animate-bat-fly` | ๐Ÿฆ‡ Bat | Flies across screen with arcing path |
32
+ | `animate-bat-wings` | ๐Ÿฆ‡ Bat wings | Wing flap loop (combine with `animate-bat-fly`) |
33
+ | `animate-butterfly` | ๐Ÿฆ‹ Butterfly | Wing flap using scaleX |
34
+ | `animate-butterfly-drift` | ๐Ÿฆ‹ Butterfly drift | Drifts through the air while flapping |
35
+ | `animate-firefly` | ๐ŸŒŸ Firefly | Erratic glowing float |
36
+ | `animate-firefly-glow` | โœจ Firefly glow | Pulsing yellow glow effect |
37
+ | `animate-spider-drop` | ๐Ÿ•ท๏ธ Spider | Descends on thread and ascends |
38
+ | `animate-spider-swing` | ๐Ÿ•ท๏ธ Spider swing | Pendulum swing on thread |
39
+ | `animate-fish-swim` | ๐ŸŸ Fish | Swims with tail-wave body motion |
40
+ | `animate-jellyfish` | ๐ŸŽ Jellyfish | Pulsing bell contraction + float |
41
+ | `animate-jellyfish-tendrils` | ๐ŸŽ Tendrils | Trailing tendril sway |
42
+ | `animate-bird-flock` | ๐Ÿฆ Bird | Soaring arc with rotation |
43
+ | `animate-bird-flock-2` / `animate-bird-flock-3` | ๐Ÿฆ๐Ÿฆ Flock | Staggered offsets for formation effect |
44
+ | `animate-bee-hover` | ๐Ÿ Bee | Hovering with natural drift |
45
+ | `animate-bee-buzz` | ๐Ÿ Buzz | Rapid wing-buzz shake |
46
+ | `animate-snake-slither` | ๐Ÿ Snake | Sinusoidal slithering path |
47
+ | `animate-dragon-fire` | ๐Ÿ”ฅ Dragon fire | Fire burst expanding and fading |
48
+ | `animate-fire-flicker` | ๐Ÿ”ฅ Flicker | Rapid flame flicker |
49
+
50
+ ```html
51
+ <!-- Bat flying across -->
52
+ <span class="animate-bat-fly animate-bat-wings">๐Ÿฆ‡</span>
53
+
54
+ <!-- Butterfly flapping and drifting -->
55
+ <span class="animate-butterfly animate-butterfly-drift">๐Ÿฆ‹</span>
56
+
57
+ <!-- Firefly with glow -->
58
+ <span class="animate-firefly animate-firefly-glow">โœจ</span>
59
+
60
+ <!-- Bird flock formation (3 birds) -->
61
+ <span class="animate-bird-flock">๐Ÿฆ</span>
62
+ <span class="animate-bird-flock-2">๐Ÿฆ</span>
63
+ <span class="animate-bird-flock-3">๐Ÿฆ</span>
64
+
65
+ <!-- Dragon fire breath -->
66
+ <span class="animate-dragon-fire animate-fire-flicker">๐Ÿ”ฅ</span>
67
+ ```
68
+
69
+ > ๐ŸŽฌ **[See all creature animations live โ†’](https://santycss.santy.in/animations.html#creature-animations)**
70
+
71
+ ---
72
+
73
+ ## What's New in v1.8
74
+
75
+ ### ๐ŸŽจ SantyCSS Inspector โ€” Figma Plugin
76
+
77
+ Inspect any Figma layer and get the exact SantyCSS classes in one click.
78
+
79
+ **Download / Install:**
80
+
81
+ > ๐ŸŒ **[Download from santycss.santy.in/docs.html](https://santycss.santy.in/docs.html#figma-plugin)** โ€” full setup guide and one-click download
82
+
83
+ **Local development install:**
84
+ 1. Clone this repo โ€” the plugin lives in `figma-plugin-santycss/`
85
+ 2. Open **Figma Desktop** โ†’ Plugins โ†’ Development โ†’ **Import plugin from manifest**
86
+ 3. Select `figma-plugin-santycss/manifest.json`
87
+ 4. Select any frame/text layer โ†’ run **SantyCSS Inspector**
88
+
89
+ **What it detects:**
90
+
91
+ | Figma property | SantyCSS output |
92
+ |---|---|
93
+ | Auto-layout (horizontal) | `make-flex flex-row` |
94
+ | Auto-layout (vertical) | `make-flex flex-column` |
95
+ | Alignment | `justify-center`, `align-center`, `justify-between` |
96
+ | Gap | `gap-16`, `gap-24` |
97
+ | Padding | `add-padding-24`, `add-padding-x-16 add-padding-y-8` |
98
+ | Width / Height | `set-width-320`, `set-width-full`, `set-height-fit` |
99
+ | Corner radius | `round-corners-8`, `make-pill` |
100
+ | Stroke | `add-border-1`, `border-color-blue-500` |
101
+ | Fill / background | `background-blue-500` (nearest of 200 palette colors) |
102
+ | Text color | `color-gray-900` |
103
+ | Font size | `set-text-16` |
104
+ | Font weight | `text-bold`, `text-semibold` |
105
+ | Text align | `text-center`, `text-right` |
106
+ | Drop shadow | `add-shadow-sm` / `add-shadow-lg` |
107
+ | Opacity | `opacity-50` |
108
+ | Clips content | `overflow-hidden` |
109
+
110
+ **Plugin UI:**
111
+ - Grouped classes (Layout / Spacing / Size / Typography / Color / Border / Effects)
112
+ - Click any chip to copy that class
113
+ - **Copy All** button โ€” copies all classes as one string
114
+ - Dark mode โ€” follows Figma's theme automatically
20
115
 
21
116
  ---
22
117
 
@@ -70,9 +165,9 @@ Class names read like sentences. No build step. No configuration. Just link and
70
165
  | `.date-picker` / `.date-picker-grid` / `.date-picker-day` | Full calendar date picker |
71
166
  | `.date-picker-day.today` / `.selected` / `.in-range` | Day state modifiers |
72
167
 
73
- ### ๐ŸŽจ Figma Plugin _(coming soon)_
168
+ ### ๐ŸŽจ Figma Plugin
74
169
 
75
- A **SantyCSS Figma Plugin** is in development โ€” inspect Figma designs and get the exact SantyCSS classes that match. Inspired by the Tailwind CSS Figma plugin workflow.
170
+ The **SantyCSS Figma Plugin** is live โ€” inspect Figma designs and get the exact SantyCSS classes that match. See [What's New in v1.8](#-santycss-inspector--figma-plugin) above for full details and the download link.
76
171
 
77
172
  ---
78
173
 
@@ -268,6 +363,14 @@ The **built-in AI Generator** converts plain English โ†’ SantyCSS classes in the
268
363
 
269
364
  ---
270
365
 
366
+ ## Webflow
367
+
368
+ Use SantyCSS on **[Webflow](https://webflow.com/)** without a build step: add the CDN `<link>` in **Project settings โ†’ Custom Code โ†’ Head**, then enter utility classes in the **Style โ†’ Selector** field on any element.
369
+
370
+ - **[Webflow guide + copy-paste snippets + sidebar class index](https://santycss.santy.in/webflow.html)** โ€” head/footer code, optional split bundles, scroll-animation helper, design tokens.
371
+
372
+ ---
373
+
271
374
  ## Installation
272
375
 
273
376
  ```bash
@@ -491,10 +594,12 @@ The file `santycss.context.md` (in the GitHub repo) is a ready-made system promp
491
594
 
492
595
  - ๐ŸŒ Website: [santycss.santy.in](https://santycss.santy.in)
493
596
  - ๐Ÿ“– Class Reference: [santycss.santy.in/classes.html](https://santycss.santy.in/classes.html)
597
+ - ๐ŸŒŠ Webflow: [santycss.santy.in/webflow.html](https://santycss.santy.in/webflow.html)
494
598
  - ๐ŸŽฌ Animations: [santycss.santy.in/animations.html](https://santycss.santy.in/animations.html)
495
599
  - ๐ŸŽฎ Live Demo: [santycss.santy.in/demo.html](https://santycss.santy.in/demo.html)
496
600
  - ๐Ÿ“ฆ npm Docs: [santycss.santy.in/docs.html](https://santycss.santy.in/docs.html)
497
601
  - ๐Ÿ› Issues: [github.com/ChintuSanty/santyCSS/issues](https://github.com/ChintuSanty/santyCSS/issues)
602
+ - ๐Ÿ’ฌ Discussions: [GitHub Discussions](https://github.com/orgs/community/discussions/190269)
498
603
 
499
604
  ---
500
605