SmashingConf Oxford 2016 - Vasilis van Gemert

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.