[VIP] NewLine: Composing Layouts in React

Welcome​

Hi! I'm Travis Waith-Mair. I am a senior front-end developer and the creator of the Bedrock Layout Primitives, a library of components designed to make layout composition easier. Just like many of you, the way I was taught to write CSS, especially CSS layout, never seemed to fit well in this modern era of composable, component-based frameworks. After working on two different design systems, and my own layout library, I have finally learned how to write CSS in a way that no longer fights with the modern component model, but instead embraces it. I am passionate about CSS layout and look forward to teaching you the same skills that I learned in order to build the Bedrock Layout Primitives Library.

Composing Layouts in React is for both novice and experienced developers who want to take their layout skills to the next level. I will teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog posts that teach each layout property in isolation, I'll show you some practical layout patterns that you can use every day when solving your.

WELCOME: INTRODUCTION INTRODUCTION:

• Start Here INTRODUCTION
• Welcome to Composing Layouts in React

MODULE 0:

• COMPOSABLE LAYOUTS LESSON 1
• CSS In The Age of Components LESSON 2
• Composing Layouts LESSON 3
• Encapsulated CSS LESSON 4
• Normal Flow as Composable Layouts LESSON 5
• CSS Flexbox and CSS Grid as Composable Layouts LESSON 6
• A CSS Reset For Composable Layouts

MODULE 1:

• LAYOUT PRIMITIVES - THE SPACERS
• Introduction to layout spacers
• The Stack Component
• The Split Component
• Columns and Column Component
• The Grid Component
• InlineCluster Component
• Inline Component

MODULE 2:

• LAYOUT PRIMITIVES - THE WRAPPERS
• Introduction to Layout Wrapper Primitives
• The PadBox Component
• The Center Component
• The Frame Component
• The Cover Component
• The Hero Section Revisited

MODULE 3:

• COMPOSING LAYOUTS IN PRACTICE
• Introduction to The Settings Pages
• The Menu and Header
• The Main and SideBar
• The Profile Pane
• The Privacy Pane