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 that put notes and other music symbols exactly where they need to be. And because it’s SVG and em based, it’s entirely scalable. The whole thing is on GitHub and is usable via a <scribe-music> Web Component.
Wanna learn modern CSS layout?
Laying out designs on the web with CSS has gotten a lot more powerful in recent years. CSS grid, flexbox, and container queries are incredibly powerful tools for that, and we have a complete learning course on them from Jen Kramer.