Welcome to Composing Layouts in React

Introduction

CSS in the Age of Components

What is Layout Composition? A React Layout Primitives Guide

Encapsulated CSS - How to Apply CSS in a Composable Way

Normal Document Flow in HTML, CSS, and React

CSS Grid vs Flexbox for Composable Layouts

How to Add a CSS Reset to Remove Default Browser Style

Composable Layouts

What are Layout Spacers?

How to Build a Stacked Component Layout in React

How to Build a Split Pane Layout in React

How to Build React Grid Layouts With Custom Column Numbers

How to Build a React Responsive Grid Layout

How to Build Responsive React Text Elements With InlineCluster

How to Add Inline Styling to React Components

Layout Primitives - The Spacers

Introduction to Layout Wrapper Primitives

How to Build a Pricing Page Widget in React With PadBox

Automatically Center Text DIVs with React Center Component

Resize Images And Maintain Aspect Ratio in React and CSS

How to Vertically Center a DIV in React With CSS

How to Build Accessible Navigation Divs in React

Layout Primitives - The Wrappers

Introduction to The Settings Pages

How to Build a React Navbar With a Menu and Header

How to Build a React Sidebar Menu

How to Build a Profile Settings Page in React

How to Build a Privacy Page with Toggle Buttons in React

Composing Layouts in Practice

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.

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.

You may want to highlight the fact that all of the React stuff is 'encapsulated' within the React.* namespace.  Just to ensure the student understands your analogy

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Composing Layouts in React

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:30)

Welcome to Composing Layouts in React

Module 2: Composable Layouts

Lesson 1: (2:14)

CSS in the Age of Components

Lesson 2: (5:33)

What is Layout Composition? A React Layout Primitives Guide

Lesson 3: (8:53)

Encapsulated CSS - How to Apply CSS in a Composable Way

Lesson 4: (8:42)

Normal Document Flow in HTML, CSS, and React

Lesson 5: (6:27)

CSS Grid vs Flexbox for Composable Layouts

Lesson 6: (5:40)

How to Add a CSS Reset to Remove Default Browser Style

Module 3: Layout Primitives - The Spacers

Lesson 1: (2:02)

What are Layout Spacers?

Lesson 2: (17:07)

How to Build a Stacked Component Layout in React

Lesson 3: (14:21)

How to Build a Split Pane Layout in React

Lesson 4: (18:25)

How to Build React Grid Layouts With Custom Column Numbers

Lesson 5: (11:04)

How to Build a React Responsive Grid Layout

Lesson 6: (12:27)

How to Build Responsive React Text Elements With InlineCluster

Lesson 7: (23:22)

How to Add Inline Styling to React Components

Module 4: Layout Primitives - The Wrappers

Lesson 1: (2:39)

Introduction to Layout Wrapper Primitives

Lesson 2: (13:44)

How to Build a Pricing Page Widget in React With PadBox

Lesson 3: (14:27)

Automatically Center Text DIVs with React Center Component

Lesson 4: (19:59)

Resize Images And Maintain Aspect Ratio in React and CSS

Lesson 5: (17:14)

How to Vertically Center a DIV in React With CSS

Lesson 6: (8:54)

How to Build Accessible Navigation Divs in React

Module 5: Composing Layouts in Practice

Lesson 1: (1:32)

Introduction to The Settings Pages

Lesson 2: (24:10)

How to Build a React Navbar With a Menu and Header

Lesson 3: (16:17)

How to Build a React Sidebar Menu

Lesson 4: (20:05)

How to Build a Profile Settings Page in React

Lesson 5: (14:05)

How to Build a Privacy Page with Toggle Buttons in React

Encapsulated CSS - How to Apply CSS in a Composable Way