butterfly css💗 is a new way to build websites that fly out of the box! by attribute-based fast typing🤩
Features
📱 Adaptive & Responsive Power
📱 RESPONSIVE BOX: Use the 'responsive' attribute on any parent to instantly create a mobile-ready flex layout! 📲🔥
🤖 FLEX-AUTO: The smartest layout tool! Automatically switches from row to column at 1200px. Perfect for Hero sections that need to look great on desktop AND mobile! 💻➡️📱
📐 LAYOUT MASTER: Use rows, columns, and center attributes to align everything perfectly without ever writing display: flex again! 🧩🎯
✨ Animation & Special Effects
🦋 THE ICONIC "FLY": Use butterfly="fly" to make elements soar in beautiful, random paths across your screen! 🌬️📍
🔮 FLOATING BALLS: Add glowing, animated orbs with ball-move-1 to ball-move-5 for that high-end "glassmorphism" look! 🔮✨
🎉 BIRTHDAY MAGIC: Instantly create a party vibe with the birthday-paper confetti animation! 🎊🥳
🪄 STANDARD PACK: spin, bounce, pulse, swing, flip, and shake—all ready with one word! 🃏💫
🎨 Visual & Styling Sorcery
🌑 PRO DARK MODE: Use d{color} and l{color} (e.g., dpurple lpurple) to set smart backgrounds that switch instantly with a dark-btn! 🌙💡
❤️ SHAPE SHIFTER: Morph elements into Hearts, Stars, Hexagons, Messages, or Home shapes using simple Clip-Path attributes! 🌟📐
🌈 GRADIENT GLORY: 10 pre-designed, stunning gradients (gradient-1 to gradient-10) to make your UI pop! 🎨💎
✏️ HAND-DRAWN VIBES: Give your site a "sketchy," artistic personality with the handdrawn filter! 🎨✍️
🛠️ Utility & Performance
🚀 INSANELY LIGHT: A mind-blowing 35kb! vf.js handles your sizing, df.js handles your dark mode. Fast, modular, and clean! ⚡💨
📏 PRECISION SIZING: Control width (w-100) and height (h-200) in REMs or percentages (w-80p) directly in your HTML! 📐📏
🎨 SHADOW & GLOW: Add colored shadows with s{color} (like sred) or a classic shadow to make elements float! ☁️✨
🧭 NAVBAR READY: Use navbar, top, or bottom to pin your menus instantly! 📍📌
Don't just build a website... Let it fly! 🦋🔥
Use Cases
Interactive Hero Sections: Use butterfly="fly" and ball-move for high-engagement landing pages. 🦋✨
Creative Portfolios: Apply handdrawn and Clip-Path shapes (Heart ❤️/Star ⭐) for unique branding.
Rapid Prototyping: Build layouts instantly with responsive, flex-auto, and btn attributes. ⏱️⚡
Celebration & Event Sites: Trigger birthday-paper confetti for instant party vibes. 🎉🥳
Educational Coding: A "visual-first" tool for teaching children HTML/CSS logic. 👶💻
Dynamic Sales Funnels: Use pulse and grow on CTA buttons to boost click-through rates. 📈🎯
Instant Dark-Mode Apps: Deploy d{color} and dark-btn for seamless theme switching. 🌙📲
Micro-Interaction Sites: Add bounce, swing, or shake to UI elements for a tactile feel. 🃏💫
Ultra-Lightweight Mobile Webs: Leverage the 35kb footprint for lightning-fast loading. 📱
