Welcome to
Composing Layouts in React
Course Syllabus and Content
Introduction
1 Lesson 2 Minutes
Introduction to Composing Layouts in React
Composable Layouts
6 Lessons 37 Minutes
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.
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.
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.
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.
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.
In this lesson you will learn how to reset the default browser styles so that they follow Encapsulated CSS.
Layout Primitives - The Spacers
7 Lessons1 Hours 38 Minutes
An Introduction to layout spacers
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
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.
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.
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.
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.
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.
Layout Primitives - The Wrappers
6 Lessons1 Hours 16 Minutes
Introduction to layout wrapper primitives
In this lesson, you will learn how to build the PadBox primitive and use it in a Pricing Plan component.
In this lesson, we will be creating a Center layout primitive that centers itself and its children.
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.
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.
Let's revisit the Hero section from Module 1 and build it for real using the primitives we have learned.
Composing Layouts in Practice
5 Lessons1 Hours 16 Minutes
Introduction to settings pages
This lesson is going to focus on getting the menu and header completed on our mock Settings Page
This lesson will focus on getting the main section with the sidebar navigation for our Settings page.
In this lesson, we will be focusing on the profile pane.
In this lesson, we will be finishing the Settings page by completing the privacy pane.
Bonus Lessons
3 Lessons
Bonus lessons
In this lesson, you will learn how to build the ColumnDrop primitive and use it to layout BlogPost cards.
In this lesson, you will learn how to build the ColumnDrop primitive and use it to layout BlogPost cards.