I'm a developer particularly focussed on accessibility and frontend web performance. Outside of work I'm interested in science, the environment, bouldering, and bikes.
Location
Manchester, United Kingdom
Work
Lead frontend engineer at Co-op in the United Kingdom
Anyone who is trying to make as much of their layout code use only CSS rather than CSS and JavaScript might be interested to know that the Collapsing component here can be built with CSS only, no ResizeObserver required!
heydonworks.com/article/the-flexbo... is a free-to-all blog post that describes the same technique, just in an older version. The blog post uses margin to add spacing, but the Every Layout version uses gap now that browsers support gap in Flexbox layouts.
I'm a developer particularly focussed on accessibility and frontend web performance. Outside of work I'm interested in science, the environment, bouldering, and bikes.
Location
Manchester, United Kingdom
Work
Lead frontend engineer at Co-op in the United Kingdom
Anyone who is trying to make as much of their layout code use only CSS rather than CSS and JavaScript might be interested to know that the Collapsing component here can be built with CSS only, no
ResizeObserverrequired!Here's an example: every-layout.dev/demos/switcher-basic . The example is taken from a very good ebook called Every Layout: every-layout.dev/layouts/switcher.
heydonworks.com/article/the-flexbo... is a free-to-all blog post that describes the same technique, just in an older version. The blog post uses
marginto add spacing, but the Every Layout version usesgapnow that browsers supportgapin Flexbox layouts.That’s right. I initially tried to use the “Switcher” CSS but don’t remember why I had to abandon it. Might be worth going back a retry.
Also, EveryLayout.dev is an excellent resource and worth getting a copy. The name “Cluster” comes right from it too. 😄
I thought there some similarity around your shared use of the name 'Cluster' but wasn't sure if that was a coincidence or not! 😄