Issue 90
Issue 90 comes to you from Japan. I'm here for the CSS WG meeting.
News
Issue 90
Early this morning I landed in Japan, I'm here for the CSS Working Group face to face meeting. We have three days of meetings here to discuss various CSS specifications. It's a great chance to discuss things that really benefit from face to face discussion and the help of a whiteboard. I'm hoping that my brain will have joined me in this timezone before we start tomorrow morning.
A nice roundup of links this week - and not all grid layout! I have linked to the video of my talk from Render Conf, which explains the differences between grid and flexbox and also how we can use Grid and still support older browsers.
Rachel Andrew, CSS Layout News
Learn
My talk from Render in Oxford. There is also a CodePen collection of examples to go with this talk.
An excellent read about the "invisible" parts of CSS including the rendering process, box model and visual formatting model.
"In addition to it being a visual thing, hidden content is also a semantic thing. It describes not just what something looks like, it describes the thing’s meaning within the page structure."
A nice technique using the flow-root value of display.
An experiment in replacing the Bootstrap Grid with CSS Grid Layout.
Working through the logic involved in focusing an image as a background image with percentage values.
Interesting
Grid loading animations with Masonry and anime.js.
Chris Coyier brings together various thoughts and posts on the subject of Container Queries.
Our Sponsor
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.