This article was written in 2011. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

The Adaptive CSS Zen Garden

In my talks and workshops about responsive web design and adaptive layouts I always take some time to take a look at CSS Zen Garden, since a part of building an adaptive layout is based on the same principle as the Zen Garden has been promoting all these years: the same content can be styled differently by using CSS. I always wanted to make a version of the CSS Zen Garden where a different layout is shown on every different resolution. I never built that thing because it would be way too much work for me, I’m not a very good coder.

Today I talked about this idea while I was giving a workshop. From that moment on Roy Tomeij, who was attending, was more silent than usual. Ten minutes later he interrupted me with this masterpiece. Ladies and gentleman, I present you the Adaptive CSS Zen Garden. Resize your browser window at your own risk!