Zach’s ugly mug (his face) Zach Leatherman

<resize-asaurus> Web Component

October 02, 2023 Tagged: Project Web Components

A web component for resizing an element to demonstrate container-query responsive (or intrinsic web design) behavior of child components.

Use in the wild

This is a post about web components! Check out all the web components posts.

Zach’s ugly mug (his face)

Zach is a builder for the web at IndieWeb Avatar for He created IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 72 talks in nine different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS.

< Newer
Parity Purchasing Power Price ppp-price Web Component
Older >
table-saw Web Component


Max BöckZach LeathermanmasonFynn BeckerKhalid ⚡Holger HellingerIndieWeb Avatar for


Hasan AliilldredTim Rileykaiserkiwi :kiwibird:Alex RussellEvanAKKeith PurtellFynn BeckerJames HarrisKhalid ⚡Holger HellingerNoah LiebmanAnneke
1 Comment
  1. ???? Rotten Apple Annie :prami:

    ???? Rotten Apple Annie :prami:

    I remember using another library for this, which was probably jQuery based back in the day, that was coupled with PatternLab for a similar affect. Do not recall the name...

Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)