The Split Design Pattern

The split pattern is for putting two elements next to each other, each taking up a fraction of the inline space.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:04] Welcome back to everybody. And today we're going to talk about the split design pattern.

  • [00:05 - 00:15] Now, a split design pattern is when you have two elements that need to be displayed side by side. We have here, an example I found in the wild, we have this item next to this item.

  • [00:16 - 00:25] We have, in this case, this avatar next to the main content right here. And we also have this main section with a sidebar.

  • [00:26 - 00:40] So sometimes people will call it a sidebar, sometimes people call it different things, but the idea is that it's a split component, it's a split pattern where one thing is next to another. And once again, we have another example of a main content and a sidebar.

  • [00:41 - 00:44] Let's go back to our application. I'm going to scroll through here.

  • [00:45 - 00:54] And I want you to identify examples of the split pattern in use here. Okay, so we have two examples on this page that we're looking at.

  • [00:55 - 01:00] We have this panel next to this panel. So that's an example of a split design pattern.

  • [01:01 - 01:09] And then same thing here, we have this group of content, next to this group of content. So that's some examples of the split design pattern.

  • [01:10 - 01:16] Keep an eye out for it when you're searching the web and I'll see you on the next lesson where we talk about the next design pattern.