Issue 90
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
Start Using CSS Grid Layouts Today – Rachel Andrew | Render 2017 - YouTube
My talk from Render in Oxford. There is also a CodePen collection of examples to go with this talk.
The invisible parts of CSS · MadebyMike
An excellent read about the "invisible" parts of CSS including the rendering process, box model and visual formatting model.
On hiding content
"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."
Block formatting contexts and lists – The Sea of Ideas
A nice technique using the flow-root value of display.
Replace Bootstrap Layouts with CSS Grid ★ Mozilla Hacks – the Web developer blog
An experiment in replacing the Bootstrap Grid with CSS Grid Layout.
Focusing a `background-image` on a Precise Location with Percentages | CSS-Tricks
Working through the logic involved in focusing an image as a background image with percentage values.
Interesting
Inspiration for Grid Loading Animations | Codrops
Grid loading animations with Masonry and anime.js.
Container Query Discussion | CSS-Tricks
Chris Coyier brings together various thoughts and posts on the subject of Container Queries.
Our Sponsor
Save development time and frustration on every project!
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.