CSS Layout News - Issue 151 - 19th Jun 2018

Issue 151

Last week I was at CSS Day in Amsterdam, which really was a most excellent event. A perfect mix of CSS theory, and practical things that will be useful in work right away. You can find most of the slides on Notist , there will also be video coming soon and I'll be sure to be linking to those as they come out.

Our sponsor this week is Gymnasium , offering free online courses on web development, design, user experience, and content creation. Please do check them out. I also have empty sponsorship slots for the next few weeks, it would be fantastic to fill those. Have a look at the sponsorship page and let me know!

Container Query flow chart

A flow chart to help you answer the question of whether you really need container queries, or if an existing solution will solve the problem instead.

codepen.io

Image Inconsistencies: How and When Browsers Download Images – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

A very useful post from Harry Roberts detailing how browsers deal with downloading images.

Designing Web Content for watchOS | Erik Runyon

With web content coming to Apple Watch, this post helps you get a head start in designing for it.

CSS Media Queries: Quick Reference & Guide ← Alligator.io

A short guide to media queries.

Creating a Bar Graph with CSS Grid | CSS-Tricks

On CSS Tricks, how to use Grid to create a bar chart. I kind of feel this data would be better represented as a table and then transformed, but it's a nice walkthrough.

css-tricks.com

The Layouts of Tomorrow | Max Böck - Frontend Web Developer

Nice write-up and demo using CSS Grid and Scroll Snapping.

Smashing Book 6 Excerpt: Bringing Personality Back To The Web — Smashing Magazine

In this excerpt from Smashing Book 6, Vitaly encourages us to bring personality back to our designs and user interfaces.

Swiss in CSS - animated posters

Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement. The source of the animated posters can be viewed on CodePen.

swissincss.com