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

---
title: How to Build a Profile Settings Page in React
slug: profile-pane
description: In this lesson, we will be focusing on the profile pane.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/ewxzarcxen
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_05/lesson_03
---

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

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

We will pick up where we left off in [the last lesson over at codesandbox.io](https://codesandbox.io/s/the-main-and-sidebar-dfhns?file=/src/App.js).

## Refactor the SidePanel and stub out major landmarks

Just like the previous lesson, let's move the sidebar into its own component, called `SidePanel`, to make it easier for us to focus on the profile pane:

```jsx
export default function App() {
  return (
    <div>
      <Menu />
      <ContentArea>
        <Center as={Stack} gutter="xl" maxWidth="85rem">
          <SettingsHeader>
            <h1>Settings</h1>
          </SettingsHeader>
          <SettingsPane>
            <SidePanel />
            <div>Placeholder for right hand side</div>
          </SettingsPane>
        </Center>
      </ContentArea>
    </div>
  );
}
```

The first thing we need to do is stub out the three sections of the right-hand side: the profile pane, the privacy pane, and the button group.

```jsx
<div>
  <section>
    <h2>Profile</h2>
  </section>

  <section>
    <h2>Privacy</h2>
  </section>

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

Now our Settings page looks like this:

![stubbed out sections](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.03/public/assets/stubbed-out-sections.png)

The things that we are missing right now, besides the content, are borders dividing the sections. First, let's create a component that puts a border between the left and right panel:

```jsx
const FormPanel = styled.div`
  border-inline-start: 1px solid lightgrey;
`;
```

And add it into our page:

```jsx
<FormPanel>
  <section>
    <h2>Profile</h2>
  </section>

  <section>
    <h2>Privacy</h2>
  </section>

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

At this point it's important to look at the entire Settings page mockup again:

![settings page](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.03/public/assets/settings-page.png)

Per the mockup, we also need a border between the sections. An excellent way to do this is to add a `border-block-start` to all but the top section. According to Encapsulated CSS, our borders are considered part of the component and should be set on the individual sections. The one exception to that rule is when borders are used for layout. A good question to ask is if I were to pull out this section and place it on another page, would I still want that border? If not, then it should be set by the parent component.

Since that is the case here, let's add the borders in our FormPanel. There is a cool CSS trick, made famous by Heydon Pickering, called the [lobotomize owl selector](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/), and it looks like this:

```css
> * + * {
  /* styles go here */
}
```

Let's break that down.

-   The `>` we have seen before and is the direct child selector.
-   We have also seen the `*` character, a wild card selector that means any element, but we have added something else. Instead of just a single `*`, we are using `* + *`, the sibling combinator. 
-   Combining all these means that we will select all the direct children who have a sibling element that comes before it, or in other words, all the immediate children except the first.

Let's update our form to add a border to all the children except the first, like this:

```jsx
const FormPanel = styled.div`
  border-inline-start: 1px solid lightgrey;

  > * + * {
    border-block-start: 1px solid lightgrey;
  }
`;
```

And our sections will have proper borders now.

![stubbed out sections with borders](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.03/public/assets/sections-with-borders.png)

## The profile pane

Let's stub out the rest of the profile pane:

```jsx
<section>
  <header>
    <h2>Profile</h2>
    <span>
      This information will be displayed publicly so be careful what you share.
    </span>
  </header>
  <div>
    <label>
      User Name
      <input />
    </label>
    <label>
      About
      <textarea />
      <span>Brief description for your profile. URLs are hyperlinked.</span>
    </label>
    <label>
      Photo
      <Logo inverse size="10rem" />
    </label>
  </div>
  <div>
    <label>
      First Name
      <input />
    </label>
    <label>
      Last Name
      <input />
    </label>
    <label>
      URL
      <input />
    </label>
    <label>
      Company
      <input />
    </label>
  </div>
</section>
```

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