I once made a moderately interactive widget using pure CSS, and it was a relatively interesting experience. The widget itself had buttons that let you choose several parameters (about 400 combinations overall) and would render out a 'demo' of our product.
Some stuff I learned:
1. Most of css3 is supported in IE8, so we felt fine with using the widget in production.
2. With any reasonable LESS / SASS syntax, it's easy to generate complex stuff so long as it's limited to a discrete number of states. Stuff like tic-tac-toe are easily doable if you treat them as a state-machine.
3. It's way faster than JS, and there's a good reason for it. CSS can be totally figured out in one round of parsing, and so long as no JS is used to change it, the same parsed state can be used for all of your states. Even though it adds tens of kilobytes to the file size of both CSS and HTML, it's still faster than executing code.
This definitely isn't the right solution for all problems, but I think it's important to think about whether you problem can be solved in pure CSS, and to strongly prefer it for static sites and nearly-static sites.
Of course, kudos to the developers who are able to do this. It must be a lot of hard work, and there's no way I could do it.
But for me personally, creating something like this, with no constraints on performance, filesize, compatibility, etc, is no more amazing than building a massive website (like say bbc.co.uk) that renders perfectly, almost instantly, across many different devices.
Imagine a quadrant chart that plots the superlatives of web solutions. The bbc sites resides in a different quadrant than these Css emphasized solutions...
I once made a CSS-only Todo List[1] that demonstrated chaining sibling selectors, using the :checked psuedo selector, CSS counters and some other things to "enhance" a Todo without using JS (technically JS is used in a Jade template to compile the necessary HTML and CSS). CSS is pretty powerful.
First off, the work is awesome, don't get me wrong, but I'm a bit disappointed. From the title, I expect the examples to be written "Pure CSS, yet many examples, including the very first, are laden with HTML and JavaScript.
It's amazing what you can achieve just by using HTML and CSS, but still I wonder why we mostly see websites with generic design and layout that only use common HTML and CSS elements.
Umm Compatibility reasons? It's probably also much easier to create certain things using a full range of tools rather than trying to implement it purely in css
Also because commonality of user experience has great value in satisfying the principle of least astonishment. It's true that a lot of web devs and designers don't get this right, but that's no reason to suggest they shouldn't be trying.
I think this work is valuable, but this is more R&D type work than a lot of people who are actually producing work with immediate value results, and tied to a business need
Some stuff I learned: 1. Most of css3 is supported in IE8, so we felt fine with using the widget in production.
2. With any reasonable LESS / SASS syntax, it's easy to generate complex stuff so long as it's limited to a discrete number of states. Stuff like tic-tac-toe are easily doable if you treat them as a state-machine.
3. It's way faster than JS, and there's a good reason for it. CSS can be totally figured out in one round of parsing, and so long as no JS is used to change it, the same parsed state can be used for all of your states. Even though it adds tens of kilobytes to the file size of both CSS and HTML, it's still faster than executing code.
This definitely isn't the right solution for all problems, but I think it's important to think about whether you problem can be solved in pure CSS, and to strongly prefer it for static sites and nearly-static sites.