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

Padding is a unique setting. Padding is part of the element, but it also creates space. It then would make sense that your padding should align with how the spacer primitives put gutters between elements. In other words, an 

In this lesson, we will be building this PricingPlan component:

Each pricing plan has a top section and a bottom section that require 

 padding around the content. The top section of each pricing plan has a button that requires a 

 padding on the block start and end and an 

Here is what our code looks like to start with, and 

you can follow along as always by going to this starter project at codesandbox.io

function PricingPlan() {
  return (
    <Card>
      <Top>
        <PlanName>Basic</PlanName>
        <Description>All the Basics for getting started</Description>
        <Price>$12/mo</Price>
        <InlineCluster gutter="none" justify="center">
          <Button>Buy Basic</Button>
        </InlineCluster>
      </Top>

      <Bottom>
        <Stack gutter="md">
          <span>What's included</span>
          <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Mollis pretium lorem primis senectus habitasse</li>
            <li>Phasellus ante pellentesque erat</li>
          </ul>
        </Stack>
      </Bottom>
    </Card>
  );
}

const PadBox = styled.div`
  padding: 1rem;
`;

The above code is pretty straightforward as it is just basic CSS. The code above creates padding of 

 around the content, or in other words, the children. We can then use it like this:

function PricingPlan() {
  return (
    <Card>
      <PadBox>
        <Top>
          <PlanName>Basic</PlanName>
          <Description>All the Basics for getting started</Description>
          <Price>$12/mo</Price>
          <InlineCluster gutter="none" justify="center">
            <Button>Buy Basic</Button>
          </InlineCluster>
        </Top>
      </PadBox>
      <Bottom>
        <PadBox>
          <Stack gutter="md">
            <span>What's included</span>
            <ul>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Mollis pretium lorem primis senectus habitasse</li>
              <li>Phasellus ante pellentesque erat</li>
            </ul>
          </Stack>
        </PadBox>
      </Bottom>
    </Card>
  );
}

As you can see, we are most of the way there:

Here is what that looks like with the padding emphasized:

---
title: How to Build a Pricing Page Widget in React With PadBox
slug: padbox-component
description: In this lesson, you will learn how to build the PadBox primitive and use it in a Pricing Plan component.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/c27tp6n32j
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_01
---

Padding is a unique setting. Padding is part of the element, but it also creates space. It then would make sense that your padding should align with how the spacer primitives put gutters between elements. In other words, an `xl` padding should be the same size as an `xl` gutter.

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

## The problem: the Pricing Plans

In this lesson, we will be building this PricingPlan component:

![Pricing Plan red lines](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.01/public/assets/padbox-red-line.png)

Each pricing plan has a top section and a bottom section that require `lg` padding around the content. The top section of each pricing plan has a button that requires a `sm` padding on the block start and end and an `xl` padding on the inline start and end.

## The solution

Here is what our code looks like to start with, and [you can follow along as always by going to this starter project at codesandbox.io](https://codesandbox.io/s/the-pricing-plans-starter-mvmwc):

```jsx { actualFilename=./protected/pad-box-0.js endLine=40 startLine=16 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.01/protected/pad-box-0.js#L16 }
function PricingPlan() {
  return (
    <Card>
      <Top>
        <PlanName>Basic</PlanName>
        <Description>All the Basics for getting started</Description>
        <Price>$12/mo</Price>
        <InlineCluster gutter="none" justify="center">
          <Button>Buy Basic</Button>
        </InlineCluster>
      </Top>

      <Bottom>
        <Stack gutter="md">
          <span>What's included</span>
          <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Mollis pretium lorem primis senectus habitasse</li>
            <li>Phasellus ante pellentesque erat</li>
          </ul>
        </Stack>
      </Bottom>
    </Card>
  );
}
```

And this is what that looks like:

![Pricing Plan step 0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.01/public/assets/padbox-0.png)

Let's start by adding some padding:

```jsx { actualFilename=./protected/pad-box-1.js endLine=19 startLine=17 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.01/protected/pad-box-1.js#L17 }
const PadBox = styled.div`
  padding: 1rem;
`;
```

The above code is pretty straightforward as it is just basic CSS. The code above creates padding of `1rem` around the content, or in other words, the children. We can then use it like this:

```jsx { actualFilename=./protected/pad-box-1.js endLine=48 startLine=21 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.01/protected/pad-box-1.js#L21 }
function PricingPlan() {
  return (
    <Card>
      <PadBox>
        <Top>
          <PlanName>Basic</PlanName>
          <Description>All the Basics for getting started</Description>
          <Price>$12/mo</Price>
          <InlineCluster gutter="none" justify="center">
            <Button>Buy Basic</Button>
          </InlineCluster>
        </Top>
      </PadBox>
      <Bottom>
        <PadBox>
          <Stack gutter="md">
            <span>What's included</span>
            <ul>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Mollis pretium lorem primis senectus habitasse</li>
              <li>Phasellus ante pellentesque erat</li>
            </ul>
          </Stack>
        </PadBox>
      </Bottom>
    </Card>
  );
}
```

Travis Waith-Mair

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

In this lesson we are going to talk about the pad box.

Padding is a unique setting. Padding is part of the element, as we learned with

So it then would make sense that your padding should align with how space are

primitives, but gutters between elements.

In other words, an extra large padding should be the same size as an extra

In this lesson you will be learning how to build the pad box primitive and a

Each pricing plan has a top section and a balled up section that requires a

And the top section of each pricing plan has a button that requires a small

and an extra large padding on the inline start and inline end.

So like always, there is a link to this starter project in the notes below.

But this is what our code looks like to start with.

We have our pricing plan and we are going to put it in a grid, which we already

And that's what's actually getting rendered on this page, is this grid for

And we have these parts, you can go look at them to see how they are

The point is we are trying to create the pad box here.

But there is this card outer wrapper and there is a top section and a bottom

And we are using a stack, which we should already know about.

And we have a couple of other things with some style.

And then we have this button right there that already has some styles already

And as you can see this is what it looks like.

So let's start by putting in some padding.

And for right now we are just going to hard code that with a padding of one rem

And then let's go ahead and with the magic of copy and paste.

Let's add that in and you can see we now each, we have put a pad box around the

And we put a pad box just inside this bottom section.

And now we have that desired hook here of one rem padding around the outside.

Now we are already most of the way there.

We obviously want to do more than just hard code one rem.

So we are going to do just like we did with the gutters from the spacer prim

We are going to go ahead and bring in the spacing map.

And instead of hard coding this to one rem.

This is how we are going to use padding not gutter like we did for the

And for right now let's go ahead and let's not add a default value.

For now let's just go ahead and put that prop in there and we will use large.

We will come in here and go padding equals large.

And you may have to do this sometimes as you are typing because things get

Now if we wanted just one spacing the same spacer round everything this would

But we have this requirement on this button that we need to have a small

But an extra large spacing on the left and right hand side.

Now what we are going to do is we are going to take advantage of the padding

syntax which you can go find over at MDN.

Which means it can take anywhere from one to four different values.

If we go padding one rem that applies to everything.

Then the first value applies to the top and bottom.

And the second value is the left and right.

And the first padding value applies to the top.

The second value applies to the left and right.

And then we can do four values if we wanted to.

And these four values will apply to the top right bottom left.

So we are going to take advantage of how that syntax already works.

And what we are going to do is we are going to adjust this pad box just

And what we are going to do is we are going to take the props.

We are going to start with an empty array and we are going to concat the props

What this does is if we provide an individual value.

If for example we have an empty array and we concat one for example.

We will get an array with the value of one in it.

If we provide an array of values we will get an array, that same array values

So that is a really cool feature about how concat works.