Introduction to Composing Layouts in React

Welcome to Composing Layouts in React

Introduction

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.

CSS in the Age of Components

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.

What is Layout Composition? A React Layout Primitives Guide

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.

Encapsulated CSS - How to Apply CSS in a Composable Way

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.

Normal Document Flow in HTML, CSS, and React

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.

CSS Grid vs Flexbox for Composable Layouts

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

How to Add a CSS Reset to Remove Default Browser Style

Composable Layouts

What are 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

How to Build a Stacked Component Layout in React

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.

How to Build a Split Pane Layout in React

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.

How to Build React Grid Layouts With Custom Column Numbers

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.

How to Build a React Responsive Grid 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.

How to Build Responsive React Text Elements With InlineCluster

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.

How to Add Inline Styling to React Components

Layout Primitives - The Spacers

Introduction to layout wrapper primitives

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.

How to Build a Pricing Page Widget in React With PadBox

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

Automatically Center Text DIVs with React Center 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.

Resize Images And Maintain Aspect Ratio in React and CSS

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.

How to Vertically Center a DIV in React With CSS

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

How to Build Accessible Navigation Divs in React

Layout Primitives - The Wrappers

Introduction to The Settings Pages

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

How to Build a React Navbar With a Menu and Header

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

How to Build a React Sidebar Menu

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

How to Build a Profile Settings Page in React

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

How to Build a Privacy Page with Toggle Buttons in React

Composing Layouts in Practice

Bonus Lessons Introduction

In this lesson, you will learn how to build the ColumnDrop primitive and use it to layout BlogPost cards.

The ColumnDrop Component

The Reel Component

Bonus Lessons

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.

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.

Composing Layouts in React

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

Now that we understand the power of composition when working with layouts, the next obvious question is how do we apply this in practice? One of the more important parts of building composable layouts is knowing at which level in your component tree you should be applying your styles. This is why I have compiled some important principles that I like to call "Encapsulated CSS".

Encapsulated CSS is a term I use to summarize the rules of how to apply CSS styles in a composable way. It's based on the programming principle of encapsulation. Here is my best attempt to define encapsulation in a language-agnostic way: Encapsulation involves grouping related things and restricting access to those things, except through appropriate channels.

For example, many languages utilize a module system, which follows the principles of encapsulation.

, you get a group of functions that help you build a React application:

React.createElement();
React.useState();
React.useEffect();
// etc

However you don't have access to the actual internals that make a React application work. Those internals are 

 inside of the React namespace, and only through the exposed functions can you access the React internals.

In object-oriented programming, one often implements encapsulation via private properties and methods, like this:

class Person {
  #firstName;
  #lastName;

  constructor({ firstName, lastName }) {
    this.#firstName = firstName;
    this.#lastName = lastName;
  }

  getFullName() {
    return `${this.#lastName}, ${this.#firstName}`;
  }
}

const robertSmith = new Person({ firstName: "Robert", lastName: "Smith" });

robertSmith.getName(); // Smith, Robert

robertSmith.#lastName = "Jones"; // Syntax Error

Functional programming would probably use Closures to achieve something similar:

In both of those examples, you have values that are grouped together and access to them is restricted through appropriate channels.

Encapsulated CSS is based on that same principle. It's a methodology that helps you group together related styles at the correct component level, only applying styles through appropriate channels.

---
title: Encapsulated CSS - How to Apply CSS in a Composable Way
slug: encapsulated-css
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/3oqe0g9cek
useMdx: true
---

Now that we understand the power of composition when working with layouts, the next obvious question is how do we apply this in practice? One of the more important parts of building composable layouts is knowing at which level in your component tree you should be applying your styles. This is why I have compiled some important principles that I like to call "Encapsulated CSS".

## What is Encapsulated CSS?

Encapsulated CSS is a term I use to summarize the rules of how to apply CSS styles in a composable way. It's based on the programming principle of encapsulation. Here is my best attempt to define encapsulation in a language-agnostic way: Encapsulation involves grouping related things and restricting access to those things, except through appropriate channels.

For example, many languages utilize a module system, which follows the principles of encapsulation.

```jsx
import React from "react";
```

When you import a module like `React`, you get a group of functions that help you build a React application:

```jsx
React.createElement();
React.useState();
React.useEffect();
// etc
```

However you don't have access to the actual internals that make a React application work. Those internals are _encapsulated_ inside of the React namespace, and only through the exposed functions can you access the React internals.

In object-oriented programming, one often implements encapsulation via private properties and methods, like this:

```javascript
class Person {
  #firstName;
  #lastName;

  constructor({ firstName, lastName }) {
    this.#firstName = firstName;
    this.#lastName = lastName;
  }

  getFullName() {
    return `${this.#lastName}, ${this.#firstName}`;
  }
}

const robertSmith = new Person({ firstName: "Robert", lastName: "Smith" });

robertSmith.getName(); // Smith, Robert

robertSmith.#lastName = "Jones"; // Syntax Error
```

Functional programming would probably use Closures to achieve something similar:

```javascript
function personNameFactory({ firstName, lastName }) {
  return () => `${lastName}, ${firstName}`;
}

const getRobertSmithsFullName = personNameFactory({
  firstName: "Robert",
  lastName: "Smith",
});

getRobertSmithsFullName(); // Smith, Robert
```

In both of those examples, you have values that are grouped together and access to them is restricted through appropriate channels.

Encapsulated CSS is based on that same principle. It's a methodology that helps you group together related styles at the correct component level, only applying styles through appropriate channels.

Travis Waith-Mair

What's up guys? Travis here with another lesson in composing layouts in React.

Today we're going to learn about encapsulated CSS.

Now that we understand the power of composition when working with layouts,

the next obvious question is how do we apply this in practice?

One of the more important parts of building composable layouts is knowing at

This is why I have compiled some important principles I like to call encaps

encapsulated CSS is a term I use to summarize the rules of how to apply CSS

It's based on the programming principle of encapsulation.

Now here's my best attempt to define encapsulation in a language agnostic way.

encapsulation involves grouping related things and restricting access to those

things except through appropriate channels.

For example, many languages utilize a module system which follows the principle

When you import a module like React, you get a group of functions that help you

Here we have create element, use state, use effect. All of these are part of

However, you don't have access to the actual internals that make the React

Those internals are encapsulated inside of the React namespace,

and only through the exposed functions can you access the React internals.

In object oriented programming, one often implements encapsulation via private

Here we have a person class with two private properties called first name and

last name that are marked private with that hashtag at the beginning of each of

And then we have a constructor that takes an object with the first name and

last name and assigns those values to those private properties.

Finally, we have a method that returns the last name and first name in a string

We can create a new person like Robert Smith.

We can get the name, as you can see, where we call get name and it returns

But we can't change the actual private property because that is a private

property that is not available outside of that constructor when we first knew

Functional programming would probably use closures to achieve something similar

Here we have a function called the person name factory that once again takes an

And it returns another function that when it's called will return that same

So we can call that person name factory with Robert Smith and get a function

that we can call get Robert Smith's full name.

And when we call it, we get Robert Smith's full name.

Once again, we still we don't have access to those values inside of that

We only have access to call the function that is returned.

Both of these examples, you have values that are grouped together and you

access them through a restricted function.

encapsulate CSS is based on that same principle is a methodology that helps you

group together related styles at the correct component level and only applying

Why is it encapsulate CSS the key to building composable layouts?

Well, the biggest enemy to composing layouts is when components already have

built in opinions on how they should be laid out.

Have you ever had an element or a component that wouldn't lay out on the page

Only to find out that it had some built in margin or width that was interfering

The rules of encapsulate CSS help you avoid this by showing you where to apply

your styles in a way that won't conflict with the environments that are being

So the question is how do you apply the principles of encapsulation to CSS?

I'd like to take a step back and revisit the CSS box model.

In the box model, an element is comprised of multiple layers of boxes.

These boxes are wrapped around the content of our element, kind of like an

The first layer around the content is the padding box.

Next we have the border box and then finally the margin box.

If I were to ask you at which layer or layers are considered part of the

element, at which layers are considered outside of the element, what would you

An excellent start would be to think how elements are sized.

By default, an element size is calculated based on its content plus the padding

For example, if you had a border of one pixel and a padding of one pixel, then

the contents in line size would be 14 pixels wide if you had a 10 pixel content

That means we have one pixel on each side for the border, one pixel on each

side for the padding and 10 pixels for the actual content, meaning 14 pixels

The elements in line size or its width would still be 14 pixels.

This is because margin describes how much an element pushes away from other

elements, but doesn't contribute to the element's actual size.

In other words, the margin layer is considered outside of the element.

For further confirmation, the box sizing property, which is used to determine

how the element size is calculated, can accept three properties, the content

There is no margin box property, so it's pretty safe to say that the border box

is the boundary of our components encapsulation.

So with that background knowledge, there are two essential principles of encaps

The first principle is components do not lay themselves out.