installation

cloning: gh repo clone AMR2010M/butterflycss animation cdn(css): href="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css positions cdn(script): https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js dark mode cdn: https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js

1. Layout & Positioning

rows, columns, center, flex-auto, responsive (Parent flex), navbar, top, bottom, ai-center, ai-end, ai-start, jc-start, jc-end, jc-center, nof (no-overflow)

2. Width & Height (rem / %)

w-1 to w-999 | h-1 to h-999
w-10p to w-100p (percentages) | w-full

3. Animations (Continuous)

4. Floating Balls & Special Effects

ball-move-1 to ball-move-5, birthday-paper, handdrawn, blur, butterfly='fly'

5. Clip-Path Shapes

circle, triangle, ellipse, square, rectangle, diamond, hexagon, parallelogram, star, trapezoid, home, heart, x, message

6. Colors (Background & Text)

Colors: red, pink, purple, indigo, blue, cyan, teal, green, lime, yellow, amber, orange, brown, gray, black, white, light, dark.

Text Colors: Prefix with t (e.g., tred, tblue).

Shades: Append -50 up to -900 (e.g., red-500, tpurple-900).

7. Components & Utilities

card, button, btn='{color}', shadow, s{color} (colored shadow), tshadow (text shadow), m-x (margin), p-x (padding), bg=auto, ol (opacity-low), bold, rotate="0-360"

8. Dark Mode

d{color} (Dark background), l{color} (Light background), dt{color} (Dark text), tl{color} (Light text), dark-btn