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

(This lesson will be using a bunch of lorem ipsum. If you are looking for a good lorem ipsum generator, you can always head over to 

Refactor the profile pane and stubbing out the privacy pane

Like before, we will refactor our profile pane into its own component to make it easier to see what we are doing. Before that, you will notice that both the profile and privacy pane have a standard look. They both have a 

 stacked on top of a form section inside a PadBox. Let's steal that basic layout and then refactor the profile pane into its own file.

<FormPanel>
  <ProfilePanel />

  <PadBox as="section" padding="lg">
    <Stack gutter="lg">
      <Stack as="header" gutter="md">
        <h2>Privacy</h2>
        <SubLabel>
          Eu turpis egestas pretium aenean pharetra magna ac placerat
          vestibulum.
        </SubLabel>
      </Stack>
      <div>form section</div>
    </Stack>
  </PadBox>

  <div>
    <button>Cancel</button>
    <button>Save</button>
  </div>
</FormPanel>

In the mockup, they have these really cool toggle buttons, but to keep things simple we will stick with simple HTML checkboxes. For now let's add just one of those toggle groups to our page:

<div>
  <div>
    <label htmlFor="available">
      Available for hire
      <SubLabel>Interdum velit euismod in pellentesque massa</SubLabel>
    </label>
    <Input id="available" type="checkbox" checked />
  </div>
</div>

First we can stack our label and sub-label. So let's use a Stack as a 

<Stack htmlFor="available" as="label" gutter="sm">
  Available for hire
  <SubLabel>Interdum velit euismod in pellentesque massa</SubLabel>
</Stack>

And now our toggle group looks like this:

Now we just need to have the input justified to the right and vertically centered in a padded box. Let's wrap everything in an Inline component as a PadBox...

<Inline
  align="center"
  as={PadBox}
  padding={["lg", "none"]}
  gutter="lg"
  stretch="start"
>
  <Stack htmlFor="available" as="label" gutter="sm">
    Available for hire
    <SubLabel>Interdum velit euismod in pellentesque massa</SubLabel>
  </Stack>
  <Input id="available" type="checkbox" checked />
</Inline>

---
title: How to Build a Privacy Page with Toggle Buttons in React
slug: privacy-pane
description: In this lesson, we will be finishing the Settings page by completing the privacy pane.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/pfsoy8he0g
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_05/lesson_04
---

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

![Profile pane mock](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.04/public/assets/privacy-pane.png)

Let's pick up where we left off in [the last lesson over at codesandbox.io](https://codesandbox.io/s/the-profile-panel-w6iy1?file=/src/App.js).

(This lesson will be using a bunch of lorem ipsum. If you are looking for a good lorem ipsum generator, you can always head over to [loremipsum.io](https://loremipsum.io/generator/?n=5&t=p)).

## Refactor the profile pane and stubbing out the privacy pane

Like before, we will refactor our profile pane into its own component to make it easier to see what we are doing. Before that, you will notice that both the profile and privacy pane have a standard look. They both have a `header` stacked on top of a form section inside a PadBox. Let's steal that basic layout and then refactor the profile pane into its own file.

```jsx
<FormPanel>
  <ProfilePanel />

  <PadBox as="section" padding="lg">
    <Stack gutter="lg">
      <Stack as="header" gutter="md">
        <h2>Privacy</h2>
        <SubLabel>
          Eu turpis egestas pretium aenean pharetra magna ac placerat
          vestibulum.
        </SubLabel>
      </Stack>
      <div>form section</div>
    </Stack>
  </PadBox>

  <div>
    <button>Cancel</button>
    <button>Save</button>
  </div>
</FormPanel>
```

## The toggle groups

In the mockup, they have these really cool toggle buttons, but to keep things simple we will stick with simple HTML checkboxes. For now let's add just one of those toggle groups to our page:

```jsx
<div>
  <div>
    <label htmlFor="available">
      Available for hire
      <SubLabel>Interdum velit euismod in pellentesque massa</SubLabel>
    </label>
    <Input id="available" type="checkbox" checked />
  </div>
</div>
```

And it looks like this:

![Privacy pane with one toggle group](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.04/public/assets/one-toggle-group.png)

First we can stack our label and sub-label. So let's use a Stack as a `label` like this:

```jsx
<Stack htmlFor="available" as="label" gutter="sm">
  Available for hire
  <SubLabel>Interdum velit euismod in pellentesque massa</SubLabel>
</Stack>
```

And now our toggle group looks like this:

![toggle group with the stacked label](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.04/public/assets/stacked-label.png)

Now we just need to have the input justified to the right and vertically centered in a padded box. Let's wrap everything in an Inline component as a PadBox...

```jsx
<Inline
  align="center"
  as={PadBox}
  padding={["lg", "none"]}
  gutter="lg"
  stretch="start"
>
  <Stack htmlFor="available" as="label" gutter="sm">
    Available for hire
    <SubLabel>Interdum velit euismod in pellentesque massa</SubLabel>
  </Stack>
  <Input id="available" type="checkbox" checked />
</Inline>
```

Travis Waith-Mair

Hey everybody, we're on our last section of our settings page and today we're

gonna finish it up. We're gonna handle this privacy pane and these buttons and

then we will be done. So just like always, let's go ahead and refactor out this

profile pane into its own component just to make things a little bit easier to

pay attention to to focus on this lesson and once again don't forget to fork.

So just like I did before we're just gonna copy everything and then take out

the parts we don't need. So in our source let's create profile and call

profile panel, profile pane, whatever you like and we just need this

everything from the padbox inside the padbox and that's it. And then we're

change this to profile panel and that now we can just get rid of the things we

don't need in here. Perfect, let's go ahead and let's go ahead and import this

We're gonna copy and paste from your notes that you do it correctly. There you

Let's remove the things that we don't need anymore. Awesome. Okay, so...

So I've gone ahead and I've stuck down this while I've pasted from my notes. I

gone ahead and stubbed out this privacy section. Just gave it a little bit

just because we've already handled this in the profile panel where we had a

header and we had a sub label so let's go ahead and just copy that same area

and then just below is that's where our form section is. Now in our mockup we

have this cool little like toggle group this toggle component. I think it's

right now I'm not gonna worry about trying to build that let's just use some

check boxes here just for just to make it a little easier. So let's just build

one of those for now. So let's replace this form section here. I got rid of one

So in this case we're doing we have this label the input is going to be on the

other side so instead of putting inside the label we're actually going to put

outside and it says available for hire with this little sub label. By the way

we're using gonna be using a lot of warm it some in this lesson and so just

use any warm it's some generator you want if you or you can just copy it

straight out of my notes whatever you'd like to do. Now first thing we want to

is tackle this this label here we want the this available for hire and the

sub label to be stacked on top of each other. So let's go ahead and readjust

there. So now we have a stack as a label and we're using the HTML4 for this ID

we're putting a small gutter in between. Then the other thing we need to do is

need to put everything in line and have this first section stretch out and then

have this final checkbox be on the very end. So let's go ahead and import our

line component again into this. And there we go. So now we have this in line

and we're also going to be using a pad box around it. So in line it's centered

we're going to put a pad box around this each and one of these toggle groups.

We're going to put a large padding on top but none to the outside because we

want it right up against this padding and then we want the large gutter in

between them and we want this first item to stretch and this time because it's

the first item we can just say start and this we've already handled and this

input gets put all the way to the end because it this first stack gets

Now we could copy this over and over and over again for each one but once again

this is a great opportunity to create a custom component that does all this

for us. So let's refactor this out and we'll create a toggle group function

called toggle group takes an ID a label a sub label and checked and it's going

be we're using that in line that we're using down below the stack the sub label

and all that but instead of hard coding it we're going to put the label here's

the first the sub label inside of here and then whether it's checked or not

that will be be passed to the input and then whatever ID we pass into this

group we will use as both for the label and the input.

And now we can just go ahead and implement all of the toggle groups all at once

here and let's refactor this and so we got the first one we're saying it's

first viewer check this one is not and we're getting a couple different sub

labels doesn't matter if they're the same we're just doing some more of it some

here now even when you refresh you're gonna know that you're gonna get this

error from from react this is because we're we're providing a check to this

input but we're not providing an on change in all actuality you will also

want to do an on change once you actually like wire this up but we're just

to get the look and feel of it so don't worry about like wiring it up and this

warnings like this for now so perfect we've got the privacy panel all taken

of the only thing left we need to do is well first we need to add some borders

in between because if you notice there's borders in between but not around and

this is something we've already handled before it's borders that are being

used for layout purposes so we're actually going to do this on the parent

component we're going to create this thing called the toggle paint and once

again it adds a light gray border for all the direct children who have at least

one other sibling and so I'm gonna be added to the start the block start so

now this toggle group we can surround it with this toggle pane component and

we've got those borders that we needed and there we go we're just down to this

final stretch so what's what do we need to do I bet you could probably like

tell me like you're probably yelling at me what this needs this is we need some

padding and we need these to be in line with a gutter in between them so let's

go ahead and add that so we're doing in line with the padbox large padding a

large gutter and then we're gonna justify and so that the buttons come all the

way to the end and then we just need to style these buttons well these buttons

need to have two different styles one for the primary dark and then the light

then they they also need to have a padding so let's do a button which is a

style pad box we're gonna use it as a button with a padding of medium on top

and bottom on large on the left and right then we have a border radius and then