A wide-ranging set of resources this week, plenty of grid of course but also data tables, a gnarly flexbox bug fixed and a couple of design write-ups.
My calendar for 2017 is rapidly filling up but I would love to do more Grid Layout workshops - either public or in-house this year. If you would like some training on grid layout - and related methods from someone who really knows this stuff inside and out, drop me a line.
CSS Layout News
Your periodic reminder to go vote for updating CSS Grid support in Edge, and if you think your votes don't matter see this tweet.
A resolution to a flexbox performance bug in WebKit that was a particular issue with flexbox frameworks that introduce nesting.
Another cheatsheet based on my own notes, this one detailing possible grid fallbacks and overrides for other layout methods.
A nice example and write-up of a CSS Grid based design.
Mozilla have put together a page with some grid demos and information.
A nice write-up from Melanie Richards demonstrating a use case for interaction feature queries.
Designing data tables is hard, this article contains lots of practical tips and advice to improve your tables.
An excellent use case for the
:not() selector, which solves a common layout issue.
My articles and guides on CSS Grid Layout have been translated into French.
"Bloomberg uses Chromium and they were looking forward to having a proper solution for their layout requirements. They detected performance issues due to the limitations of the current layout modules available on the Web. They see CSS Grid Layout as the right way to fix those problems and cover their needs."
Lovely post detailing the collaboration between Igalia and Bloomberg that helped to bring us Grid.
I'm enjoying following along with the work that Smashing are doing to redesign their site, and I'm happy they have opened that process up as case studies from huge content-driven sites like this are valuable to all of us. Sara Soueidan worked on the front-end development and has written a case study about that work.
I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.
The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.