santycss 2.3.0 โ 2.5.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 +1089 -681
- package/dist/santy-components.css +375 -0
- package/dist/santy-core.css +4 -2498
- package/dist/santy-start.css +379 -2498
- package/dist/santy-variants.css +600 -0
- package/dist/santy.css +15 -1902
- package/dist/santy.min.css +1 -1
- package/dist/sitemap.xml +46 -0
- package/migrate.js +446 -0
- package/package.json +77 -71
package/README.md
CHANGED
|
@@ -1,681 +1,1089 @@
|
|
|
1
|
-
# SantyCSS
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/santycss)
|
|
4
|
-
[](https://www.npmjs.com/package/santycss)
|
|
5
|
-
[](https://github.com/ChintuSanty/santyCSS/blob/main/LICENSE)
|
|
6
|
-
[](https://www.npmjs.com/package/santycss)
|
|
7
|
-
|
|
8
|
-
**
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
</
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
|
47
|
-
|
|
48
|
-
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<span class="
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
**
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
|
177
|
-
|---|---|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
185
|
-
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
|
190
|
-
|
|
191
|
-
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
|
216
|
-
|
|
217
|
-
|
|
|
218
|
-
|
|
|
219
|
-
|
|
|
220
|
-
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
|
256
|
-
|
|
257
|
-
|
|
|
258
|
-
|
|
|
259
|
-
|
|
|
260
|
-
|
|
|
261
|
-
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<span class="icon icon-
|
|
274
|
-
<span class="icon icon-
|
|
275
|
-
<span class="icon icon-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
<!--
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
<
|
|
307
|
-
<
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
<
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
|
386
|
-
|
|
387
|
-
|
|
|
388
|
-
|
|
|
389
|
-
|
|
|
390
|
-
|
|
|
391
|
-
|
|
|
392
|
-
|
|
|
393
|
-
|
|
|
394
|
-
|
|
|
395
|
-
|
|
|
396
|
-
|
|
|
397
|
-
|
|
|
398
|
-
|
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
```
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
| `
|
|
488
|
-
| `
|
|
489
|
-
| `
|
|
490
|
-
| `
|
|
491
|
-
| `
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
```html
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
|
557
|
-
|
|
|
558
|
-
| Gap | `gap-
|
|
559
|
-
|
|
|
560
|
-
| Height | `set-
|
|
561
|
-
|
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
on
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
|
626
|
-
|
|
627
|
-
| `
|
|
628
|
-
|
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
-
|
|
669
|
-
-
|
|
670
|
-
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
1
|
+
# SantyCSS
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/santycss)
|
|
4
|
+
[](https://www.npmjs.com/package/santycss)
|
|
5
|
+
[](https://github.com/ChintuSanty/santyCSS/blob/main/LICENSE)
|
|
6
|
+
[](https://www.npmjs.com/package/santycss)
|
|
7
|
+
|
|
8
|
+
๐ฎ๐ณ **India's first utility-first CSS framework.**
|
|
9
|
+
**Plain-English class names. No build step. No configuration. Just link and use.**
|
|
10
|
+
Class names read like sentences โ `add-padding-24` instead of `p-6`. AI tools understand them instantly, no lookup table needed.
|
|
11
|
+
|
|
12
|
+
```html
|
|
13
|
+
<div class="make-flex align-center gap-16 background-blue-500 round-corners-12 add-padding-24">
|
|
14
|
+
<button class="make-button style-primary size-large shape-pill on-hover:animate-bounce">
|
|
15
|
+
Get Started
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
> ๐ **[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)**
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## What's New in v2.5.0
|
|
25
|
+
|
|
26
|
+
### ๐จ Two Portfolio CV Templates + New Framework Components
|
|
27
|
+
|
|
28
|
+
Two production-ready portfolio templates built entirely with SantyCSS โ no custom CSS.
|
|
29
|
+
|
|
30
|
+
**New Template 1: `portfolio.html` โ Snap-Scroll**
|
|
31
|
+
- **6 sections** โ About (with profile image & typewriter), Experience (timeline), Skills (animated progress bars), Projects (card grid), Hobbies, Blogs
|
|
32
|
+
- **Right-side dot navigation** (desktop) โ hoverable labels, amber active state
|
|
33
|
+
- **Hamburger + full-screen overlay** (mobile) โ closes on Esc, backdrop blur
|
|
34
|
+
- **Full-viewport snap scroll** โ each section is exactly 100vh, no full-page scroll
|
|
35
|
+
- **SantyCSS animations** โ `animate-fade-in-from-left`, `animate-zoom-in`, `animate-bounce-in`, `animate-slide-in-from-left` with staggered `animation-delay-*`
|
|
36
|
+
|
|
37
|
+
**New Template 2: `portfolio-cv.html` โ Dark Sidebar**
|
|
38
|
+
- **Fixed left sidebar** โ profile initials badge, availability indicator, cyan accent nav
|
|
39
|
+
- **6 sections** โ About, Resume (dual timeline: experience + education), Portfolio (filterable grid), Blog, Contact, Extra
|
|
40
|
+
- **Extras** โ services grid, fun facts counter (IntersectionObserver), competency tags, testimonials, contact form
|
|
41
|
+
- **Cyan accent** (`#0099e5`) on near-black backgrounds (`#0f0f0f` / `#1c1c1e`)
|
|
42
|
+
- **Responsive** โ hamburger toggles sidebar on mobile with overlay
|
|
43
|
+
|
|
44
|
+
**New CSS Classes added to `santy-components.css`:**
|
|
45
|
+
|
|
46
|
+
| Class | Description |
|
|
47
|
+
|---|---|
|
|
48
|
+
| `.portfolio-snap` | Full-page scroll-snap container (hides scrollbar) |
|
|
49
|
+
| `.snap-section` | 100vh section with snap alignment |
|
|
50
|
+
| `.snap-section-scrollable` | 100vh section with internal scroll (styled scrollbar) |
|
|
51
|
+
| `.portfolio-right-nav` | Fixed right-side dot navigation (auto-hides on mobile) |
|
|
52
|
+
| `.nav-dot` / `.nav-dot-active` | Navigation dots with tooltip labels |
|
|
53
|
+
| `.glass-card` / `.glass-card-light` | Glassmorphism cards with backdrop blur |
|
|
54
|
+
| `.avatar-ring-lg` | Large avatar with spinning conic-gradient ring |
|
|
55
|
+
| `.skill-bar-track` / `.skill-bar-fill` | Animated skill bar + colour variants |
|
|
56
|
+
| `.cv-sidebar` / `.cv-main` | Fixed left sidebar + offset main content |
|
|
57
|
+
| `.cv-nav-link` / `.cv-nav-active` | Sidebar navigation link states |
|
|
58
|
+
| `.cv-section` / `.cv-section-alt` | Alternating section backgrounds |
|
|
59
|
+
| `.timeline-dark` / `.timeline-dot-cyan` | Dark timeline with cyan dot variant |
|
|
60
|
+
| `.skill-bar-dark` / `.skill-bar-dark-fill` | Dark-mode skill bar components |
|
|
61
|
+
| `.fun-fact-card` | Fun facts counter card |
|
|
62
|
+
| `.project-card-dark` / `.blog-card-dark` | Dark project and blog cards |
|
|
63
|
+
| `.service-card-dark` / `.what-i-do-card` | Service and skill-highlight cards |
|
|
64
|
+
| `.testimonial-card-dark` | Dark testimonial card |
|
|
65
|
+
| `.input-dark` / `.textarea-dark` | Dark form input and textarea |
|
|
66
|
+
| `.btn-cyan` / `.btn-cyan-outline` | Cyan action buttons |
|
|
67
|
+
| `.pf-filter-btn` / `.pf-active` | Portfolio filter buttons |
|
|
68
|
+
| `.tag-dark` | Dark tag/pill component |
|
|
69
|
+
| `.color-brand-cyan` / `.background-brand-cyan` | Cyan brand color utilities |
|
|
70
|
+
| `.icon` + `.icon-16` โ `.icon-48` | Base class for essential UI icons + pixel size helpers |
|
|
71
|
+
| `.background-zinc-950` | Near-black `#09090b` background |
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<!-- Snap-scroll quick start -->
|
|
75
|
+
<main class="portfolio-snap">
|
|
76
|
+
<section class="snap-section" id="about">...</section>
|
|
77
|
+
<section class="snap-section-scrollable" id="experience">...</section>
|
|
78
|
+
</main>
|
|
79
|
+
<nav class="portfolio-right-nav">
|
|
80
|
+
<a class="nav-dot nav-dot-active" data-label="About" data-target="about" href="#about"></a>
|
|
81
|
+
</nav>
|
|
82
|
+
|
|
83
|
+
<!-- Sidebar CV quick start -->
|
|
84
|
+
<aside class="cv-sidebar" id="cv-sidebar">
|
|
85
|
+
<a href="#about" class="cv-nav-link cv-nav-active">About Me</a>
|
|
86
|
+
</aside>
|
|
87
|
+
<main class="cv-main">
|
|
88
|
+
<section id="about" class="cv-section">...</section>
|
|
89
|
+
</main>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## What's New in v2.4.8
|
|
95
|
+
|
|
96
|
+
### ๐ Homepage UX Improvements
|
|
97
|
+
|
|
98
|
+
Six homepage enhancements for better discoverability and developer experience:
|
|
99
|
+
|
|
100
|
+
1. **Class search widget** โ Live search with descriptions for 8,500+ classes. Type any class name and see what it does instantly.
|
|
101
|
+
2. **"What's new" announcement banner** โ Highlighted strip below the hero showing the latest release highlights.
|
|
102
|
+
3. **npm weekly downloads badge** โ Social proof badge next to the CDN snippet.
|
|
103
|
+
4. **Dark mode playground toggle** โ ๐ Dark / โ๏ธ Light button in the live preview to demo dark mode variants.
|
|
104
|
+
5. **Dismissible VS Code banner** โ โ button to close the extension promo banner (persists per session).
|
|
105
|
+
6. **Navbar & Table presets** โ Two new playground tabs showing a Navbar and a data Table built with SantyCSS.
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## What's New in v2.4.7
|
|
110
|
+
|
|
111
|
+
### ๐จ 2078 Essential UI Icons (+78 new โ final batch)
|
|
112
|
+
|
|
113
|
+
78 final icons completing the Essential UI library โ USB drives, volume controls, wallet, webcam, wifi, windows, wrench, x/close variants, and zoom.
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<span class="icon icon-volume-up-fill icon-size-xl" style="color:#3b82f6;"></span>
|
|
117
|
+
<span class="icon icon-wifi icon-size-xl" style="color:#10b981;"></span>
|
|
118
|
+
<span class="icon icon-wrench-adjustable-circle-fill icon-size-xl" style="color:#6366f1;"></span>
|
|
119
|
+
<span class="icon icon-zoom-in icon-size-xl" style="color:#f59e0b;"></span>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
**New icons (78):**
|
|
123
|
+
|
|
124
|
+
| Group | Icons |
|
|
125
|
+
|---|---|
|
|
126
|
+
| USB | `usb-drive` `usb-drive-fill` `usb-fill` `usb-micro` `usb-micro-fill` `usb-mini` `usb-mini-fill` `usb-plug` `usb-plug-fill` `usb-symbol` |
|
|
127
|
+
| Misc | `valentine` `valentine2` `vector-pen` `view-list` `view-stacked` `vignette` `vimeo` `vinyl` `vinyl-fill` `virus` `virus2` `voicemail` `vr` |
|
|
128
|
+
| Volume | `volume-down` `volume-down-fill` `volume-mute` `volume-mute-fill` `volume-off` `volume-off-fill` `volume-up` `volume-up-fill` |
|
|
129
|
+
| Wallet & Watch | `wallet` `wallet-fill` `wallet2` `watch` `water` |
|
|
130
|
+
| Camera & Comms | `webcam` `webcam-fill` `wechat` `whatsapp` |
|
|
131
|
+
| Wifi | `wifi` `wifi-1` `wifi-2` `wifi-off` |
|
|
132
|
+
| Misc | `wikipedia` `wind` `windows` `wordpress` `xbox` `yelp` `yin-yang` `youtube` |
|
|
133
|
+
| Window | `window` `window-dash` `window-desktop` `window-dock` `window-fullscreen` `window-plus` `window-sidebar` `window-split` `window-stack` `window-x` |
|
|
134
|
+
| Wrench | `wrench` `wrench-adjustable` `wrench-adjustable-circle` `wrench-adjustable-circle-fill` |
|
|
135
|
+
| Close / X | `x` `x-circle` `x-circle-fill` `x-diamond` `x-diamond-fill` `x-lg` `x-octagon` `x-octagon-fill` `x-square` `x-square-fill` |
|
|
136
|
+
| Zoom | `zoom-in` `zoom-out` |
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## What's New in v2.4.6
|
|
141
|
+
|
|
142
|
+
### ๐จ 2000 Essential UI Icons (1000 new in this release)
|
|
143
|
+
|
|
144
|
+
1000 new icons covering file types, folders, filters, gears, globes, hearts, houses, journals, media controls, people, phones, shields, signs, terminals, trash, and much more.
|
|
145
|
+
|
|
146
|
+
```html
|
|
147
|
+
<span class="icon icon-heart-pulse-fill icon-size-xl" style="color:#ef4444;"></span>
|
|
148
|
+
<span class="icon icon-person-fill-check icon-size-xl" style="color:#10b981;"></span>
|
|
149
|
+
<span class="icon icon-shield-fill-check icon-size-xl" style="color:#3b82f6;"></span>
|
|
150
|
+
<span class="icon icon-rocket-takeoff-fill icon-size-xl" style="color:#8b5cf6;"></span>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
**New icons include:** file-ruled, file-slides, file-spreadsheet, file-text, file-word, file-x, file-zip, files, files-alt, filetype-aac, filetype-ai, filetype-bmp, filetype-cs, filetype-css, filetype-csv, filetype-doc, filetype-docx, filetype-exe, filetype-gif, filetype-heic, filetype-html, filetype-java, filetype-jpg, filetype-js, filetype-json, filetype-jsx, filetype-key, filetype-m4p, filetype-md, filetype-mdx, filetype-mov, filetype-mp3, filetype-mp4, filetype-otf, filetype-pdf, filetype-php, filetype-png, filetype-ppt, filetype-pptx, filetype-psd, filetype-py, filetype-raw, filetype-rb, filetype-sass, filetype-scss, filetype-sh, filetype-sql, filetype-svg, filetype-tiff, filetype-tsx, filetype-ttf, filetype-txt, filetype-wav, filetype-woff, filetype-xls, filetype-xlsx, filetype-xml, filetype-yml, film, filter, fingerprint, fire, flag, flask, flask-florence, floppy, floppy2, flower1, flower2, flower3, folder, folder-check, folder-fill, folder-minus, folder-plus, folder-symlink, folder-x, folder2, folder2-open, fonts, fork-knife, forward, fuel-pump, fullscreen, funnel, gear, gear-fill, gear-wide, gear-wide-connected, gem, gender-ambiguous, gender-female, gender-male, gender-neuter, gender-trans, geo, geo-alt, gift, git, github, gitlab, globe, globe-americas, globe-asia-australia, globe-central-south-asia, globe-europe-africa, globe2, google, google-play, gpu-card, graph-down, graph-up, grid, grip-horizontal, grip-vertical, h-circle, h-square, hammer, hand-index, hand-index-thumb, hand-thumbs-down, hand-thumbs-up, handbag, hash, hdd, hdd-network, hdd-rack, hdd-stack, hdmi, headphones, headset, headset-vr, heart, heart-arrow, heart-pulse, heartbreak, hearts, heptagon, hexagon, highlighter, highlights, hospital, hourglass, house (all variants), houses, hr, hurricane, hypnotize, image, images, inbox, inboxes, incognito, indent, infinity, info, input-cursor, instagram, javascript, journal (all variants), joystick, justify, kanban, key, keyboard, ladder, lamp, laptop, layer-backward, layer-forward, layers, layout-sidebar, layout-split, layout-text-sidebar, layout-text-window, layout-three-columns, layout-wtf, leaf, life-preserver, lightbulb, lightning, link, linkedin, list (all variants), lock, luggage, lungs, magic, magnet, mailbox, map, markdown, mask, mastodon, megaphone, memory, menu-app, menu-button, mic, microsoft, microsoft-teams, modem, moon, mortarboard, motherboard, mouse (all variants), music-note, newspaper, nintendo-switch, node-minus, node-plus, nut, nvidia, nvme, octagon, openai, palette, paperclip, pass, passport, patch-check, patch-exclamation, patch-minus, patch-plus, patch-question, pause, paypal, pc, pci-card, peace, pen, pencil, pentagon, people, person (all 50+ variants), phone, pie-chart, piggy-bank, pin, pip, play, plug, plus, postage, postcard, power, printer, projector, puzzle, qr-code, question, quote, r-circle, radar, radioactive, rainbow, receipt, reception (0-4), record, recycle, reddit, repeat, reply, rewind, robot, rocket, router, rss, rulers, safe, save, scissors, search, send (all variants), server, share, shield (all variants), sign (all road signs), sim, skip-backward, skip-end, skip-forward, skip-start, skype, slack, slash, sliders, smartwatch, snapchat, snow, sort-alpha, sort-down, sort-numeric, sort-up, soundwave, speaker, speedometer, spotify, square, star, stickies, sticky, stop, stopwatch, strava, stripe, suit (club/diamond/heart/spade), suitcase, sun, sunrise, sunset, table, tablet, tag, taxi-front, telegram, telephone (all variants), terminal, text-center, text-indent, textarea, thermometer, threads, three-dots, thunderbolt, ticket, tiktok, toggle, tools, tornado, train-freight-front, train-front, train-lightrail-front, translate, transparency, trash (all variants), tree, trello, triangle, trophy, truck, tv, twitch, twitter, twitter-x, type (all heading variants), typescript, ubuntu, ui-checks, ui-radios, umbrella, union, unity, universal-access, unlock, upc, upload, usb, usb-c, and 50+ more fill variants.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## What's New in v2.4.5
|
|
158
|
+
|
|
159
|
+
### ๐จ 1000 Essential UI Icons + Scrollable Grid + Sub-filters
|
|
160
|
+
|
|
161
|
+
600 new icons added โ calendars (all variants), camera & media, chat & messaging, cloud & weather, clipboard, checks & chevrons, database & devices, emoji, envelopes, files & documents, and more.
|
|
162
|
+
|
|
163
|
+
The icon browser now features:
|
|
164
|
+
- **Scrollable Essential UI grid** โ browse 1000 icons in a fixed-height scrollable area
|
|
165
|
+
- **Sub-filters** โ filter by category: Numbers, Arrows, Calendar, Camera, Chat, Cloud, Database, Emoji, Files, Shapes, Shopping
|
|
166
|
+
|
|
167
|
+
```html
|
|
168
|
+
<span class="icon icon-chat-left-text-fill icon-size-xl" style="color:#6366f1;"></span>
|
|
169
|
+
<span class="icon icon-cloud-lightning-rain-fill icon-size-xl" style="color:#0ea5e9;"></span>
|
|
170
|
+
<span class="icon icon-file-earmark-pdf-fill icon-size-xl" style="color:#ef4444;"></span>
|
|
171
|
+
<span class="icon icon-emoji-laughing-fill icon-size-xl" style="color:#f59e0b;"></span>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
**New icons (600):**
|
|
175
|
+
|
|
176
|
+
| Group | Icons |
|
|
177
|
+
|---|---|
|
|
178
|
+
| Calendar variants | `calendar2-fill` `calendar2-heart` `calendar2-minus` `calendar2-month` `calendar2-plus` `calendar2-range` `calendar2-week` `calendar2-x` `calendar3` `calendar3-event` `calendar3-fill` `calendar3-range` `calendar3-week` `calendar4` `calendar4-event` `calendar4-range` `calendar4-week` (+ fill variants) |
|
|
179
|
+
| Camera & Media | `camera` `camera-fill` `camera-reels` `camera-video` `camera-video-off` `camera2` `cassette` `cast` |
|
|
180
|
+
| Cart & Shopping | `cart` `cart-check` `cart-dash` `cart-fill` `cart-plus` `cart-x` `cart2` `cart3` `cart4` |
|
|
181
|
+
| Chat & Messaging | `chat` `chat-dots` `chat-fill` `chat-heart` `chat-left` `chat-left-dots` `chat-left-fill` `chat-left-heart` `chat-left-quote` `chat-left-text` `chat-quote` `chat-right` `chat-right-dots` `chat-right-fill` `chat-right-heart` `chat-right-quote` `chat-right-text` `chat-square` `chat-square-dots` `chat-square-fill` `chat-square-heart` `chat-square-quote` `chat-square-text` `chat-text` (+ fill variants) |
|
|
182
|
+
| Check & Shapes | `check` `check-all` `check-circle` `check-lg` `check-square` `check2` `check2-all` `check2-circle` `check2-square` |
|
|
183
|
+
| Chevrons | `chevron-bar-contract` `chevron-bar-down` `chevron-bar-expand` `chevron-bar-left` `chevron-bar-right` `chevron-bar-up` `chevron-compact-down` `chevron-compact-left` `chevron-compact-right` `chevron-compact-up` `chevron-contract` `chevron-double-down` `chevron-double-left` `chevron-double-right` `chevron-double-up` `chevron-down` `chevron-expand` `chevron-left` `chevron-right` `chevron-up` |
|
|
184
|
+
| Clipboard | `clipboard` `clipboard-check` `clipboard-data` `clipboard-fill` `clipboard-heart` `clipboard-minus` `clipboard-plus` `clipboard-pulse` `clipboard-x` `clipboard2` (+ all clipboard2 variants, + fill variants) |
|
|
185
|
+
| Clock | `clock` `clock-fill` `clock-history` |
|
|
186
|
+
| Cloud & Weather | `cloud` `cloud-arrow-down` `cloud-arrow-up` `cloud-check` `cloud-download` `cloud-drizzle` `cloud-fill` `cloud-fog` `cloud-fog2` `cloud-hail` `cloud-haze` `cloud-haze2` `cloud-lightning` `cloud-lightning-rain` `cloud-minus` `cloud-moon` `cloud-plus` `cloud-rain` `cloud-rain-heavy` `cloud-slash` `cloud-sleet` `cloud-snow` `cloud-sun` `cloud-upload` `clouds` `cloudy` (+ fill variants) |
|
|
187
|
+
| Currency | `currency-bitcoin` `currency-dollar` `currency-euro` `currency-exchange` `currency-pound` `currency-rupee` `currency-yen` |
|
|
188
|
+
| Database & Device | `database` `database-add` `database-check` `database-dash` `database-down` `database-exclamation` `database-fill` (+ all database-fill-* variants) `device-hdd` `device-ssd` |
|
|
189
|
+
| Emoji | `emoji-angry` `emoji-astonished` `emoji-dizzy` `emoji-expressionless` `emoji-frown` `emoji-grimace` `emoji-grin` `emoji-heart-eyes` `emoji-kiss` `emoji-laughing` `emoji-neutral` `emoji-smile` `emoji-smile-upside-down` `emoji-sunglasses` `emoji-surprise` `emoji-tear` `emoji-wink` (+ fill variants) |
|
|
190
|
+
| Envelope | `envelope` `envelope-arrow-down` `envelope-arrow-up` `envelope-at` `envelope-check` `envelope-dash` `envelope-exclamation` `envelope-fill` `envelope-heart` `envelope-open` `envelope-open-heart` `envelope-paper` `envelope-paper-heart` `envelope-plus` `envelope-slash` `envelope-x` (+ fill variants) |
|
|
191
|
+
| File docs | `file` `file-arrow-down` `file-arrow-up` `file-bar-graph` `file-binary` `file-break` `file-check` `file-code` `file-diff` `file-earmark` (+ all earmark variants) `file-easel` `file-excel` `file-fill` `file-font` `file-image` `file-lock` `file-lock2` `file-medical` `file-minus` `file-music` `file-pdf` `file-person` `file-play` `file-plus` `file-post` `file-ppt` `file-richtext` (+ fill variants) |
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
## What's New in v2.4.4
|
|
196
|
+
|
|
197
|
+
### ๐ฏ 400 Essential UI Icons (+100 new)
|
|
198
|
+
|
|
199
|
+
100 more icons โ boxes, buildings, browsers, calendars, brightness controls and more.
|
|
200
|
+
|
|
201
|
+
```html
|
|
202
|
+
<span class="icon icon-building-fill icon-size-2x" style="color:#6366f1;"></span>
|
|
203
|
+
<span class="icon icon-calendar-heart-fill icon-size-xl" style="color:#ec4899;"></span>
|
|
204
|
+
<span class="icon icon-briefcase-fill icon-size-xl" style="color:#3b82f6;"></span>
|
|
205
|
+
<span class="icon icon-brightness-high-fill icon-size-xl" style="color:#f59e0b;"></span>
|
|
206
|
+
<span class="icon icon-bug-fill icon-size-xl" style="color:#ef4444;"></span>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
**New icons (100):**
|
|
210
|
+
|
|
211
|
+
| Group | Icons |
|
|
212
|
+
|---|---|
|
|
213
|
+
| Boxes | `box2-fill` `box2-heart` `box2-heart-fill` `boxes` |
|
|
214
|
+
| Dev | `braces` `braces-asterisk` `bricks` `bug` `bug-fill` |
|
|
215
|
+
| Work | `briefcase` `briefcase-fill` `bullseye` |
|
|
216
|
+
| Display | `brightness-alt-high` `brightness-alt-high-fill` `brightness-alt-low` `brightness-alt-low-fill` `brightness-high` `brightness-high-fill` `brightness-low` `brightness-low-fill` `brilliance` |
|
|
217
|
+
| Media | `broadcast` `broadcast-pin` |
|
|
218
|
+
| Browsers | `browser-chrome` `browser-edge` `browser-firefox` `browser-safari` |
|
|
219
|
+
| Design | `brush` `brush-fill` `bucket` `bucket-fill` |
|
|
220
|
+
| Buildings | `building` `building-add` `building-check` `building-dash` `building-down` `building-exclamation` `building-fill` `building-fill-add` `building-fill-check` `building-fill-dash` `building-fill-down` `building-fill-exclamation` `building-fill-gear` `building-fill-lock` `building-fill-slash` `building-fill-up` `building-fill-x` `building-gear` `building-lock` `building-slash` `building-up` `building-x` `buildings` `buildings-fill` |
|
|
221
|
+
| Transport | `bus-front` `bus-front-fill` |
|
|
222
|
+
| Legal | `c-circle` `c-circle-fill` `c-square` `c-square-fill` |
|
|
223
|
+
| Food | `cake` `cake-fill` `cake2` `cake2-fill` |
|
|
224
|
+
| Tools | `calculator` `calculator-fill` |
|
|
225
|
+
| Calendars | `calendar` `calendar-check` `calendar-check-fill` `calendar-date` `calendar-date-fill` `calendar-day` `calendar-day-fill` `calendar-event` `calendar-event-fill` `calendar-fill` `calendar-heart` `calendar-heart-fill` `calendar-minus` `calendar-minus-fill` `calendar-month` `calendar-month-fill` `calendar-plus` `calendar-plus-fill` `calendar-range` `calendar-range-fill` `calendar-week` `calendar-week-fill` `calendar-x` `calendar-x-fill` `calendar2` `calendar2-check` `calendar2-check-fill` `calendar2-date` `calendar2-date-fill` `calendar2-day` `calendar2-day-fill` `calendar2-event` `calendar2-event-fill` |
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## What's New in v2.4.3
|
|
230
|
+
|
|
231
|
+
### ๐ฏ 300 Essential UI Icons (+100 new)
|
|
232
|
+
|
|
233
|
+
100 more icons added โ ban/block, charts, baskets, battery, books, bookmarks, boxes, borders and more.
|
|
234
|
+
|
|
235
|
+
```html
|
|
236
|
+
<span class="icon icon-ban-fill icon-size-xl" style="color:#ef4444;"></span>
|
|
237
|
+
<span class="icon icon-bar-chart-fill icon-size-2x" style="color:#3b82f6;"></span>
|
|
238
|
+
<span class="icon icon-bookmark-heart-fill icon-size-xl" style="color:#ec4899;"></span>
|
|
239
|
+
<span class="icon icon-box-arrow-up-right icon-size-lg"></span>
|
|
240
|
+
<span class="icon icon-battery-full icon-size-xl" style="color:#22c55e;"></span>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
**New icons (100):**
|
|
244
|
+
|
|
245
|
+
| Group | Icons |
|
|
246
|
+
|---|---|
|
|
247
|
+
| Block / Medical | `ban` `ban-fill` `bandaid` `bandaid-fill` |
|
|
248
|
+
| Finance | `bank` `bank2` `bar-chart` `bar-chart-fill` `bar-chart-line` `bar-chart-line-fill` `bar-chart-steps` |
|
|
249
|
+
| Shopping | `basket` `basket-fill` `basket2` `basket2-fill` `basket3` `basket3-fill` |
|
|
250
|
+
| Device | `battery` `battery-charging` `battery-full` `battery-half` `battery-low` |
|
|
251
|
+
| Science / Social | `beaker` `beaker-fill` `behance` `bing` `bluesky` `bluetooth` |
|
|
252
|
+
| Notifications | `bell` `bell-fill` `bell-slash` `bell-slash-fill` |
|
|
253
|
+
| Design | `bezier` `bezier2` `binoculars` `binoculars-fill` `bounding-box` `bounding-box-circles` |
|
|
254
|
+
| Transport | `bicycle` |
|
|
255
|
+
| Text | `blockquote-left` `blockquote-right` `body-text` |
|
|
256
|
+
| Books | `book` `book-fill` `book-half` `bookmarks` `bookmarks-fill` `bookshelf` |
|
|
257
|
+
| Bookmarks | `bookmark` `bookmark-check` `bookmark-check-fill` `bookmark-dash` `bookmark-dash-fill` `bookmark-fill` `bookmark-heart` `bookmark-heart-fill` `bookmark-plus` `bookmark-plus-fill` `bookmark-star` `bookmark-star-fill` `bookmark-x` `bookmark-x-fill` |
|
|
258
|
+
| Media | `boombox` `boombox-fill` |
|
|
259
|
+
| Framework | `bootstrap` `bootstrap-fill` `bootstrap-reboot` |
|
|
260
|
+
| Border | `border` `border-all` `border-bottom` `border-center` `border-inner` `border-left` `border-middle` `border-outer` `border-right` `border-style` `border-top` `border-width` |
|
|
261
|
+
| Boxes | `box` `box-arrow-down` `box-arrow-down-left` `box-arrow-down-right` `box-arrow-in-down` `box-arrow-in-down-left` `box-arrow-in-down-right` `box-arrow-in-left` `box-arrow-in-right` `box-arrow-in-up` `box-arrow-in-up-left` `box-arrow-in-up-right` `box-arrow-left` `box-arrow-right` `box-arrow-up` `box-arrow-up-left` `box-arrow-up-right` `box-fill` `box-seam` `box-seam-fill` `box2` |
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
## What's New in v2.4.2
|
|
266
|
+
|
|
267
|
+
### ๐ฏ 200 Essential UI Icons (+100 new)
|
|
268
|
+
|
|
269
|
+
Another 100 icons added to the **Essential UI** category โ arrows (all directions, variants), aspect ratio, badges, bags, balloons, backpacks and more.
|
|
270
|
+
|
|
271
|
+
```html
|
|
272
|
+
<span class="icon icon-arrow-repeat icon-size-xl" style="color:#3b82f6;"></span>
|
|
273
|
+
<span class="icon icon-arrows-fullscreen icon-size-lg"></span>
|
|
274
|
+
<span class="icon icon-bag-heart-fill icon-size-2x" style="color:#ef4444;"></span>
|
|
275
|
+
<span class="icon icon-award-fill icon-size-2x" style="color:#f59e0b;"></span>
|
|
276
|
+
<span class="icon icon-balloon-heart icon-size-xl" style="color:#ec4899;"></span>
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
**New icons (100):**
|
|
280
|
+
|
|
281
|
+
| Group | Icons |
|
|
282
|
+
|---|---|
|
|
283
|
+
| Arrows (more) | `arrow-left-right` `arrow-left-short` `arrow-left-square` `arrow-left-square-fill` `arrow-repeat` `arrow-return-left` `arrow-return-right` `arrow-right` `arrow-right-circle` `arrow-right-circle-fill` `arrow-right-short` `arrow-right-square` `arrow-right-square-fill` `arrow-through-heart` `arrow-through-heart-fill` `arrow-up` `arrow-up-circle` `arrow-up-circle-fill` `arrow-up-left` `arrow-up-left-circle` `arrow-up-left-circle-fill` `arrow-up-left-square` `arrow-up-left-square-fill` `arrow-up-right` `arrow-up-right-circle` `arrow-up-right-circle-fill` `arrow-up-right-square` `arrow-up-right-square-fill` `arrow-up-short` `arrow-up-square` `arrow-up-square-fill` |
|
|
284
|
+
| Arrows (set) | `arrows` `arrows-angle-contract` `arrows-angle-expand` `arrows-collapse` `arrows-collapse-vertical` `arrows-expand` `arrows-expand-vertical` `arrows-fullscreen` `arrows-move` `arrows-vertical` |
|
|
285
|
+
| UI | `aspect-ratio` `aspect-ratio-fill` `asterisk` `at` `award` `award-fill` `back` `backspace` `backspace-fill` `backspace-reverse` `backspace-reverse-fill` |
|
|
286
|
+
| Bags & Packs | `backpack` `backpack-fill` `backpack2` `backpack2-fill` `backpack3` `backpack3-fill` `backpack4` `backpack4-fill` `bag` `bag-check` `bag-check-fill` `bag-dash` `bag-dash-fill` `bag-fill` `bag-heart` `bag-heart-fill` `bag-plus` `bag-plus-fill` `bag-x` `bag-x-fill` |
|
|
287
|
+
| Badges | `badge-3d` `badge-3d-fill` `badge-4k` `badge-4k-fill` `badge-8k` `badge-8k-fill` `badge-ad` `badge-ad-fill` `badge-ar` `badge-ar-fill` `badge-cc` `badge-cc-fill` `badge-hd` `badge-hd-fill` `badge-sd` `badge-sd-fill` `badge-tm` `badge-tm-fill` `badge-vo` `badge-vo-fill` `badge-vr` `badge-vr-fill` `badge-wc` `badge-wc-fill` |
|
|
288
|
+
| Fun | `balloon` `balloon-fill` `balloon-heart` `balloon-heart-fill` |
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
## What's New in v2.4.1
|
|
293
|
+
|
|
294
|
+
### ๐ฏ 100 Essential UI Icons
|
|
295
|
+
|
|
296
|
+
New category โ **Essential UI** โ adds 100 carefully selected icons to `santy-icons.css`. Use them with the same `.icon` system.
|
|
297
|
+
|
|
298
|
+
```html
|
|
299
|
+
<link rel="stylesheet" href="santy-icons.css">
|
|
300
|
+
|
|
301
|
+
<!-- Number badges -->
|
|
302
|
+
<span class="icon icon-0-circle"></span>
|
|
303
|
+
<span class="icon icon-5-circle-fill icon-size-lg" style="color:#3b82f6;"></span>
|
|
304
|
+
|
|
305
|
+
<!-- Arrows -->
|
|
306
|
+
<span class="icon icon-arrow-down"></span>
|
|
307
|
+
<span class="icon icon-arrow-clockwise icon-size-xl" style="color:#22c55e;"></span>
|
|
308
|
+
|
|
309
|
+
<!-- UI chrome -->
|
|
310
|
+
<span class="icon icon-activity"></span>
|
|
311
|
+
<span class="icon icon-alarm icon-size-2x" style="color:#ef4444;"></span>
|
|
312
|
+
<span class="icon icon-archive-fill"></span>
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
**Full icon list (100):**
|
|
316
|
+
|
|
317
|
+
| Group | Icons |
|
|
318
|
+
|---|---|
|
|
319
|
+
| Numbers | `0-circle` `0-circle-fill` `0-square` `0-square-fill` `1-circle` `1-circle-fill` `1-square` `1-square-fill` `123` `2-circle` `2-circle-fill` `2-square` `2-square-fill` `3-circle` `3-circle-fill` `3-square` `3-square-fill` `4-circle` `4-circle-fill` `4-square` `4-square-fill` `5-circle` `5-circle-fill` `5-square` `5-square-fill` `6-circle` `6-circle-fill` `6-square` `6-square-fill` `7-circle` `7-circle-fill` `7-square` `7-square-fill` `8-circle` `8-circle-fill` `8-square` `8-square-fill` `9-circle` `9-circle-fill` `9-square` `9-square-fill` |
|
|
320
|
+
| Activity & Travel | `activity` `airplane` `airplane-engines` `airplane-engines-fill` `airplane-fill` `alarm` `alarm-fill` |
|
|
321
|
+
| Brands | `alexa` `alipay` `amazon` `amd` `android` `android2` `anthropic` `apple` `apple-music` `app` `app-indicator` |
|
|
322
|
+
| Alignment | `align-bottom` `align-center` `align-end` `align-middle` `align-start` `align-top` |
|
|
323
|
+
| Text | `alphabet` `alphabet-uppercase` `alt` |
|
|
324
|
+
| Files | `archive` `archive-fill` |
|
|
325
|
+
| Arrows | `arrow-90deg-down` `arrow-90deg-left` `arrow-90deg-right` `arrow-90deg-up` `arrow-bar-down` `arrow-bar-left` `arrow-bar-right` `arrow-bar-up` `arrow-clockwise` `arrow-counterclockwise` `arrow-down` `arrow-down-circle` `arrow-down-circle-fill` `arrow-down-left` `arrow-down-left-circle` `arrow-down-left-circle-fill` `arrow-down-left-square` `arrow-down-left-square-fill` `arrow-down-right` `arrow-down-right-circle` `arrow-down-right-circle-fill` `arrow-down-right-square` `arrow-down-right-square-fill` `arrow-down-short` `arrow-down-square` `arrow-down-square-fill` `arrow-down-up` `arrow-left` `arrow-left-circle` `arrow-left-circle-fill` |
|
|
326
|
+
|
|
327
|
+
> ๐จ **[Icon Browser](https://santycss.santy.in/icons.html)** โ filter by "Essential UI" to browse all 100
|
|
328
|
+
|
|
329
|
+
---
|
|
330
|
+
|
|
331
|
+
## What's New in v2.4.0
|
|
332
|
+
|
|
333
|
+
### โก Migrate from Tailwind in One Command
|
|
334
|
+
|
|
335
|
+
Already using Tailwind CSS? Switch your entire project โ HTML, JSX, TSX, Vue, Svelte โ without rewriting a single file:
|
|
336
|
+
|
|
337
|
+
```bash
|
|
338
|
+
npx santycss migrate --input=src/
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
**Options:**
|
|
342
|
+
```bash
|
|
343
|
+
npx santycss migrate --input=src/ # convert all files in src/
|
|
344
|
+
npx santycss migrate --file=index.html # single file
|
|
345
|
+
npx santycss migrate --dry-run # preview only, no writes
|
|
346
|
+
npx santycss migrate --dry-run --report # also list unmapped classes
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
**What gets converted:**
|
|
350
|
+
|
|
351
|
+
| Tailwind | SantyCSS |
|
|
352
|
+
|---|---|
|
|
353
|
+
| `flex items-center gap-4` | `make-flex align-center gap-16` |
|
|
354
|
+
| `p-6 mt-4 mb-8` | `add-padding-24 add-margin-top-16 add-margin-bottom-32` |
|
|
355
|
+
| `text-lg font-semibold` | `set-text-18 text-semibold` |
|
|
356
|
+
| `bg-blue-500 text-white rounded-lg shadow-md` | `background-blue-500 color-white make-rounded-lg add-shadow-md` |
|
|
357
|
+
| `hidden md:block` | `make-hidden tablet:make-block` |
|
|
358
|
+
| `grid grid-cols-3 gap-6` | `make-grid grid-cols-3 gap-24` |
|
|
359
|
+
|
|
360
|
+
Covers 150+ Tailwind class names across flex/grid, spacing, typography, colors, borders, shadows, overflow, position, z-index, transitions, and more.
|
|
361
|
+
|
|
362
|
+
---
|
|
363
|
+
|
|
364
|
+
### ๐ Dark Mode Semantic Token System
|
|
365
|
+
|
|
366
|
+
New CSS-variable token layer โ add `data-theme="dark"` to any element and every utility class adapts automatically. No duplicate classes, no `dark:` prefixes for common patterns:
|
|
367
|
+
|
|
368
|
+
```html
|
|
369
|
+
<!-- Dark theme -->
|
|
370
|
+
<html data-theme="dark">
|
|
371
|
+
|
|
372
|
+
<!-- Follow OS preference -->
|
|
373
|
+
<html class="theme-auto">
|
|
374
|
+
|
|
375
|
+
<!-- Semantic utility classes โ adapt in both themes -->
|
|
376
|
+
<div class="bg-surface text-base">
|
|
377
|
+
<p class="text-muted">Subtitle</p>
|
|
378
|
+
<span class="text-accent">Highlight</span>
|
|
379
|
+
<hr class="border-base">
|
|
380
|
+
</div>
|
|
381
|
+
```
|
|
382
|
+
|
|
383
|
+
**New semantic token classes:**
|
|
384
|
+
|
|
385
|
+
| Class | Light | Dark |
|
|
386
|
+
|---|---|---|
|
|
387
|
+
| `bg-base` | `#ffffff` | `#0f172a` |
|
|
388
|
+
| `bg-subtle` | `#f9fafb` | `#1e293b` |
|
|
389
|
+
| `bg-surface` | `#ffffff` | `#1e293b` |
|
|
390
|
+
| `bg-elevated` | `#ffffff` | `#334155` |
|
|
391
|
+
| `text-base` | `#111827` | `#f1f5f9` |
|
|
392
|
+
| `text-muted` | `#6b7280` | `#94a3b8` |
|
|
393
|
+
| `text-subtle` | `#9ca3af` | `#64748b` |
|
|
394
|
+
| `text-accent` | `#3b82f6` | `#60a5fa` |
|
|
395
|
+
| `bg-accent` | `#3b82f6` | `#60a5fa` |
|
|
396
|
+
| `bg-accent-light` | `rgba(59,130,246,.12)` | `rgba(96,165,250,.15)` |
|
|
397
|
+
| `border-base` | `#e5e7eb` | `#334155` |
|
|
398
|
+
| `border-strong` | `#d1d5db` | `#475569` |
|
|
399
|
+
|
|
400
|
+
**Override tokens in your own CSS:**
|
|
401
|
+
```css
|
|
402
|
+
:root {
|
|
403
|
+
--santy-accent: #7c3aed; /* brand purple */
|
|
404
|
+
--santy-accent-light: rgba(124,58,237,.12);
|
|
405
|
+
}
|
|
406
|
+
[data-theme="dark"] {
|
|
407
|
+
--santy-accent: #a78bfa;
|
|
408
|
+
}
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
---
|
|
412
|
+
|
|
413
|
+
### ๐ค AI-First โ Why SantyCSS is Better for AI
|
|
414
|
+
|
|
415
|
+
SantyCSS class names **are** the documentation. `add-bg-blue make-rounded` tells an LLM exactly what it's doing. `bg-blue-500 rounded-lg` requires a lookup table.
|
|
416
|
+
|
|
417
|
+
```
|
|
418
|
+
Tailwind: bg-blue-500 rounded-lg shadow-md p-6 text-white font-semibold
|
|
419
|
+
SantyCSS: background-blue-500 make-rounded-lg add-shadow-md add-padding-24 color-white text-semibold
|
|
420
|
+
```
|
|
421
|
+
|
|
422
|
+
The SantyCSS version is self-documenting โ any developer (or AI) reading it knows exactly what CSS is applied. No docs needed.
|
|
423
|
+
|
|
424
|
+
**Use the context file** โ paste `santycss.context.md` into Claude, GPT-4, or Cursor's system prompt:
|
|
425
|
+
```
|
|
426
|
+
Paste santycss.context.md โ AI writes SantyCSS instead of Tailwind, every time
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
---
|
|
430
|
+
|
|
431
|
+
## What's New in v2.0
|
|
432
|
+
|
|
433
|
+
### ๐ฆ Creature Animations โ Premium Free
|
|
434
|
+
|
|
435
|
+
10 hand-crafted creature animations included free in v2.0. No extra import, no paywall โ just add the class.
|
|
436
|
+
|
|
437
|
+
| Class | Creature | Description |
|
|
438
|
+
|---|---|---|
|
|
439
|
+
| `animate-bat-fly` | ๐ฆ Bat | Flies across screen with arcing path |
|
|
440
|
+
| `animate-bat-wings` | ๐ฆ Bat wings | Wing flap loop (combine with `animate-bat-fly`) |
|
|
441
|
+
| `animate-butterfly` | ๐ฆ Butterfly | Wing flap using scaleX |
|
|
442
|
+
| `animate-butterfly-drift` | ๐ฆ Butterfly drift | Drifts through the air while flapping |
|
|
443
|
+
| `animate-firefly` | ๐ Firefly | Erratic glowing float |
|
|
444
|
+
| `animate-firefly-glow` | โจ Firefly glow | Pulsing yellow glow effect |
|
|
445
|
+
| `animate-spider-drop` | ๐ท๏ธ Spider | Descends on thread and ascends |
|
|
446
|
+
| `animate-spider-swing` | ๐ท๏ธ Spider swing | Pendulum swing on thread |
|
|
447
|
+
| `animate-fish-swim` | ๐ Fish | Swims with tail-wave body motion |
|
|
448
|
+
| `animate-jellyfish` | ๐ Jellyfish | Pulsing bell contraction + float |
|
|
449
|
+
| `animate-jellyfish-tendrils` | ๐ Tendrils | Trailing tendril sway |
|
|
450
|
+
| `animate-bird-flock` | ๐ฆ Bird | Soaring arc with rotation |
|
|
451
|
+
| `animate-bird-flock-2` / `animate-bird-flock-3` | ๐ฆ๐ฆ Flock | Staggered offsets for formation effect |
|
|
452
|
+
| `animate-bee-hover` | ๐ Bee | Hovering with natural drift |
|
|
453
|
+
| `animate-bee-buzz` | ๐ Buzz | Rapid wing-buzz shake |
|
|
454
|
+
| `animate-snake-slither` | ๐ Snake | Sinusoidal slithering path |
|
|
455
|
+
| `animate-dragon-fire` | ๐ฅ Dragon fire | Fire burst expanding and fading |
|
|
456
|
+
| `animate-fire-flicker` | ๐ฅ Flicker | Rapid flame flicker |
|
|
457
|
+
|
|
458
|
+
```html
|
|
459
|
+
<!-- Bat flying across -->
|
|
460
|
+
<span class="animate-bat-fly animate-bat-wings">๐ฆ</span>
|
|
461
|
+
|
|
462
|
+
<!-- Butterfly flapping and drifting -->
|
|
463
|
+
<span class="animate-butterfly animate-butterfly-drift">๐ฆ</span>
|
|
464
|
+
|
|
465
|
+
<!-- Firefly with glow -->
|
|
466
|
+
<span class="animate-firefly animate-firefly-glow">โจ</span>
|
|
467
|
+
|
|
468
|
+
<!-- Bird flock formation (3 birds) -->
|
|
469
|
+
<span class="animate-bird-flock">๐ฆ</span>
|
|
470
|
+
<span class="animate-bird-flock-2">๐ฆ</span>
|
|
471
|
+
<span class="animate-bird-flock-3">๐ฆ</span>
|
|
472
|
+
|
|
473
|
+
<!-- Dragon fire breath -->
|
|
474
|
+
<span class="animate-dragon-fire animate-fire-flicker">๐ฅ</span>
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
> ๐ฌ **[See all creature animations live โ](https://santycss.santy.in/animations.html#creature-animations)**
|
|
478
|
+
|
|
479
|
+
---
|
|
480
|
+
|
|
481
|
+
## What's New in v1.9
|
|
482
|
+
|
|
483
|
+
### ๐ Scroll & Scrollbar Utilities
|
|
484
|
+
|
|
485
|
+
| Class | Description |
|
|
486
|
+
|---|---|
|
|
487
|
+
| `scroll-smooth` | `scroll-behavior: smooth` |
|
|
488
|
+
| `scroll-auto` | `scroll-behavior: auto` |
|
|
489
|
+
| `scrollbar-thin` | Narrow scrollbar (webkit + standard) |
|
|
490
|
+
| `scrollbar-dark` | Dark-themed scrollbar |
|
|
491
|
+
| `scrollbar-hidden` | Hide scrollbar, keep scroll functionality |
|
|
492
|
+
|
|
493
|
+
### ๐ช Glass Morphism
|
|
494
|
+
|
|
495
|
+
| Class | Description |
|
|
496
|
+
|---|---|
|
|
497
|
+
| `glass` | Frosted glass effect (blur + semi-transparent white) |
|
|
498
|
+
| `glass-dark` | Dark frosted glass |
|
|
499
|
+
| `glass-light` | Light frosted glass |
|
|
500
|
+
|
|
501
|
+
### ๐ Radial Gradients
|
|
502
|
+
|
|
503
|
+
```html
|
|
504
|
+
<div class="gradient-radial-blue-purple">...</div>
|
|
505
|
+
<div class="gradient-radial-pink-orange">...</div>
|
|
506
|
+
```
|
|
507
|
+
|
|
508
|
+
All `gradient-radial-*` utilities use CSS `radial-gradient()` matching the existing linear gradient palette.
|
|
509
|
+
|
|
510
|
+
### ๐ฌ New Animation Utilities
|
|
511
|
+
|
|
512
|
+
| Class | Description |
|
|
513
|
+
|---|---|
|
|
514
|
+
| `animate-spin-slow` | Slow clockwise rotation |
|
|
515
|
+
| `animate-spin-fast` | Fast clockwise rotation |
|
|
516
|
+
| `animate-spin-cw` | Explicit clockwise spin |
|
|
517
|
+
| `animate-spin-ccw` | Counter-clockwise spin |
|
|
518
|
+
| `animate-spin-xslow` | Very slow rotation |
|
|
519
|
+
| `animate-pulse-dot` | Pulsing dot indicator |
|
|
520
|
+
| `skill-bar-animated` | Animated skill/progress bar fill |
|
|
521
|
+
|
|
522
|
+
```html
|
|
523
|
+
<!-- Pulsing status indicator -->
|
|
524
|
+
<span class="animate-pulse-dot background-green-500"></span>
|
|
525
|
+
|
|
526
|
+
<!-- Animated skill bar -->
|
|
527
|
+
<div class="skill-bar-animated" style="--skill-width: 80%"></div>
|
|
528
|
+
|
|
529
|
+
<!-- Counter-clockwise spinner -->
|
|
530
|
+
<div class="animate-spin-ccw">โบ</div>
|
|
531
|
+
```
|
|
532
|
+
|
|
533
|
+
---
|
|
534
|
+
|
|
535
|
+
## What's New in v1.8
|
|
536
|
+
|
|
537
|
+
### ๐จ SantyCSS Inspector โ Figma Plugin
|
|
538
|
+
|
|
539
|
+
Inspect any Figma layer and get the exact SantyCSS classes in one click.
|
|
540
|
+
|
|
541
|
+
**Download / Install:**
|
|
542
|
+
|
|
543
|
+
> ๐ **[Download from santycss.santy.in/docs.html](https://santycss.santy.in/docs.html#figma-plugin)** โ full setup guide and one-click download
|
|
544
|
+
|
|
545
|
+
**Local development install:**
|
|
546
|
+
1. Clone this repo โ the plugin lives in `figma-plugin-santycss/`
|
|
547
|
+
2. Open **Figma Desktop** โ Plugins โ Development โ **Import plugin from manifest**
|
|
548
|
+
3. Select `figma-plugin-santycss/manifest.json`
|
|
549
|
+
4. Select any frame/text layer โ run **SantyCSS Inspector**
|
|
550
|
+
|
|
551
|
+
**What it detects:**
|
|
552
|
+
|
|
553
|
+
| Figma property | SantyCSS output |
|
|
554
|
+
|---|---|
|
|
555
|
+
| Auto-layout (horizontal) | `make-flex flex-row` |
|
|
556
|
+
| Auto-layout (vertical) | `make-flex flex-column` |
|
|
557
|
+
| Alignment | `justify-center`, `align-center`, `justify-between` |
|
|
558
|
+
| Gap | `gap-16`, `gap-24` |
|
|
559
|
+
| Padding | `add-padding-24`, `add-padding-x-16 add-padding-y-8` |
|
|
560
|
+
| Width / Height | `set-width-320`, `set-width-full`, `set-height-fit` |
|
|
561
|
+
| Corner radius | `round-corners-8`, `make-pill` |
|
|
562
|
+
| Stroke | `add-border-1`, `border-color-blue-500` |
|
|
563
|
+
| Fill / background | `background-blue-500` (nearest of 200 palette colors) |
|
|
564
|
+
| Text color | `color-gray-900` |
|
|
565
|
+
| Font size | `set-text-16` |
|
|
566
|
+
| Font weight | `text-bold`, `text-semibold` |
|
|
567
|
+
| Text align | `text-center`, `text-right` |
|
|
568
|
+
| Drop shadow | `add-shadow-sm` / `add-shadow-lg` |
|
|
569
|
+
| Opacity | `opacity-50` |
|
|
570
|
+
| Clips content | `overflow-hidden` |
|
|
571
|
+
|
|
572
|
+
**Plugin UI:**
|
|
573
|
+
- Grouped classes (Layout / Spacing / Size / Typography / Color / Border / Effects)
|
|
574
|
+
- Click any chip to copy that class
|
|
575
|
+
- **Copy All** button โ copies all classes as one string
|
|
576
|
+
- Dark mode โ follows Figma's theme automatically
|
|
577
|
+
|
|
578
|
+
---
|
|
579
|
+
|
|
580
|
+
## What's New in v1.7
|
|
581
|
+
|
|
582
|
+
### โฟ Accessibility Utilities
|
|
583
|
+
|
|
584
|
+
| Class | What it does |
|
|
585
|
+
|---|---|
|
|
586
|
+
| `.skip-to-content` | Skip-nav link โ visible on focus, hidden otherwise |
|
|
587
|
+
| `.focus-trap` | Container for modal/drawer focus trapping |
|
|
588
|
+
| `.aria-live-polite` / `.aria-live-assertive` | Visually hidden ARIA live regions |
|
|
589
|
+
| `.screen-reader-only` | Visually hide but keep accessible |
|
|
590
|
+
| `.focus-ring` / `.focus-ring-white` | Consistent focus outline utilities |
|
|
591
|
+
| `.focus-visible-ring` | Focus ring only on keyboard navigation |
|
|
592
|
+
| `.motion-safe-animate` | Disables animation when OS reduces motion |
|
|
593
|
+
| `.high-contrast-border/bg/outline` | `forced-colors` media query support |
|
|
594
|
+
|
|
595
|
+
### ๐ Internationalisation (i18n)
|
|
596
|
+
|
|
597
|
+
| Class | What it does |
|
|
598
|
+
|---|---|
|
|
599
|
+
| `.add-padding-block-{n}` / `.add-padding-inline-{n}` | Logical padding (direction-aware) |
|
|
600
|
+
| `.add-margin-block-{n}` / `.add-margin-inline-{n}` | Logical margin |
|
|
601
|
+
| `.pin-block-start-0` / `.pin-inline-start-0` | Logical positioning |
|
|
602
|
+
| `.border-block-start` / `.border-inline-start` | Logical borders |
|
|
603
|
+
| `.make-text-vertical` | `writing-mode: vertical-rl` โ for CJK/Japanese |
|
|
604
|
+
| `.make-text-vertical-up` | `writing-mode: vertical-lr` |
|
|
605
|
+
| `.text-orientation-mixed` / `.text-orientation-upright` | Text orientation control |
|
|
606
|
+
| `.text-direction-ltr` / `.text-direction-rtl` | Explicit `direction` control |
|
|
607
|
+
|
|
608
|
+
### ๐ฑ Mobile-First Components
|
|
609
|
+
|
|
610
|
+
| Class | What it does |
|
|
611
|
+
|---|---|
|
|
612
|
+
| `.bottom-sheet` + `.open` | Slide-up panel from bottom (with safe-area support) |
|
|
613
|
+
| `.bottom-sheet-handle` / `.bottom-sheet-body` / `.bottom-sheet-footer` | Bottom sheet parts |
|
|
614
|
+
| `.bottom-sheet-overlay` + `.visible` | Semi-transparent backdrop |
|
|
615
|
+
| `.swipe-carousel` + `.swipe-carousel-item` | Touch-friendly horizontal scroll carousel |
|
|
616
|
+
| `.swipe-carousel-full` / `.peek` / `.multi` | Carousel layout variants |
|
|
617
|
+
| `.swipe-carousel-dot` + `.active` | Progress dots |
|
|
618
|
+
| `.pull-to-refresh` + `.pulling` / `.refreshing` | Pull-to-refresh indicator |
|
|
619
|
+
| `.padding-safe-top/bottom/left/right/all` | `env(safe-area-inset-*)` padding |
|
|
620
|
+
|
|
621
|
+
### ๐ New Components
|
|
622
|
+
|
|
623
|
+
| Class | What it does |
|
|
624
|
+
|---|---|
|
|
625
|
+
| `.command-palette-wrap` + `.open` | VS Code-style Ctrl+K command palette overlay |
|
|
626
|
+
| `.command-palette-input` / `.command-palette-item` | Command palette parts |
|
|
627
|
+
| `.date-picker` / `.date-picker-grid` / `.date-picker-day` | Full calendar date picker |
|
|
628
|
+
| `.date-picker-day.today` / `.selected` / `.in-range` | Day state modifiers |
|
|
629
|
+
|
|
630
|
+
### ๐จ Figma Plugin
|
|
631
|
+
|
|
632
|
+
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.
|
|
633
|
+
|
|
634
|
+
---
|
|
635
|
+
|
|
636
|
+
## What's New in v1.4
|
|
637
|
+
|
|
638
|
+
### ๐งฉ VS Code IntelliSense Extension
|
|
639
|
+
|
|
640
|
+
**SantyCSS IntelliSense** is now available as a VS Code extension โ similar to Tailwind CSS IntelliSense.
|
|
641
|
+
|
|
642
|
+
- **Autocomplete** โ type inside `class=""` or `className=""` and get instant suggestions for all 8,500+ SantyCSS classes
|
|
643
|
+
- **Hover docs** โ hover any class to see the CSS it generates
|
|
644
|
+
- **Works in** HTML, JSX, TSX, Vue, Svelte, PHP, ERB
|
|
645
|
+
- **Toggle command** โ `SantyCSS: Toggle IntelliSense` in the Command Palette
|
|
646
|
+
|
|
647
|
+
Install: search **SantyCSS IntelliSense** in the Extensions panel.
|
|
648
|
+
|
|
649
|
+
---
|
|
650
|
+
|
|
651
|
+
## What's New in v1.3
|
|
652
|
+
|
|
653
|
+
### ๐จ 70+ SVG Icons (new: Business & Finance)
|
|
654
|
+
|
|
655
|
+
SantyCSS now ships **two icon systems** in `santy-icons.css`:
|
|
656
|
+
|
|
657
|
+
**Brand Icons** (35) โ `.brand-icon` + `.brand-icon-{name}`
|
|
658
|
+
Social media, developer tools, platforms & payment services.
|
|
659
|
+
|
|
660
|
+
**Business & Finance Icons** (35) โ `.icon` + `.icon-{name}`
|
|
661
|
+
35 utility icons sourced from Font Awesome 6 Free (CC BY 4.0):
|
|
662
|
+
|
|
663
|
+
| Category | Icons |
|
|
664
|
+
|---|---|
|
|
665
|
+
| Charts | `chart-bar` ยท `chart-column` ยท `chart-line` ยท `chart-pie` ยท `chart-area` ยท `chart-simple` |
|
|
666
|
+
| Money | `dollar-sign` ยท `euro-sign` ยท `coins` ยท `money-bill` ยท `money-bill-wave` ยท `sack-dollar` ยท `percent` |
|
|
667
|
+
| Business | `briefcase` ยท `handshake` ยท `building` ยท `building-columns` ยท `landmark` ยท `store` ยท `hotel` |
|
|
668
|
+
| Documents | `file-invoice` ยท `file-invoice-dollar` ยท `receipt` ยท `credit-card` ยท `wallet` |
|
|
669
|
+
| Commerce | `tag` ยท `tags` ยท `cash-register` ยท `calculator` ยท `piggy-bank` ยท `scale-balanced` |
|
|
670
|
+
| Trends | `arrow-trend-up` ยท `arrow-trend-down` ยท `hand-holding-dollar` ยท `house` |
|
|
671
|
+
|
|
672
|
+
```html
|
|
673
|
+
<!-- Include the icon stylesheet -->
|
|
674
|
+
<link rel="stylesheet" href="santy-icons.css">
|
|
675
|
+
|
|
676
|
+
<!-- Brand icon (social/dev) -->
|
|
677
|
+
<span class="brand-icon brand-icon-github"></span>
|
|
678
|
+
<span class="brand-icon brand-icon-react brand-icon-color-react brand-icon-xl"></span>
|
|
679
|
+
|
|
680
|
+
<!-- Business & Finance icon -->
|
|
681
|
+
<span class="icon icon-briefcase"></span>
|
|
682
|
+
<span class="icon icon-dollar-sign icon-xl" style="color:#16a34a;"></span>
|
|
683
|
+
<span class="icon icon-chart-line icon-32"></span>
|
|
684
|
+
```
|
|
685
|
+
|
|
686
|
+
**Size modifiers** (same for both systems):
|
|
687
|
+
```
|
|
688
|
+
.icon-xs .icon-sm .icon-md .icon-lg .icon-xl
|
|
689
|
+
.icon-2x .icon-3x .icon-4x .icon-5x .icon-6x
|
|
690
|
+
.icon-16 .icon-24 .icon-32 .icon-48 .icon-64
|
|
691
|
+
```
|
|
692
|
+
|
|
693
|
+
**Animations:**
|
|
694
|
+
```html
|
|
695
|
+
<span class="icon icon-coins icon-spin icon-xl" style="color:#f59e0b;"></span>
|
|
696
|
+
```
|
|
697
|
+
|
|
698
|
+
> ๐จ **[Icon Browser](https://santycss.santy.in/icons.html)** โ search, filter, and copy-click any icon
|
|
699
|
+
|
|
700
|
+
---
|
|
701
|
+
|
|
702
|
+
## What's New in v1.2
|
|
703
|
+
|
|
704
|
+
### ๐ฌ 120+ Animations (was 70+)
|
|
705
|
+
|
|
706
|
+
**Scroll-Triggered** โ elements animate when they enter the viewport:
|
|
707
|
+
```html
|
|
708
|
+
<div class="animate-on-scroll-slide-up scroll-reveal-delay-200">Reveals on scroll</div>
|
|
709
|
+
<!-- Add IntersectionObserver once in your JS -->
|
|
710
|
+
```
|
|
711
|
+
|
|
712
|
+
**Hover-Triggered** โ full animations on mouse-over, not just transforms:
|
|
713
|
+
```html
|
|
714
|
+
<button class="make-button style-primary on-hover:animate-rubber-band">Hover me</button>
|
|
715
|
+
<div class="animate-text-gradient-flow set-text-32 text-bold">Gradient Flow</div>
|
|
716
|
+
```
|
|
717
|
+
|
|
718
|
+
**Text Animations:**
|
|
719
|
+
```html
|
|
720
|
+
<h1 class="animate-typewriter">Hello, World!</h1>
|
|
721
|
+
<h2 class="animate-text-glitch">Glitch</h2>
|
|
722
|
+
<p class="animate-text-neon-pulse color-blue-400">Neon Pulse</p>
|
|
723
|
+
```
|
|
724
|
+
|
|
725
|
+
**Staggered Entrances** โ children animate in sequence:
|
|
726
|
+
```html
|
|
727
|
+
<ul class="animate-stagger-slide-up animate-stagger-children-100">
|
|
728
|
+
<li>Item 1</li> <!-- 0ms delay -->
|
|
729
|
+
<li>Item 2</li> <!-- 100ms delay -->
|
|
730
|
+
<li>Item 3</li> <!-- 200ms delay -->
|
|
731
|
+
</ul>
|
|
732
|
+
```
|
|
733
|
+
|
|
734
|
+
**3D Animations:**
|
|
735
|
+
```html
|
|
736
|
+
<div class="animate-flip-3d-y">Card flip</div>
|
|
737
|
+
<div class="animate-morph-blob" style="width:80px;height:80px;background:#6366f1;"></div>
|
|
738
|
+
<div class="animate-border-spin">Spinning border</div>
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
**UI Feedback Animations** โ paired with components:
|
|
742
|
+
```html
|
|
743
|
+
<div class="animate-toast-in">Toast notification</div>
|
|
744
|
+
<div class="animate-modal-in">Modal dialog</div>
|
|
745
|
+
<div class="animate-error-shake">Form error</div>
|
|
746
|
+
```
|
|
747
|
+
|
|
748
|
+
**New helper classes:**
|
|
749
|
+
```
|
|
750
|
+
animation-ease-bounce animation-ease-elastic animation-ease-spring
|
|
751
|
+
animation-direction-reverse animation-direction-alternate
|
|
752
|
+
animation-pause-on-hover animation-delay-750 animation-delay-1500
|
|
753
|
+
animation-delay-2500 animation-speed-ultra-fast
|
|
754
|
+
```
|
|
755
|
+
|
|
756
|
+
---
|
|
757
|
+
|
|
758
|
+
### ๐งฉ Component Variant System (`make-*`)
|
|
759
|
+
|
|
760
|
+
Replaces the old `btn btn-primary` pattern with a composable modifier system:
|
|
761
|
+
|
|
762
|
+
```html
|
|
763
|
+
<!-- Old way -->
|
|
764
|
+
<button class="btn btn-success btn-lg">Old</button>
|
|
765
|
+
|
|
766
|
+
<!-- New way -->
|
|
767
|
+
<button class="make-button style-success size-large shape-pill">New</button>
|
|
768
|
+
<button class="make-button style-danger size-small shape-rounded">Delete</button>
|
|
769
|
+
<div class="make-card style-elevated">
|
|
770
|
+
<div class="card-body">...</div>
|
|
771
|
+
</div>
|
|
772
|
+
<span class="make-badge style-success">Active</span>
|
|
773
|
+
<div class="make-alert style-warning">Watch out</div>
|
|
774
|
+
```
|
|
775
|
+
|
|
776
|
+
**All components:** `make-button` ยท `make-card` ยท `make-badge` ยท `make-alert` ยท `make-input` ยท `make-avatar` ยท `make-spinner` ยท `make-skeleton` ยท `make-progress` ยท `make-navbar` ยท `make-tooltip` ยท `make-modal` ยท `make-drawer` ยท `make-accordion` ยท `make-dropdown`
|
|
777
|
+
|
|
778
|
+
**Style modifiers:** `style-primary` ยท `style-secondary` ยท `style-success` ยท `style-danger` ยท `style-warning` ยท `style-info` ยท `style-outline` ยท `style-ghost` ยท `style-dark` ยท `style-flat` ยท `style-elevated` ยท `style-bordered`
|
|
779
|
+
|
|
780
|
+
**Size modifiers:** `size-small` ยท `size-large` ยท `size-xl` ยท `size-full`
|
|
781
|
+
|
|
782
|
+
**Shape modifiers:** `shape-pill` ยท `shape-rounded` ยท `shape-square`
|
|
783
|
+
|
|
784
|
+
---
|
|
785
|
+
|
|
786
|
+
### ๐ 20 Modern CSS Utility Groups
|
|
787
|
+
|
|
788
|
+
| Group | Classes |
|
|
789
|
+
|---|---|
|
|
790
|
+
| Container Queries | `container-query`, `cq-sm:make-flex`, `cq-md:grid-cols-3` |
|
|
791
|
+
| Scroll & Snap | `scroll-smooth`, `scroll-snap-x`, `scroll-snap-center`, `overscroll-contain` |
|
|
792
|
+
| Logical Properties | `add-padding-inline-{n}`, `ps-{n}`, `pe-{n}`, `ms-auto`, `text-start`, `text-end` |
|
|
793
|
+
| Fluid Typography | `text-fluid-sm` through `text-fluid-hero` (CSS `clamp()`) |
|
|
794
|
+
| Clip Path | `clip-circle`, `clip-hexagon`, `clip-diamond`, `clip-star`, `clip-arrow-right` |
|
|
795
|
+
| Gradients | `gradient-radial-from-center`, `gradient-conic`, `text-gradient-blue-to-purple` |
|
|
796
|
+
| Advanced Grid | `grid-auto-fit-min-200`, `masonry-cols-3`, `grid-area-header/sidebar/main/footer` |
|
|
797
|
+
| Advanced Typography | `text-balance`, `text-pretty`, `text-clamp-1/2/3`, `drop-cap`, `font-tabular-nums` |
|
|
798
|
+
| Cursor Utilities | 30 cursor types including `cursor-cell`, `cursor-copy`, `cursor-resize-ns` |
|
|
799
|
+
| Dynamic Viewport | `set-height-dvh`, `set-height-svh`, `set-height-lvh`, `set-min-height-dvh` |
|
|
800
|
+
| Color Mix / Opacity | `background-blue-500/50`, `background-white/75`, `background-mix-blue-red-50` |
|
|
801
|
+
| Semantic Z-index | `z-modal: 400`, `z-tooltip: 600`, `z-toast: 700`, `isolate` |
|
|
802
|
+
| View Transitions | `view-transition-fade`, `view-transition-slide` (View Transitions API) |
|
|
803
|
+
| Size Utilities | `set-size-16` through `set-size-200`, `set-size-full/screen/fit` |
|
|
804
|
+
| Print Utilities | `print-hidden`, `print-only`, `print-break-before`, `print-show-links` |
|
|
805
|
+
| Subgrid | `grid-cols-subgrid`, `span-col-subgrid-3` |
|
|
806
|
+
| Math / Calc | `set-width-calc-100-minus-64`, `set-height-calc-screen-minus-80`, `set-max-width-readable` |
|
|
807
|
+
| Pointer / Touch | `touch-none`, `touch-pan-x`, `touch-manipulation`, `will-change-transform` |
|
|
808
|
+
| @layer | `@layer santy-base, santy-utilities, santy-components, santy-overrides` |
|
|
809
|
+
| 3D Transform | `perspective-*`, `rotate-3d`, `transform-origin-*` (extended) |
|
|
810
|
+
|
|
811
|
+
---
|
|
812
|
+
|
|
813
|
+
### ๐ค Built for the AI Era
|
|
814
|
+
|
|
815
|
+
SantyCSS ships a **context file** (`santycss.context.md`) โ paste it into Claude, GPT-4, or Cursor's system prompt and the AI generates SantyCSS instead of Tailwind, every time:
|
|
816
|
+
|
|
817
|
+
```
|
|
818
|
+
Paste santycss.context.md โ AI writes SantyCSS instead of Tailwind
|
|
819
|
+
```
|
|
820
|
+
|
|
821
|
+
The **built-in AI Generator** converts plain English โ SantyCSS classes in the browser (no API key):
|
|
822
|
+
|
|
823
|
+
> "a centered flex container with green background and white text and gap"
|
|
824
|
+
> โ `make-flex align-center justify-center background-green-500 color-white gap-16`
|
|
825
|
+
|
|
826
|
+
---
|
|
827
|
+
|
|
828
|
+
## Webflow
|
|
829
|
+
|
|
830
|
+
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.
|
|
831
|
+
|
|
832
|
+
- **[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.
|
|
833
|
+
|
|
834
|
+
---
|
|
835
|
+
|
|
836
|
+
## Installation
|
|
837
|
+
|
|
838
|
+
```bash
|
|
839
|
+
npm install santycss
|
|
840
|
+
```
|
|
841
|
+
|
|
842
|
+
**CDN โ drop in and go (recommended for beginners):**
|
|
843
|
+
```html
|
|
844
|
+
<!-- Base utilities + components, no extended variants/animations -->
|
|
845
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-start.css">
|
|
846
|
+
```
|
|
847
|
+
|
|
848
|
+
**CDN โ full responsive coverage:**
|
|
849
|
+
```html
|
|
850
|
+
<!-- Core utilities (slimmed) -->
|
|
851
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-core.css">
|
|
852
|
+
<!-- xl:, xxl:, on-wide:, peer-*, group-*, print:, motion-*, RTL -->
|
|
853
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-variants.css">
|
|
854
|
+
```
|
|
855
|
+
|
|
856
|
+
**CDN โ PostCSS/Vite purge workflow (teams):**
|
|
857
|
+
```html
|
|
858
|
+
<!-- Full bundle โ purge down to ~15KB with PostCSS/Vite -->
|
|
859
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy.min.css">
|
|
860
|
+
```
|
|
861
|
+
|
|
862
|
+
**Import in JS/TS (React, Vue, Next, Nuxt, Vite):**
|
|
863
|
+
```js
|
|
864
|
+
import 'santycss/css/start'; // drop-in: base utilities + components
|
|
865
|
+
import 'santycss/css/core'; // utilities only (slimmed, no extended variants)
|
|
866
|
+
import 'santycss/css/variants'; // xl:, peer-*, group-*, print:, motion-*, RTL
|
|
867
|
+
import 'santycss/css'; // full bundle
|
|
868
|
+
import 'santycss/css/components'; // component shortcuts
|
|
869
|
+
import 'santycss/css/animations'; // animations only
|
|
870
|
+
import 'santycss/css/email'; // email-safe CSS
|
|
871
|
+
```
|
|
872
|
+
|
|
873
|
+
**PostCSS:**
|
|
874
|
+
```js
|
|
875
|
+
// postcss.config.js
|
|
876
|
+
module.exports = {
|
|
877
|
+
plugins: [require('santycss/postcss')]
|
|
878
|
+
};
|
|
879
|
+
```
|
|
880
|
+
|
|
881
|
+
**Vite plugin:**
|
|
882
|
+
```js
|
|
883
|
+
// vite.config.js
|
|
884
|
+
import santyCSS from 'santycss/vite';
|
|
885
|
+
export default { plugins: [santyCSS()] };
|
|
886
|
+
```
|
|
887
|
+
|
|
888
|
+
---
|
|
889
|
+
|
|
890
|
+
## Core Naming Conventions
|
|
891
|
+
|
|
892
|
+
| Pattern | Example | Meaning |
|
|
893
|
+
|---|---|---|
|
|
894
|
+
| `add-{prop}-{n}` | `add-padding-24` | Additive โ border, padding, margin, shadow |
|
|
895
|
+
| `make-{val}` | `make-flex`, `make-circle` | Display / behaviour |
|
|
896
|
+
| `set-{prop}-{val}` | `set-text-24`, `set-width-320` | Dimension / size setter |
|
|
897
|
+
| `pin-{side}-{n}` | `pin-top-0`, `pin-center` | Absolute / fixed positioning |
|
|
898
|
+
| `on-hover:{class}` | `on-hover:scale-110` | State / responsive prefix |
|
|
899
|
+
| `md:{class}` | `md:grid-cols-3` | Responsive breakpoint |
|
|
900
|
+
| `make-button style-* size-* shape-*` | `make-button style-success size-large shape-pill` | Component variant system |
|
|
901
|
+
|
|
902
|
+
---
|
|
903
|
+
|
|
904
|
+
## Quick Examples
|
|
905
|
+
|
|
906
|
+
**Responsive hero:**
|
|
907
|
+
```html
|
|
908
|
+
<section class="make-flex flex-column align-center justify-center text-center add-padding-y-80 background-gray-50">
|
|
909
|
+
<h1 class="set-text-56 text-bold color-gray-900 add-margin-bottom-16 md:set-text-40 on-mobile:set-text-32">
|
|
910
|
+
Build faster
|
|
911
|
+
</h1>
|
|
912
|
+
<p class="set-text-20 color-gray-500 line-height-relaxed add-margin-bottom-32">
|
|
913
|
+
Plain-English CSS that reads like you wrote it.
|
|
914
|
+
</p>
|
|
915
|
+
<a href="#" class="make-button style-primary size-large shape-pill on-hover:scale-105 transition-all">
|
|
916
|
+
Get started โ
|
|
917
|
+
</a>
|
|
918
|
+
</section>
|
|
919
|
+
```
|
|
920
|
+
|
|
921
|
+
**Card with hover effect:**
|
|
922
|
+
```html
|
|
923
|
+
<div class="make-card style-bordered add-border-left-4 border-color-blue-500 on-hover:scale-105 transition-all cursor-pointer add-padding-28 add-shadow-md round-corners-16">
|
|
924
|
+
<h3 class="set-text-20 text-bold color-gray-900 add-margin-bottom-8">Card Title</h3>
|
|
925
|
+
<p class="set-text-14 color-gray-500 line-height-relaxed">Card description.</p>
|
|
926
|
+
</div>
|
|
927
|
+
```
|
|
928
|
+
|
|
929
|
+
**Dark-mode card grid:**
|
|
930
|
+
```html
|
|
931
|
+
<div class="make-grid grid-cols-3 gap-24 on-mobile:grid-cols-1 md:grid-cols-2">
|
|
932
|
+
<div class="make-card style-elevated background-white dark:background-gray-800 round-corners-16 add-padding-24">
|
|
933
|
+
<span class="make-badge style-primary add-margin-bottom-12">New</span>
|
|
934
|
+
<h4 class="set-text-18 text-semibold color-gray-900 dark:color-white">Feature</h4>
|
|
935
|
+
<p class="set-text-14 color-gray-500 dark:color-gray-400 line-height-relaxed">Description.</p>
|
|
936
|
+
</div>
|
|
937
|
+
</div>
|
|
938
|
+
```
|
|
939
|
+
|
|
940
|
+
**Scroll-triggered stagger:**
|
|
941
|
+
```html
|
|
942
|
+
<div class="make-grid grid-cols-3 gap-24 animate-stagger-slide-up animate-stagger-children-200">
|
|
943
|
+
<div class="make-card style-bordered">Card 1</div>
|
|
944
|
+
<div class="make-card style-bordered">Card 2</div>
|
|
945
|
+
<div class="make-card style-bordered">Card 3</div>
|
|
946
|
+
</div>
|
|
947
|
+
<script>
|
|
948
|
+
new IntersectionObserver(entries => {
|
|
949
|
+
entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('is-visible'); });
|
|
950
|
+
}, { threshold: 0.15 }).observe(
|
|
951
|
+
...document.querySelectorAll('[class*="animate-on-scroll"],[class*="scroll-reveal"]')
|
|
952
|
+
);
|
|
953
|
+
</script>
|
|
954
|
+
```
|
|
955
|
+
|
|
956
|
+
---
|
|
957
|
+
|
|
958
|
+
## Spacing & Sizing Reference
|
|
959
|
+
|
|
960
|
+
**Spacing values (n):** 0โ50 every 1px ยท 52โ200 every 4px ยท plus 256, 320, 384, 448, 512, 640, 768, 1024
|
|
961
|
+
|
|
962
|
+
| Category | Classes |
|
|
963
|
+
|---|---|
|
|
964
|
+
| Padding | `add-padding-{n}` ยท `-top-` ยท `-bottom-` ยท `-left-` ยท `-right-` ยท `-x-` ยท `-y-{n}` |
|
|
965
|
+
| Margin | `add-margin-{n}` ยท `-top-` ยท `-bottom-` ยท `-left-` ยท `-right-` ยท `-x-` ยท `-y-{n}` ยท `-x-auto` |
|
|
966
|
+
| Gap | `gap-{n}` ยท `gap-x-{n}` ยท `gap-y-{n}` |
|
|
967
|
+
| Width | `set-width-{n}` ยท `-full` ยท `-screen` ยท `-fit` |
|
|
968
|
+
| Height | `set-height-{n}` ยท `-full` ยท `-screen` ยท `-dvh` ยท `-svh` ยท `-lvh` |
|
|
969
|
+
| Text size | `set-text-{n}` (8โ144px) |
|
|
970
|
+
|
|
971
|
+
---
|
|
972
|
+
|
|
973
|
+
## Colors
|
|
974
|
+
|
|
975
|
+
20 color families ร 10 shades (50โ950):
|
|
976
|
+
|
|
977
|
+
`blue` `red` `green` `yellow` `purple` `pink` `orange` `gray` `indigo` `cyan` `teal` `rose` `violet` `emerald` `amber` `lime` `sky` `slate` `zinc` `neutral` `stone`
|
|
978
|
+
|
|
979
|
+
```html
|
|
980
|
+
<p class="color-blue-500">Text</p>
|
|
981
|
+
<div class="background-emerald-100 border-color-emerald-400 add-border-2">Card</div>
|
|
982
|
+
```
|
|
983
|
+
|
|
984
|
+
---
|
|
985
|
+
|
|
986
|
+
## Responsive Breakpoints
|
|
987
|
+
|
|
988
|
+
```
|
|
989
|
+
sm:{class} 640px+
|
|
990
|
+
md:{class} 768px+
|
|
991
|
+
lg:{class} 1024px+
|
|
992
|
+
xl:{class} 1280px+
|
|
993
|
+
on-mobile:{class} max 767px
|
|
994
|
+
on-tablet:{class} 768โ1023px
|
|
995
|
+
on-desktop:{class} 1024px+
|
|
996
|
+
```
|
|
997
|
+
|
|
998
|
+
---
|
|
999
|
+
|
|
1000
|
+
## CSS Design Tokens
|
|
1001
|
+
|
|
1002
|
+
Override to brand your entire UI with zero rebuilding:
|
|
1003
|
+
|
|
1004
|
+
```css
|
|
1005
|
+
:root {
|
|
1006
|
+
--santy-primary: #3b82f6;
|
|
1007
|
+
--santy-secondary: #8b5cf6;
|
|
1008
|
+
--santy-accent: #10b981;
|
|
1009
|
+
--santy-radius: 0.5rem;
|
|
1010
|
+
--santy-font: 'Inter', system-ui, sans-serif;
|
|
1011
|
+
}
|
|
1012
|
+
```
|
|
1013
|
+
|
|
1014
|
+
---
|
|
1015
|
+
|
|
1016
|
+
## Component Classes (Legacy)
|
|
1017
|
+
|
|
1018
|
+
The original `.btn`, `.card`, `.badge` classes still work and are fully supported:
|
|
1019
|
+
|
|
1020
|
+
```html
|
|
1021
|
+
<button class="btn btn-primary btn-lg">Button</button>
|
|
1022
|
+
<div class="card card-body">Card</div>
|
|
1023
|
+
<span class="badge badge-success">Active</span>
|
|
1024
|
+
<div class="alert alert-warning">Warning</div>
|
|
1025
|
+
```
|
|
1026
|
+
|
|
1027
|
+
For new projects, the **Component Variant System** (`make-button style-*`) is recommended.
|
|
1028
|
+
|
|
1029
|
+
---
|
|
1030
|
+
|
|
1031
|
+
## Files in the Package
|
|
1032
|
+
|
|
1033
|
+
| File | Size | Contents |
|
|
1034
|
+
|---|---|---|
|
|
1035
|
+
| `dist/santy-start.css` | 527KB | **CDN drop-in** โ base utilities + components, no extended variants/animations |
|
|
1036
|
+
| `dist/santy-core.css` | 310KB | Utilities only โ base + on-mobile/tablet/desktop/md + hover/focus |
|
|
1037
|
+
| `dist/santy-variants.css` | 287KB | Extended โ xl:, xxl:, on-wide:, peer-*, group-*, print:, motion-*, RTL |
|
|
1038
|
+
| `dist/santy-components.css` | 217KB | Component shortcuts only |
|
|
1039
|
+
| `dist/santy-animations.css` | 53KB | 120+ animations only |
|
|
1040
|
+
| `dist/santy.css` | 868KB | Everything โ full unminified bundle |
|
|
1041
|
+
| `dist/santy.min.css` | 758KB | Minified full bundle (purge with PostCSS/Vite โ ~15KB) |
|
|
1042
|
+
| `dist/santy-email.css` | 13KB | Email-safe CSS for HTML email |
|
|
1043
|
+
|
|
1044
|
+
---
|
|
1045
|
+
|
|
1046
|
+
## Tree-shaking / Purge
|
|
1047
|
+
|
|
1048
|
+
Keep only the classes you use:
|
|
1049
|
+
|
|
1050
|
+
```bash
|
|
1051
|
+
npx santycss purge --input ./src --output ./dist/santy.purged.css
|
|
1052
|
+
```
|
|
1053
|
+
|
|
1054
|
+
Or in Node.js:
|
|
1055
|
+
|
|
1056
|
+
```js
|
|
1057
|
+
const { purge } = require('santycss/purge');
|
|
1058
|
+
purge({ input: './src', output: './dist/santy.purged.css' });
|
|
1059
|
+
```
|
|
1060
|
+
|
|
1061
|
+
---
|
|
1062
|
+
|
|
1063
|
+
## LLM / AI Integration
|
|
1064
|
+
|
|
1065
|
+
```
|
|
1066
|
+
npm show santycss homepage
|
|
1067
|
+
โ https://santycss.santy.in
|
|
1068
|
+
```
|
|
1069
|
+
|
|
1070
|
+
The file `santycss.context.md` (in the GitHub repo) is a ready-made system prompt for LLMs. Paste it into your AI tool of choice and it will generate SantyCSS class names instead of Tailwind utilities.
|
|
1071
|
+
|
|
1072
|
+
---
|
|
1073
|
+
|
|
1074
|
+
## Links
|
|
1075
|
+
|
|
1076
|
+
- ๐ Website: [santycss.santy.in](https://santycss.santy.in)
|
|
1077
|
+
- ๐ Class Reference: [santycss.santy.in/classes.html](https://santycss.santy.in/classes.html)
|
|
1078
|
+
- ๐ Webflow: [santycss.santy.in/webflow.html](https://santycss.santy.in/webflow.html)
|
|
1079
|
+
- ๐ฌ Animations: [santycss.santy.in/animations.html](https://santycss.santy.in/animations.html)
|
|
1080
|
+
- ๐ฎ Live Demo: [santycss.santy.in/demo.html](https://santycss.santy.in/demo.html)
|
|
1081
|
+
- ๐ฆ npm Docs: [santycss.santy.in/docs.html](https://santycss.santy.in/docs.html)
|
|
1082
|
+
- ๐ Issues: [github.com/ChintuSanty/santyCSS/issues](https://github.com/ChintuSanty/santyCSS/issues)
|
|
1083
|
+
- ๐ฌ Discussions: [GitHub Discussions](https://github.com/ChintuSanty/santyCSS/discussions/1)
|
|
1084
|
+
|
|
1085
|
+
---
|
|
1086
|
+
|
|
1087
|
+
## License
|
|
1088
|
+
|
|
1089
|
+
MIT ยฉ [Santy](https://github.com/ChintuSanty)
|