Issue 244

News

Issue 244

Welcome to another issue of lockdown CSS Layout News. It's been an odd week, in so many ways so normal for me, as a homeworking introvert, who is quite happy to just hang out with her cat and write things about CSS. Yet so not normal, and much love to any of you who are unwell or have family members who are sick.

Various online events seem to be popping up, to replace our usual spring conferences. I'm doing an internal event today for the BBC, I have my upcoming CSS Layout Masterclass, and there are a few other things in discussion. In the face of so much uncertainty I love the way in which our industry is trying to make the best of things, help each other out, and keep spirits up.

I hope you find something useful in the collection of links today - stay safe,

Rachel Andrew, CSS Layout News

Learn

Let's Learn CSS Grid! (with Rachel Andrew) · Learn With Jason

The recording of a live pair programming session, where we built a CSS Grid Layout and I tried to explain some tips and tricks along the way.

learnwithjason.dev

Front-end Challenges Club

A bunch of front-end challenges and suggested solutions.

piccalil.li

How to create an accordion hover effect with box-shadows - Sarah L. Fossheim

A nice tutorial showing how to use the box-shadow property to created a layered component.

fossheim.io

CSS Can Influence Screenreaders | Ben Myers

This has been linked to from everywhere in the last week or so, which is great, as it is useful to understand how CSS can influence screenreaders.

benmyers.dev

Hello subgrid!

As this newsletter goes out I'm presenting at a BBC internal conference, which would have been in-person, but due to the virus has gone online. Here are my slides.

noti.st

How to use the currentColor value in CSS – Js Craft

A quick tip on how to use currentColor.

js-craft.io

Embracing modern image formats · Josh W Comeau

Picking and choosing image formats for different browsers to serve the best formats depending on browser support.

joshwcomeau.com

Conic Gradients: Sunburst

I love this - needs a browser that supports conic-gradient().

codepen.io

Interesting

Smart Interface Design Patterns Checklists PDF — Smashing Magazine

A really lovely set of checklists from Vitaly, covering almost any UI element you can think of. A great way to promote conversations when designing an interface.

smashingmagazine.com