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.

youtube.com


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.

madebymike.com.au


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."

hiddedevries.nl


Block formatting contexts and lists – The Sea of Ideas

A nice technique using the flow-root value of display.

paulbakaus.com


Replace Bootstrap Layouts with CSS Grid ★ Mozilla Hacks – the Web developer blog

An experiment in replacing the Bootstrap Grid with CSS Grid Layout.

mozilla.org


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.

css-tricks.com

Interesting

Inspiration for Grid Loading Animations | Codrops

Grid loading animations with Masonry and anime.js.

tympanus.net


Container Query Discussion | CSS-Tricks

Chris Coyier brings together various thoughts and posts on the subject of Container Queries.

css-tricks.com

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.

thecssworkshop.com