Anthony Campolo and Travis Waith-Mair demonstrate the responsive, reusable layout components provided by the Bedrock Layout library and discuss its motivation, design, and usage.
Episode Summary
In this episode, Anthony Campolo interviews Travis Waith-Mair about Bedrock Layout, a CSS framework for creating responsive layouts. Travis explains the motivation behind creating Bedrock Layout, which stemmed from his experience working on internal design systems. The framework aims to provide composable layout primitives that can be easily combined to create complex layouts without relying on JavaScript. Throughout the discussion, Travis demonstrates various components like Stack, Inline, and Cover, showing how they can be used to create responsive designs. He also touches on the framework’s philosophy of “encapsulated CSS” and intrinsic responsiveness. The conversation covers topics such as the evolution of CSS frameworks, the challenges of naming conventions in design, and the future plans for Bedrock Layout, including internationalization efforts and creating more examples and recipes for users.
Chapters
00:00 - Introduction and Background
Anthony Campolo introduces the episode’s topic, Bedrock Layout, and briefly mentions his recent career move to Edgio. Travis Waith-Mair joins the stream and introduces himself, discussing his work at Plex and his creation of Bedrock Layout. They touch on the concept of composable layout primitives and how Bedrock Layout aims to be the “Lodash of web layouts.” This chapter sets the stage for the detailed discussion of Bedrock Layout that follows, providing context for viewers about the guests and the main subject of the episode.
02:56 - Understanding Bedrock Layout and Its Components
Travis begins demonstrating Bedrock Layout components, starting with the Stack component. He explains the concept of “encapsulated CSS” where parent elements control layout and spacing. They discuss the naming conventions used in Bedrock Layout, such as “gutter” vs. “gap,” and the reasoning behind these choices. Travis shows how to nest Stack components and adjust their properties. This chapter provides a hands-on introduction to using Bedrock Layout components and the philosophy behind their design.
23:23 - CSS Attribute Selectors and the Avo Method
The discussion shifts to CSS attribute selectors and how Bedrock Layout utilizes them. Travis explains the Avo method by Michael Chan and how it influenced Bedrock Layout’s design. They explore different types of attribute selectors and their use cases. This chapter delves into the technical underpinnings of Bedrock Layout, providing insights into its implementation and the CSS techniques it leverages.
47:25 - Building a Hero Component with Bedrock Layout
Travis guides Anthony through building a hero component using Bedrock Layout primitives. They use the Inline and Cover components to create a responsive layout. Travis demonstrates how to customize the components’ behavior using props like “switchAt” and “stretch.” They also discuss how Bedrock Layout allows for semantic HTML through the “as” prop. This chapter showcases the practical application of Bedrock Layout in creating common web design patterns.
76:19 - Advanced Composition and Future Plans
In the final segment, Travis demonstrates more advanced composition techniques using Bedrock Layout, such as creating a super-centered layout. They discuss the use of CSS units like “ch” for responsive design. Travis shares his future plans for Bedrock Layout, including improving documentation, adding more examples and recipes, and expanding language support. The chapter concludes with a discussion on the benefits of using Storybook for component development and testing.