Flex Albatross Fab-Four Layout

Wireframe sketch, CSS/HTML layout for Copywriting Page

Craig Webb Art Copywriting Page

Kicking around how to build a layout utilizing component-breakpoint pattern

Brainstorm Wireframe Sketch

I wanted a copywriting page that looks more like a blog than a resume. The layout I want is fluid with components that flex and fills space like a masonry layout.

Heydon Pickering presented a layout pattern he called “The Holy Albatross” at a Web Conferences Amsterdam and posted an article on his blog in January 2019. His Albatross pattern provides the ability to assign component breakpoints without media queries. In his presentations he also harkened back to a tutorial called “The Fab-four Layout”, by RĂ©mi Parmentier in 2016.

The pattern that worked for me is a mashup of the two techniques, using flex-cards with flex-wrap, and internal flex-items.

Flex Albatross Fab-Four Layout

Flex Albatross Fab-Four Layout sketch

Flex Albatross Fab-Four Layout sketch

Having worked out the albatross method of building component-breakpoints, I needed to decide how to apply the pattern to a working layout.

I considered using a flex-masonry pattern or putting the albatross components into a CSS grid layout.

The next morning I wrote at the bottom, “Maybe it should all be Albatross.”

Flex-wrap Layout Prototype 01

Flex-wrap Layout Prototype

Flex-wrap Layout Prototype proof of pattern

This prototype worked out the needed elements for the layout. Set to flex-wrap, components stretch to fill space, flow to the next line, or collapse at the assigned breakpoint.

See the bitty-titty-block at bottom, set to 33%, stretch to 50% width to fill the line.

The boxes stretch height to match the height of neighbors.

The Comps and Wireframes page utilizes this albatross fab-four pattern for the layout, as does this wireframe project iframe and the Craig Webb Art copywriting page.