butterfly css

butterfly css💗 is a new way to build websites that fly out of the box! by attribute-based fast typing🤩

css,js 📄 agpl
Screenshot of butterfly css

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)