What is sheet music if not icons placed in particular vertical and horizontal positions? Stephen Band turned the system of sheet music into a CSS grid system where you control the placement of everything with classes and data-attributes.
https://cruncher.ch/blog/printing-music-with-css-grid/
Really clever trick via Temani Afif.
https://codepen.io/t_afif/pen/vYbdVjb
Fill the entire element with a gradient overlay on top of any existing background, which can make it easier to read text set on top.
We can *mostly* use HTML alone for this API. But here, we’ll use CSS to style the “links” within paragraphs and a JS library to position them, in lieu of CSS anchoring.
I wrote in my masonry proposal feedback: Are there any more fleshed out alternative proposals? I thought Jen presented strongly that CSS grid is a great place to put masonry layout, but also that it wasn’t arguing against anything else. Rachel Andrew has that “anything else”, which is display: masonry; with more explanation. What’s nice […]
This API, which you can use entirely in HTML, allows you to open an element on top of *everything* despite where it lives in the DOM and without any particular styling.
Nikita Prokopov with a pretty humorous article about centering things in web design. This is my claim: we, as a civilization, forgot how to center things. Centering things is almost trivial in CSS at this point. There are different approaches, because there are different situations. The knowledge to do so is pretty easy to find. […]
Let’s build a search form that looks like this: That feels like the absolute bowl-it-down-the-middle search form right now. Looks good but nothing fancy. And yet, coding it in HTML and CSS I don’t think is perfectly intuitive and makes use of a handful of decently modern and slightly lesser used features. The Label-Wrapping HTML […]
Jen Simmons posted Help us invent CSS Grid Level 3, aka “Masonry” layout over on the WebKit blog the other day and is actively soliciting feedback. Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take. Don’t mind if I do. Do […]
CSS has an aspect-ratio property, which has had full support since around 2021. It can be a very satisfying property to use, because it can help match how your brain 🧠 works or what the desired design outcome does better than forcing dimensions does. “I need a square here” or “I need to match the […]
In 2020, Max Stoiber wrote the 🌶️ spicy Margin considered harmful. On one hand, it seems silly. The margin property of CSS is just a way to push other elements away. It’s very common and doesn’t feel particularly problematic. On the other hand… maybe it is? At least at the design system component level, because […]
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
