Issue 86
News
Issue 86
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
Update CSS Grid - Edge UserVoice
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.
Bug 150445 – Flexbox - flex direction column slow layout performance
A resolution to a flexbox performance bug in WebKit that was a particular issue with flexbox frameworks that introduce nesting.
Learn
Grid “fallbacks” and overrides - rachelandrew.co.uk
Another cheatsheet based on my own notes, this one detailing possible grid fallbacks and overrides for other layout methods.
Playing with CSS Grids
A nice example and write-up of a CSS Grid based design.
CSS Grid and Grid Inspector in Firefox — Mozilla
Mozilla have put together a page with some grid demos and information.
New side project: highlights minisite, and checking for interaction feature support
A nice write-up from Melanie Richards demonstrating a use case for interaction feature queries.
Design Better Data Tables – Mission Log – Medium
Designing data tables is hard, this article contains lots of practical tips and advice to improve your tables.
Hassle-free Full Bleed with *:not() - daverupert.com
An excellent use case for the :not() selector, which solves a common layout issue.
Les concepts de base des grilles CSS - CSS | MDN
My articles and guides on CSS Grid Layout have been translated into French.
Interesting
CSS Grid Layout is Here to Stay - Rego's Everyday Life
"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.
Smashing Magazine redesign beta
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.
Our Sponsor
Learn CSS Layout with me! Master the basics through to advanced new features.
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.