Let's Dive Into Bedrock Layout (with Travis Waith-Mair) | Some Antics

Join us as Travis Waith-Mair and I dive into Travis's component library and CSS framework for layout primitives, Bedrock Layout (https://bedrock-layout.dev)!

Broadcasted live on Twitch on February 22, 2022. Watch future streams live at https://www.twitch.tv/someanticsdev.

Transcript and links at: https://someantics.dev/bedrock/
CodePen: https://codepen.io/bendmyers-the-typescripter/pen/eYeKNVY?editors=1100
Follow Travis on Twitter: https://twitter.com/travisWaithMair
Follow Travis on Twitch: https://twitch.tv/BuildingBedrockLayout
Travis's Blog: https://non-traditional.dev

#WebDev #WebDesign #CSS

---

Mentioned Links:
• Join the Lunch Dev Discord server: https://discord.gg/lunchdev
• Listen to Travis talk about Bedrock Layout on FSJam Podcast: https://fsjam.org/episodes/episode-54-bedrock-layout-with-travis-waith-mair
• Finding Your Online Dev Community: https://non-traditional.dev/finding-your-online-dev-community-42a7b8b5d819
• Every Layout on composition: https://every-layout.dev/rudiments/composition/
• Jen Simmons's talk on designing layouts with CSS: https://talks.jensimmons.com/Og7SzB
• Bedrock Layout's CSS-only version: https://bedrock-layout.dev/?path=/docs/css-only-a-css-only-version--page
• AVO methodology: https://chan.dev/posts/avo-a-bem-dialect-using-data-attributes/
• Open Props: https://open-props.style/
• Some Antics: Build a Component Library with SvelteKit, with Brittney Postma: https://youtu.be/eUslcJLGk9g
• Bedrock's center primitive: https://bedrock-layout.dev/?path=/docs/wrapper-components-center--api
• Bedrock's inline primitive: https://bedrock-layout.dev/?path=/docs/css-only-inline-css--align
• All Contributors: https://allcontributors.org
• Some Antics: Making a Page Builder with Next.js, Storybook, and Prismic, with Alex Trost: https://youtu.be/cllxHtdd4-g
• Heydon Pickering's Flexbox Holy Albatross talk: https://www.youtube.com/watch?v=RUyNJaoJH_k
• Bedrock Layout's GitHub repository: https://github.com/Bedrock-Layouts/Bedrock

---

00:00 Introductions
03:46 What is Bedrock Layout?
11:48 A First Look at the Dad-A-Base
15:00 Global Layouts with Center Primitives
18:49 Hero Layouts with Cover Primitives
24:49 Side-By-Side Layouts with Inline Primitives
29:36 A Brief Interlude for Bedrock Contributors
31:15 More Side-By-Side Layouts with Inline Primitives
34:42 Stacking Inline Layouts Responsively (Or, Trying To)
41:59 A Brief Interlude for Kevin's Raid
43:58 Laying Out Images with Frame Primitives
49:47 Grid Layouts
54:46 Vertical Rhythm with Stack Primitives
55:57 Wrapping Up