Welcome to Composing Layouts in React

Introduction to Composing Layouts in React

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:17] Hi everybody and welcome to Composingly Outz and React. My name is Travis Worth-Marrand, I'm a senior front-end developer and the creator of Bedrock Layout Primus, a library of components designed to make layout composition easier.

  • [00:18 - 00:40] Not 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've finally learned how to write CSS in a way that no longer fights with the modern component model , but instead embraces it.

  • [00:41 - 00:55] I'm passionate about CSS layout and I look forward to teaching you the same skills that I learned in order to build the Bedrock Layout Primitive Library. Now Composingly Outz and React is for both novice and experienced developers who want to take their layout skills to the next level.

  • [00:56 - 01:14] I will teach you the practical skills you need to build modern layouts from web without depending on the heavy CSS frameworks. Unlike courses or blog posts that teach you layout properties in isolation, I'm going to show you some practical layout patterns that you can use every day with solving your layout challenges.

  • [01:15 - 01:33] Now in the process, we will also recreate some of the most interesting layouts found on the wild, such as complex forms, heroes, sidebars, and responsive grids, allowing you to build almost anything you need on the web quickly and easily. This course is going to be presented in four modules.

  • [01:34 - 01:50] In module one, we will introduce encapsulated CSS and look at how it allows us to build composable layouts. We will also reintroduce the Flexbox and CSS Grid as well as patterns of implementing encapsulated CSS.

  • [01:51 - 02:06] This module lays the foundation of knowledge you will need to build composable layouts with layout primitives. In module two and three, we will be rebuilding the layout primitive library focusing on spacers and wrappers specifically.

  • [02:07 - 02:15] And finally in module four, we will use what we learned in about encapsulated CSS and layout primitives to compose some practical layouts. Welcome to this course.

  • [02:16 - 02:27] I'm side heavy here and I'll see you on the first module. Bye.