The Stack Design Pattern

The Stack design pattern is used when you need to stack elements on top of each other and set space between them.

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 - 01:33] Hey, everybody. Welcome back. Today, we're going to talk about the stack design pattern. Now, the stack design pattern is for when you have a set of elements that you want to stack on top of each other. Pretty simple, right? So here's a couple examples I found in the wild. You can see here we have a set of elements that are stacked on top of each other. And then we have this element stacked on top of just this stack of elements. So you can see that these things can be composed within each other. And this is going to be true for all of the design patterns. Here's another example. We have these two items are stacked on each other. Then we have this stack stacked on top of this stacked on top of this. We have these elements stacked on top of each other. Then this whole thing, we have this group of things stacked on top of this group of things. Okay, this is the thing that we're going to be building in the rest of this modules. Now, we're not going to get into how we're going to build it right now. First, I just want you to look at this application, this landing page, and identify stacks. I'm going to scroll through here, give you a chance to look at them. I'm also going to provide a PDF of this in the lesson.

  • [01:34 - 02:55] What I want you to do is pause the video, scroll back, look through all that, and then decide what elements you think are stacks. And I'll be right back. Okay, welcome back. So here are a few of the stacks that I identified. We have these things are stacked on top of each other. We have these things are stacked on top of this content. We have the this thing stacked on top of this, and then these are stacked on top of each other. And then we have a bunch of grid items here that are stacked on top of each other. Each one of these footer elements are stacked on top of each other. So you see what really defines a stack and what defines when you need to do stack is when the space in between the elements need to change. So you can see here, these things is one stack, but we have a stack within a stack because the space here is not the same as the space here. So what this needs to be is own stack. Well, this becomes a different stack. And the same here, this is a stack, this is a stack, but then these elements are stacked uniquely on top of each other, because they have a different spacing requirement than here. That's the stack pattern.

  • [02:56 - 02:58] We'll go on to the next pattern in the next lesson.