📱 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! 🦋🔥
Comments
7Frontend engineer aged 16
"Hey everyone! I’m Amr, a high schooler from Egypt, and I’m so excited to finally share Butterfly CSS with you! 🦋✨ I started this project because I was tired of writing 10 classes just to make a button 'feel alive' or making a layout mobile-friendly. I wanted a framework that felt like magic—where you just type what you want (responsive, handdrawn, birthday-paper) and it just works. Why I built this: I believe coding should be as fun as playing a game. Butterfly CSS is built on Attributes, not long class names. It’s designed to be ultra-light (only 35kb!) but powerful enough to handle responsive layouts and complex animations instantly. What’s under the hood? 🚀 Fast-Typing: No more 'Class Soup'—just clean HTML attributes. 📱 Smart Layouts: My flex-auto and responsive attributes handle the heavy lifting for mobile. 🎨 Pure Creativity: From confetti (birthday-paper) to hand-drawn filters, it’s all built-in. Being a young developer, I’ve poured my heart into making this 'fly out of the box.' I’d love to get your feedback, see what you build, and hear how I can make it even better! Let’s make the web a little more beautiful, one attribute at a time. 💪🔥" — Amr (Creator of Butterfly CSS)
its good for developers
The all-in-one social media automation platform. Schedule, create, and publish to all social media accounts with AI-powered content
Attribute-based styling is an interesting direction — the appeal of skipping the class-naming mental overhead is real for anyone who's spent time debugging specificity conflicts. Curious how it handles responsive breakpoints compared to utility-first approaches. Will check it out.
Điều này tốt cho các nhà phát triển
It is the best for developers!
It is the best for developers!
The Evansville IN menu delivers the full Mission BBQ experience http://missionbbqmenu.us/ with handcrafted meats and homemade sauces, honoring military, police, and first responders with patriotic decor and the daily national anthem at noon [citation:2].