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 +108 -3
- package/dist/santy-components.css +1856 -0
- package/dist/santy-core.css +1 -1
- package/dist/santy.css +1857 -1
- package/dist/santy.min.css +1 -1
- package/package.json +68 -68
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
|
|
168
|
+
### ๐จ Figma Plugin
|
|
74
169
|
|
|
75
|
-
|
|
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
|
|