A One-attribute Solution for Responsive Design

when i started web dev making responsive site was impossible with just my skills to make high quality responsive parent even when i learnt bootstrap and tailwind and others grid system i felt why i should write all of that every time with more of these questions i decided to make a library or mini framework solves all beginner pain points,
fancy with me you just write responsive in the parent and its done (attribute-based)
example

<div responsive w-full>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

dont wait its very free try it now:

https://butterfly-css.netlify.app/

https://github.com/AMR2010M/butterfly-css/blob/main/index.html

or build even faster with these articles:
https://dev.to/butterflycss/handdrawn-effect-in-html-100a

https://dev.to/butterflycss/the-easiest-dark-mode-for-beginners-a1j