Composing Layouts in React

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives. Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

 

4.9 206 students started

4h 52m

Published |Updated

What You Will Learn

What it means to compose layouts and why you should do it

How to apply the principles of Encapsualted CSS in our React components

The foundational layout primitives that every developer should know

CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts. The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts. Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course 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, our product teaches practical layout patterns that you can use every day when solving your layout challenges.

Course Content

4 modules25 lessons4h 52m total

Introduction

1 lesson 2m total

Welcome to Composing Layouts in React

Introduction to Composing Layouts in React

INTRODUCTION

2:30 minutes

Composable Layouts

6 lessons 37m total

CSS In The Age of Components

Using CSS in this age of components is difficult, especially where web layout is concerned. In this module, you will learn the rules to be able to build composable layouts.

LESSON

2:14 minutes

Composing Layouts

Complex layouts can be broken down into smaller layout primitives that can be combined to build more complex structures. Thinking compositionally will open up a more practical and reusable way of creating layouts on the web.

LESSON

5:33 minutes

Encapsulated CSS

Knowing where to place your styles is critical to understanding composable layouts. Using the Principles of Encapsulated CSS you will know exactly how to apply your layout styles in your components.

LESSON

8:53 minutes

Normal Flow as Composable Layouts

In the lesson, you will learn about Normal Flow and what patterns you can use to apply the principle of Encapsulated CSS in the context of Normal Flow.

LESSON

8:42 minutes

CSS Flexbox and CSS Grid as Composable Layouts

You will learn the basics of CSS Flexbox and CSS Grid, especially which properties conform to the Encapsulated CSS principles and which ones do not.

LESSON

6:27 minutes

A CSS Reset For Composable Layouts

In this lesson you will learn how to reset the default browser styles so that they follow Encapsulated CSS.

LESSON

5:40 minutes

Layout Primitives - The Spacers

7 lessons1h 38m total

Introduction to layout spacers

An Introduction to layout spacers

LESSON

2:02 minutes

The Stack Component

The Stack layout pattern is one of the most simple and common layout patterns on the web. In this lesson, you will learn how to build the Stack primitive and how to make it configurable for your situation

LESSON

17:07 minutes

The Split Component

The layout challenge that is as old as the web itself is putting two items next to each other. In this lesson, you will learn how to build the Split primitive to solve this problem.

LESSON

14:21 minutes

Columns and Column Component

Having a column-based grid system to lay our elements out on is very useful, which is why Bootstrap and other CSS frameworks are built on that model. In this lesson, you will learn how to build the Columns primitive and its helper the Column to build your custom column layout.

LESSON

18:25 minutes

The Grid Component

Building an inherently responsive grid of items has been reduced down into a single line of CSS. In this lesson, you will learn how to build the Grid primitive that easily lets us achieve this layout.

LESSON

11:04 minutes

InlineCluster Component

Text in a paragraph is one of the best examples of "responsive by default." Text will wrap and cluster according to the text alignment. In this lesson, we will learn how to achieve that same effect using the InlineCluster primitive.

LESSON

12:26 minutes

Inline Component

Clustering is one way to do responsive inline layouts, but sometimes we want to switch the direction that the items are flowing when we cross a certain threshold. In this lesson, we will learn how to build the Inline primitive that does just that.

LESSON

23:22 minutes

Layout Primitives - The Wrappers

6 lessons1h 16m total

Introduction to Layout Wrapper Primitives

Introduction to layout wrapper primitives

LESSON

2:39 minutes

The PadBox Component

In this lesson, you will learn how to build the PadBox primitive and use it in a Pricing Plan component.

LESSON

13:43 minutes

The Center Component

In this lesson, we will be creating a Center layout primitive that centers itself and its children.

LESSON

14:27 minutes

The Frame Component

In this lesson, we will build the Frame primitive, which frames out a visual media, like an image or video, and forces it into the aspect ratio needed for the design without distorting the image.

LESSON

19:59 minutes

The Cover Component

In this lesson, we will learn how to build the Cover primitive, which will vertically center its children and allow you to inject a top or a bottom section around it.

LESSON

17:14 minutes

The Hero Section Revisited

Let's revisit the Hero section from Module 1 and build it for real using the primitives we have learned.

LESSON

8:53 minutes

Composing Layouts in Practice

5 lessons1h 16m total

Introduction to The Settings Pages

Introduction to settings pages

LESSON

1:32 minutes

The Menu and Header

This lesson is going to focus on getting the menu and header completed on our mock Settings Page

LESSON

24:10 minutes

The Main and SideBar

This lesson will focus on getting the main section with the sidebar navigation for our Settings page.

LESSON

16:17 minutes

The Profile Pane

In this lesson, we will be focusing on the profile pane.

LESSON

20:05 minutes

The Privacy Pane

In this lesson, we will be finishing the Settings page by completing the privacy pane.

LESSON

14:05 minutes

Your Instructors

Profile image for Jarvis1010

Travis Waith-Mair

👋 Hi! I'm Travis Waith-Mair. I am a senior front-end developer and the creator of the Bedrock Layout Primitives, https://bedrock-layout.dev/, a library of components designed to make layout composition easier.

I am also the author of The newline Guide to Composing Layouts in React here at newline.

👋 Hi! I'm Travis Waith-Mair. I am a Senior Frontend Developer and the creator of the layout library, Bedrock Layout Primitives. I am passionate about CSS layout and look forward to teaching you the same skills that I learned to build this library.

Frequently Asked Questions

Who is this course for?

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level

What if I need help?

You can ask us questions anytime through the community Discord channel, #composing-layouts-in-react, or by sending us a message.

 
OrGet this course and every newline Book and Guide with a newline Pro subscription for just $20/mo

$39

$49

Composing Layouts in React

$39

$49