Vasilis van Gemert works as a lecturer at the University of Applied Science in Amsterdam, where he teaches the next generation of digital product designers how to design things with the web as a material. Before he became a lecturer he worked as a principal front-end developer for large and small clients in The Netherlands.
Every now and then he publishes articles on his own blog, or on Smashing Magazine, Web Designer Magazine and Net Magazine. Today he only creates websites for himself. This not only means that he can use any new feature he wants, it also means he is able to investigate things that might not seem very interesting. Most of the time this turns out to be true. But not always.
Media queries gave us the power to create responsive layouts that work on all kinds of screens: from small to huge. Without media queries the web would be much less flexible. But media queries are hard work. We have to decide when a breakpoint occurs, we have to decide how it looks at that breakpoint, and we have to write the code to make it so. Wouldn’t it be better if we could simply tell the content to behave? To behave in a matter that makes sense, according to a set of rules, a system, we come up with. In other words: instead of crafting every possible layout by hand, wouldn’t it be better if we go home early and let the computer do the work for us?
It turns out that CSS gives us quite some tools to create super flexible, responsive layouts that don’t use media queries. Some are old, like floats and CSS columns. Some are newer, like flexbox and viewport relative units. And some are not implemented (yet), like paged media and element queries. In this talk I explain the many ways to use these techniques to create flexible, responsive design systems.