Link List

A few inter­est­ing CSS find­ings from the threads app by Meta.

A Tail­wind CSS plu­g­in to gen­er­ate util­i­ty class­es for inter­po­lat­ed flu­id type and space scales based off utopia.fyi — cws­dig­i­tal/­tail­wind-utopia: A Tail­wind CSS plu­g­in to gen­er­ate util­i­ty class­es for inter­po­lat­ed flu­id type and space scales based off utopia.fyi

Encode SVGs eas­i­ly to more eas­i­ly style them with CSS and JS.

Flu­id respon­sive design. Utopia is not a prod­uct, a plu­g­in, or a frame­work. It’s a set of free tools to sup­port your next Utopi­an project.

Learn how to migrate a fron­tend app from Web­pack to Vite, includ­ing why you should do it, and how to install Vite and update plu­g­ins.

A few inter­est­ing CSS find­ings from the threads app by Meta.

What if I will tell you how we could solve fit-to-width text with pure CSS with­out any hard­cod­ed para­me­ters? Curi­ous­ly, scroll-dri­ven ani­ma­tions will allow us to do just that! Join me as I con­tin­ue explor­ing the exper­i­men­tal imple­men­ta­tions of the lat­est specs.

CSS mix blend modes pro­vide an easy, yet pow­er­ful way to cre­ate visu­al­ly inter­est­ing designs.

Apply­ing a shad­ow to a sticky page head­er when scrolling using the Inter­sec­tion Observ­er API.

To learn more about the behav­iors of con­tain­er query units, we’ll explore three flu­id typog­ra­phy tech­niques applied via a ​“mix­in” using cus­tom prop­er­ties. These upgrad­ed meth­ods will pro­duce tru­ly respon­sive typog­ra­phy, regard­less of con­text.

For­mat ordered lists in con­tract for­mat. Top-lev­el ol > li styled as ​“1.” with nest­ed, ol ol > li, styled as ​“1.1” and third tiers, ol >ol > ol > li, styled as ​“1.1.a”.

Demo of the ​‘goo’ fil­ter as shown in this video: https://​twit​ter​.com/​s​n​o​r​k​l​T​V​/​s​t​a​t​u​s​/​1​6​3​8​2​5​7​1​2​4​1​2​6​9​12522

A new API is com­ing to the web plat­form to help you posi­tion ele­ments in an adap­tive way with no tricks.

This is my favourite thing to do with the :nth-of-type() selec­tor.

This file in the about­feeds repo will trans­form your raw-look­ing RSS feed into a styled doc­u­ment when users click on your feed icon. It will now include instruc­tions help­ing the user under­stand how to use feed icons across the web.

Quick­ly cal­cu­late any CSS selec­tor speci­fici­ty score along with expla­na­tions. With full sup­port for com­plex CSS selec­tors.

A side-effect when show­ing scroll­bars on the web is that the lay­out of the con­tent might change depend­ing on the type of scroll­bar. The scroll­bar-gut­ter CSS prop­er­ty aims to give us devel­op­ers more con­trol over that. Works in Chrome and Fire­fox. No sup­port in Safari yet.

Cal­cu­lat­ing a flu­id font size can be tricky. This is the tool I use to make pre­cise flu­id typog­ra­phy with the clamp CSS func­tion.

Adam Argyle has a post on using the View Tran­si­tion API, which is still a canary fea­ture now, to pow­er text tran­si­tion with CSS.

Cre­ate, edit and save Tail­wind CSS col­or shades based on a giv­en hex­code or pick a col­or from an image.

This tool will help you mas­ter mul­ti-hued, mul­ti-stops col­or scales. What is that? ​“While a (lin­ear) vari­a­tion in light­ness is the most impor­tant qual­i­ty of a sequen­tial col­or scale, vary­ing the hue can bring fur­ther sig­nif­i­cant improve­ments. Hue vari­a­tion pro­vides a bet­ter col­or con­trast and thus makes the col­ors eas­i­er to dif­fer­en­ti­ate.” — Learn more here.

Prac­ti­cal CSS and design tips that helps in build­ing future-proof user inter­faces.

CSS data visu­al­iza­tion frame­work

Patrick Bros­set has an impres­sive deep dive into CSS gra­di­ents.