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
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 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.
