DEV Community

Cover image for butterfly css mini framework 🧁:forget class soup🍜
Amrzlabs
Amrzlabs

Posted on

butterfly css mini framework 🧁:forget class soup🍜

#css #frontend #showdev #webdev

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?

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

🚀 WHY JOIN THE HAND-DRAWN ERA?
No More Classes: If you can name it, you can build it.

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:
https://butterflycss.amrzlabs.com/
https://butterflycss.amrzlabs.com/docs

Top comments (0)