Issue 63
CSS Grid and subgrid, feature queries, CSS Shapes, and Pattern Library adoption.
News
Issue 63
It certainly feels as if we are heading into the final stretch before Grid Layout is ready for production use, this is reflected by the increase in tutorials and information on the subject. There are some longer pieces in this email. If you are interested in the technical side of CSS in browsers you will enjoy the post documenting Grid Layout discussion at the Web Engines Hackfest.
For anyone who has jumped on the pattern library bandwagon and is now wondering how to maintain use and adoption of the pattern library in ongoing workflow, check out Vitaly's piece from Smashing Magazine.
In the next three weeks I'll be at CSS Dev Conf in San Antonio, All Things Open in Raleigh and An Event Apart in San Francisco. Come say hello if you are at any of those events.
Rachel Andrew, CSS Layout News
Web Engines Hackfest 2016 – make everything intensely
Interesting post getting into the weeds of Grid Layout browser implementation. If that doesn't interest you then this quote might,
"... we discussed about the current state of CSS Grid Layout implementation in the different engines. The implementation is almost complete in most of the main engines. Thanks to the collaboration between Igalia and Bloomberg we can confirm that WebKit and Blink’s implementations are almost completed. We have been evaluating Mozilla’s Gecko implementation of Grid and we verified it’s in a similar status. We talked about the recent news from TPAC, which Manuel Rego attended, about the CSS Grid Layout specification becoming Candidate Recommendation. Because of all these reasons, we have agreed with Christian that it’d be good to send the Blink intent-to-ship request as soon as possible; in case it’s accepted, it could be enabled by default in the next Chrome release."
Learn
Magic randomisation with nth-child and Cicada Principle | Charlotte Jackson, Front-end developer
Here is a fun technique for creating randomisation with nth-child.
The right layout tool for the job → WebExpo 2016
My talk and slides from WebExpo in Prague where I discussed choosing the right layout tool for the job, with some fun demos of Grid and Flexbox.
A Redesign with CSS Shapes · An A List Apart Article
Using CSS Shapes to enhance a design progressively and responsively.
@supports will change your life | Charlotte Jackson, Front-end developer
Charlotte Jackson explains how to use @supports - CSS Feature Queries.
Will we be flattening our HTML for CSS Grids? | CSS-Tricks
I'm pretty sure that grid is now going to hit browsers without subgrid support, so I'm glad people are still flagging up this as an issue as I really hope we get this into browsers very soon. At the very least, if we are talking about this issue hopefully the problem will be understood by developers learning grid, and we won't see these problems arise.
Interesting
Abusing CSS Grids to Draw Sequence Diagrams
This is a very cool grid layout demo, using grid to build a sequence diagram.
Taking Pattern Libraries To The Next Level – Smashing Magazine
A huge article from Vitaly, which could almost be a chapter of a book, on working with pattern libraries. I like the focus on ensuring that the pattern library becomes a consistent part of the workflow, rather than ending up being something that is used initially and then abandoned.
Our Sponsor
Learn Flexbox, Grid, Shapes and more
In this workshop I pass on everything I know about CSS Layout. My aim is to explain how the existing methods we have been using work, why they are limited and what they really are useful for. Then give you all of my knowledge about new layout methods - Shapes, Flexbox, Grid and more. You'll know when and how to use these methods now and in the future.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.