Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it doesn’t have fixed height rows. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
Knowing that Tab Atkins – author of CSS Grid Layout Level 1 – responded with I’m liking this quite a bit! was a good sign. What’s even better is that Firefox Nightly (version 77a1) has implemented it by now, behind a flag.
👨🔬 Do note that this Masonry addition is still a proposal and is considered to be highly experimental at the time of writing. The syntax is still being discussed upon and is NOT final at all. Heck, you can’t even find a mention of Masonry in the CSS Grid Module Level 2 Draft!
To enable the experimental Masonry implementation in Firefox Nightly go to about:config and set layout.css.grid-template-masonry-value.enabled to true.
Once enabled the following pen should show a nice Masonry Layout:
Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer.
The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ ("\u200d") you can glue all parts together so that they become an “Emoji ZWJ Sequence”, yielding a new Emoji.
🤓 My favorite Emoji ZWJ Sequence is the Rainbow Flag (🏳️🌈). It literally is the combination of a white flag (🏳) and a rainbow (🌈).
The logic behind displaying an image responsively is complicated. It involves determining how large the image will be displayed, as well as understanding whether the user is on a high-resolution display, among other things. Thankfully, the browser is better equipped than we are to handle this logic. All we need to do is give it some hints. We’ll use the srcset attribute to provide a list of image assets to choose from, and the sizes attribute to tell the browser how large the image will display at various breakpoints.
Yes, the syntax is still the same as in 2014, but it’s good to be remembered of it … I always find myself looking things up again when it comes to Responsive Images 😬
In his book Arcade Game Typography designer Toshi Omagari breaks down the evolution, design, and history of arcade game fonts. In this video from the Vox by Design series he’s interviewed and asked about his favorite 8-bit fonts.
Video game designers of the ’70s, ’80s, and ’90s faced color and resolution limitations that stimulated incredible creativity. With each letter having to exist in a small pixel grid, artists began to use clever techniques to create elegant character sets within a tiny canvas.