Smart Layouts, Gap Decorations, and a few links

Hey friends,

Welcome to a new issue of ishadeed.com newsletter.

Speaking at CSS Day

First, I spoke at CSS Day conference in Amsterdam. My talk was about Smart Layouts and the slides are available here. Speaking at CSS day was something I wished to do in the last few years and I'm glad I did it.

It was a great experience meeting many online friends that I knew through CSS. What a great two days full of CSS wisdom!

Links from around the web

Gap decorations! 🥳

The Microsoft Edge team worked on implementing the feature of adding gap decorators for CSS grid. This is exciting!

.layout {
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: 1px;
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

Please try and play with it. If you spot any issues, now is a great time to share your feedback.

Quantity Query Carousel by Chris Coyier

In my CSS Day talk, I showcased a demo that converts a section into a carousel if we have more than X items. I'm thrilled to see that my idea inspired Chris to try it himself. The example is slide 194 in my talk, and you can check the demo here.

Liquid Glass, but in CSS by Pup Atlas

An exploration of how to build the liquid glass effect with CSS. The article contains an excellent walkthrough of using CSS and SVG filters to achieve the effect.

1fr 1fr vs auto auto vs 50% 50% by Chris Coyier (again!)

I love this article that explores the difference between 1fr, auto, and 50% in a CSS grid context. It's a great way to refresh your knowledge.

That’s it for this issue. I’ve enabled comments via Buttondown, so feel free to reply or comment if you have thoughts or questions.

Thank you for reading.