Speaking in just a couple hours 🤘🏻💀

The Slides · Codepen Collection

Off to CSS Day; see ya there‽

Mt. Rainier in the bg, on a friend's little personal website boat, playin banjo tunes in double C:

Vibe check? This is the way.

Here are a few of my least favorite, easy to forget, unintuitive CSS layout "solutions":

Height 0? Wat? Shrink 0? Wat? Theo thinks he likes it. But…

Then there's minmax(min(), 1fr)? Wat?

Functional programming much?…

The minimum width of grid and flex children is auto. Setting it explicitly to 0 removes the intrinsic size, unlocking various things.

Study more about it on CSS Tricks by Chris Coyier or from Theo over on YouTube.

Often I'll make a flex layout where 1 child should be "pushy" or a dominant space consumer. Works great until a sibling to the pusher goes oval at small viewports, even though a firm height and width are set.

The fix:

So intuitive. Not.

So I don't have this full, triple nested function memorized. I can remember "repeat, auto-fit, minmax" as like the summary of the trick. Which gets me this far:

But that's not the full snippet I end up using in production. It works great until it's a single column of 10rem minimum width boxes. At which point, they dont go smaller, and so they can cause horizontal overflow in a parent container that's smaller than 10rem.

The fix:

It's extra to write, but it unlocks the "intrinsically responsive grid layout", which behaves as I was hoping all along.

Study more in this post from Evan Minto:

When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.

What could you create if you had 30 minutes to plan and 4 hours to build? Me,

They picked the Napoleon Dynamite thumbnail for Lane and I 🤣

We lucked out and got a rad one.

Single player, multiplayer, cooperative, competitive, or something totally

Lane and I def

We chose to try a game that uses the

A Temporal

At least that's what we planned on…

These were the lovely folks I got to spend 4 hours with:

Temporal was pretty cool, but as

I did get the pleasure to use a BenQ RD280U tho.

The 4k 3:2 matte UHD display was really nice. They say it's made for coding, and

Plus, HDR content is awesome, and I could capture high quality UI captures and

I got to take one home and try it out. It's light years ahead of the one I had

The arm is super strong. There's tons of charging ports. It's a really great

Here's that 3D bird Codepen that's

There were no winners or losers!

We all had a blast; I'm lookin forward to seein the

Your

Try this one! Lots of fun little

CSS Zen Garden Leave…

Taking time, breathing slow, clearing my head, tending to a

Seems appropriate.

CSS

Watch ·

Recording is live!

Watch

CSS Mixins and

Bramus has a great intro on

and using it:

For CSS Mixins as of writing this, you'll need

You have all the latest information now: