butterfly css library
attribute -based library to make creative websites rapidly
Are you sick of "Class Soup"? Does your HTML look like a war zone of 18,000+ classes? Are you tired of rigid, boring grids that break the second you add one more div?
for people who want to make the website standout easily with animations like ball-move-1 or handdrawn attributes or even as simple as butterfly=fly beginners and even kids who want to build something small without 2000 classes
It’s time to DITCH THE SOUP. Welcome to the Hand-Drawn Era.
🏗️ The Layout Beast: responsive
Forget writing manual flex-box rules or media queries for every single child. Whether you have 5 divs or 1,555, the responsive attribute is your new best friend. It handles the structural chaos so you don’t have to.
The Old Way (The Nightmare):
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4 m-auto...">
</div>
The Butterfly Way (Pure Magic):
<section responsive>
<div handdrawn h-20></div>
<div handdrawn h-20></div>
<div handdrawn h-20></div>
<div handdrawn h-20></div>
</section>
Layout is for order, but your Hero section is for SOUL. Don't waste the responsive engine on your hero—use the butterfly=fly attribute. It’s designed specifically for those big, bold, high-impact spaces where you want your content to dance.
<div butterfly='fly'></div>
🚀 WHY JOIN THE HAND-DRAWN ERA?
No More Class soup
Sketchy Vibes: The handdrawn attribute turns your cold, digital rectangles into warm, artistic sketches.
Instant Adaptability: One responsive tag does the work of an entire library.
STOP CODING RIGID BOXES. START DRAWING EXPERIENCES.
see our website:
butterflycss.amrzlabs.com
1 Comment
I think the opportunity is bigger than replacing utility classes.
What you're really selling is a different philosophy of building interfaces. If people remember Butterfly CSS for how it makes websites feel rather than for a shorter syntax, you'll have a much more distinctive position.