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

In Module 1, we introduced the concept of composition by analyzing this Hero mockup:

At that time, we glossed over the implementation of each of the layout primitives. Now that we have built a complete set of layout primitives, I thought it would be good to revisit the Hero section from Module 1 and build it for real, using the primitives we have learned.

 library. It has all the primitives we built in this course, plus a couple of other tools to help lay out your website.

In this lesson, we are going to build this:

We have a menu on top and two equal width areas below it. The area on the left will have a vertically centered "Call-to-action" section. The right side will have an image that will cover the area, maintaining an aspect ratio. There will be a small gutter between each of these areas.

Before we get into the solution, I want to point out an important issue that often gets overlooked, even by experienced developers. That issue is accessibility. Our webpages are not just used by fully sighted users with no physical limitations. We have all kinds of users with various needs, and our webpage should accommodate them.

Whole courses have been written on accessibility, but one of the biggest mistakes developers make that render their web page inaccessible is not using the correct semantic markup. Semantic markup lets screen readers communicate to the user the intended use of a section. You can wrap an unordered list in a 

 and style it to look like navigation, but the screen reader wouldn't communicate that to the user. Simply wrapping it in a 

 instead tells a screenreader that this is a list of navigation links.

It might seem simple, but using the correct semantic tag will do much to improve your web page's accessibility.

With that in mind, let's look at the markup for this Hero - 

and you can follow along at the codesandbox.io start project

export default function Hero() {
  return (
    <header>
      <div>
        <h1>Arrow Data</h1>

        <nav>
          <ul>
            <li>Solutions</li>
            <li>Pricing</li>
            <li>Docs</li>
            <li>More</li>
          </ul>
        </nav>

        <div>
          <a href="/#">Sign in</a>
          <button>Sign up</button>
        </div>
      </div>

      <div>
        <section>
          <h2>Data Solutions</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc vel
            risus commodo viverra maecenas. Magna sit amet purus gravida quis
            blandit turpis cursus.
          </p>
          <div>
            <button>Get Started</button>
            <button>Live Demo</button>
          </div>
        </section>

        <img src={dataImage} alt="" />
      </div>
    </header>
  );
}

---
title: How to Build Accessible Navigation Divs in React
slug: hero-revisited
description: Let's revisit the Hero section from Module 1 and build it for real using the primitives we have learned.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/j6tmpx08gl
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_05
---

In Module 1, we introduced the concept of composition by analyzing this Hero mockup:

![The Hero composition breakdown](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.05/public/assets/hero-breakdown.png)

At that time, we glossed over the implementation of each of the layout primitives. Now that we have built a complete set of layout primitives, I thought it would be good to revisit the Hero section from Module 1 and build it for real, using the primitives we have learned.

In this lesson, we will be using the [Bedrock Layout Primitives](https://bedrock-layout.dev/) library. It has all the primitives we built in this course, plus a couple of other tools to help lay out your website.

## The problem: the Hero Revisited

In this lesson, we are going to build this:

![The Hero red-line](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.05/public/assets/hero-red-line.png)

We have a menu on top and two equal width areas below it. The area on the left will have a vertically centered "Call-to-action" section. The right side will have an image that will cover the area, maintaining an aspect ratio. There will be a small gutter between each of these areas.

## A word on accessibility

Before we get into the solution, I want to point out an important issue that often gets overlooked, even by experienced developers. That issue is accessibility. Our webpages are not just used by fully sighted users with no physical limitations. We have all kinds of users with various needs, and our webpage should accommodate them.

Whole courses have been written on accessibility, but one of the biggest mistakes developers make that render their web page inaccessible is not using the correct semantic markup. Semantic markup lets screen readers communicate to the user the intended use of a section. You can wrap an unordered list in a `div` and style it to look like navigation, but the screen reader wouldn't communicate that to the user. Simply wrapping it in a `nav` instead tells a screenreader that this is a list of navigation links.

It might seem simple, but using the correct semantic tag will do much to improve your web page's accessibility.

## The solution

With that in mind, let's look at the markup for this Hero - [and you can follow along at the codesandbox.io start project](https://codesandbox.io/s/the-hero-revisited-starter-75g52?file=/src/Hero.jsx):

```jsx { actualFilename=./protected/hero-0.js endLine=45 startLine=5 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.05/protected/hero-0.js#L5 }
export default function Hero() {
  return (
    <header>
      <div>
        <h1>Arrow Data</h1>

        <nav>
          <ul>
            <li>Solutions</li>
            <li>Pricing</li>
            <li>Docs</li>
            <li>More</li>
          </ul>
        </nav>

        <div>
          <a href="/#">Sign in</a>
          <button>Sign up</button>
        </div>
      </div>

      <div>
        <section>
          <h2>Data Solutions</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc vel
            risus commodo viverra maecenas. Magna sit amet purus gravida quis
            blandit turpis cursus.
          </p>
          <div>
            <button>Get Started</button>
            <button>Live Demo</button>
          </div>
        </section>

        <img src={dataImage} alt="" />
      </div>
    </header>
  );
}
```

Which looks like this:

![The Hero red-line](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.05/public/assets/hero-0.png)

The first thing we need to do is stack our menu on top of everything. So let's use our Stack primitive as a `header` and give it a `sm` gutter:

Travis Waith-Mair

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

In this lesson we are going to revisit the hero mockup from module 1.

In module 1 we introduce the concept of composition by analyzing this hero mock

Now at the time we gloss over implementation of how each layout primitive works

but now that we've built a complete set of layout primitives,

I thought it would be good to revisit that hero section from module 1

and build it for real this time using primitives that we have learned.

Now in this lesson we'll be using the bedrock layout primitive library.

It has all the primitives that we built in this course,

plus a couple other tools that help us layout our website.

So in this lesson we are going to build this hero layout.

We have a menu on the top and two equal width areas below it.

The area on the left will have a vertically centered call to action section,

and the right side will have an image that will cover the area and maintain an

There will also be a small gutter in between each of these areas.

So before we get into the solution here, I want to just bring up an important

In fact, I've kind of brushed over it in this course already.

And specifically I want to talk about using the correct semantic markup.

Because whole courses could be written on accessibility,

I'm not trying to get into this, but one of the easiest mistakes that we can

is using the correct markup to denote the correct item.

And it's a problem, unfortunately, not just with what we've been doing,

but with anything that's been component based,

as it gets really easy to put everything inside of a div.

And we don't want to forget that these semantic markups,

like the nav or sections, headings, all have meanings,

and as used, especially by screen readers,

to help people with, can't see our websites who are using screen readers

to not just know what's going on, but also to navigate.

So from this point on, we're actually going to emphasize,

make sure that we don't forget to use the correct semantic markup going forward

And to do that, we're going to make sure we heavily take use of that as prop

so that we can make sure that we're using the correct markup.

This is the beginning of our hero section.

This will, everything's wrapped in a header.

This is going to be our menu with a nav and an unordered list,

and then we have the bottom half, which consists of two parts,

a section with a call to action section over here and an image.

Now, we already know what we need, so we need to bring in.

We're going to need to bring in a couple things from bedrock layout.

So I'm just going to preemptively bring those in.

We're going to need to bring in a stack from that bedrock layout stack.

And you can see I've already installed pretty much everything we need.

I know we're going to need both an inline and a --

We know we need -- everything's going to be wrapped in a stack as a header with

And then we're going to go ahead and wrap the menu bar in the inline.

With the large gutter, we're going to align everything center.

This nav, we're going to use an inline cluster as an unordered list with an

And everything's going to be centered horizontally.

And then finally, the right-hand side is going to have a large gutter with it

See how fast we were able to make that menu bar just with these components?

Now, let's go ahead and split our bottom half.

So we know we need a cover and we know we need a frame.

Now, the cover has a natural height of 100 view heights.

But we don't want to be 100 view heights because we have this menu bar that's

taking up some space plus this small gap here.

So what we're going to do instead, with the power of copying and painting, we

And using cover, we're going to use gutter none.

But the min height, we're going to pass in this string here.

We're going to calculate 100 view heights minus 48 pixels, which I already

measured ahead, is the height of this menu bar.

And also minus the size of the gap, this small gutter.

And that gets us the rest of the remaining space.

That's what's really cool about this calculation function.

Perfect. So the only thing left we need to do is we need to wrap the image in a

So let's go ahead and once again, just take advantage of copying paste.

And then the frame will still keep the aspect ratio of that image and not

And as we change that height, it will keep the image exactly the way it's

aspect ratio and move it to the height it needs.