Recently I was faced with the following problem: I had to build a layout that consists of several rows. In each row are two images with a fixed aspect ratio. The two images should have the same height and fill the entire row. The images' aspect ratios vary from 16:9 to 3:4, so there are landscape images and portrait and square images...
A few years ago, I had to build a card component that looked a little different than the usual cards you find on most websites. It turned out that this card led to one of my biggest estimation errors because I completely underestimated how problematic it would be to implement the layout. Now a few years later, we got the chance to refactor the code, and I took another look at the component to see if I could find a more elegant solution with modern CSS.
Layouts with diagonal sections are quite popular for several years now. It is not the new hot stuff, and you will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay. It is one tool designers can use to bring some dynamic to all the rectangular boxes with boring 90-degree angles.
You may think, art history and frontend development do not have much in common. Well, you may be surprised. Some of the problems we have to deal with today were discussed in art history long before the invention of the Internet. Also, the skills needed to analyze a piece of art correctly show significant similarity to the capabilities required to implement modern layouts with CSS. This talk will show you how to analyze a static layout by looking beyond pixels. Instead, you will understand why a given design works the way it does and translate this to modern CSS.
If you learn CSS today, there are a lot of properties that are quite new and exciting. Talking about CSS-grid, blend-mode, custom-properties ... etc. But already for many years, there is the property called background. And I think it's pretty underrated. So I would like to show you what the not-so-familiar possibilities are that this seemingly simple property has to offer.
Ever since Ethan Marcotte coined the term Responsive Web Design in 2010, we've been working hard to make websites look good on our smartphones' small screens - but what about large monitors? Unfortunately, these still fall by the wayside in most design phases. The result is narrow content areas on huge screens. To get around this problem, Nils shows ways to make fonts and elements look good on large devices using relative scaling factors.