Estimated reading time: 1 minute, 15 seconds
Estimated reading time: 2 minutes, 30 seconds
For some time I have been attempting to recreate “masonry” effects in flexbox, where images are arranged like bricks in a wall. My previous attempt was moderately successful, but it ran ragged and lacked the dynamism I wanted.
flex value for each element?
The solution – also available on CodePen – allows designers to load images of any dimension and aspect ratio into a container element, apply a class, and have a seamless image masonry effect generated automatically on the page using modern web standards, with no plugins or frameworks required.
The CSS named color system is notoriously bad: keywords are often difficult to remember (navajowhite), illogical (darkgrey actually displays lighter than dimgray) and/or visually questionable (lime and fuchsia verge on the bilious).
Until CSS custom named hues and variables are widely supported, preprocessors remain the best way to create your own custom color names. Defining site colors in Sass creates a cohesive color library that can be used to style content quickly and easily, with named colors that are significantly easier to remember and type than their hex equivalents. However, it can be burdensome to build a decent color library with a logical naming system.