7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 55 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Using Classes for Layout

Tailwind CSS has many classes we can use to lay out our pages. Display, position, padding, margin, borders... the list goes on, and you'll learn their patterns in this lesson.

Related Links

2.5 Using Classes for Layout

In this lesson, we are going to focus on layout. Now, we have looked very briefly at some layout oriented things, such as padding, and then setting the flex for the display. But there's a lot more to layout than just those things. Yes, they are important, but we have many other ways that we can apply padding, we have margins, we have borders. We have more display types that we can apply. And we aren't going to have an exhaustive look at all of these things. However, by the end of this lesson, you're going to see the patterns that we would use to be able to apply just about anything that you would need as far as padding, margin, border and display. So the first thing I want to do is focus on the navigation. Now, we only have one navigation section here, but let's go ahead, let's have a div element that's going to contain the sections. And we will add in another section here, just so that we can properly style this. We will change the heading to heading two. And we can see that kind of the content, they're just kinda squished together. So really, we just need to apply some padding here. And we can do that using the classes that we've used this far. We could also apply vertical padding because we have used the horizontal padding with px, we could say py, and that would apply vertical padding based upon whatever value that we use. However, I don't think we need just vertical padding because that kinda throws off the alignment between our heading and then our title. I want things symmetrical. So instead, what we can do is apply padding to the bottom of this nav section here. And we do that by just saying p for padding and then b for bottom. The same would be true if we wanted to apply padding to the top with t or to the right with r or to the left. So we follow this same pattern here. Let's use the value of three, and that gives enough of a definition between them. Although let's see what four looks like, four might be a little bit better. And it is. So we'll stick with that, we will add the same class to the other div element for that section. Of course we don't have another section underneath it, but if we did, we would want that same padding there. And that is okay. Now for our content, we're gonna have a little bit more stuff here because, well, we have more content than we do navigation. And the first thing that I want to do is add some margin, probably margin to the bottom of our titles, so that there's a little bit more space between the title and then the content. Now, just like padding, we would begin our margin with m and then it follows the same patterns. So that if we wanted horizontal margin, it would be mx, if we wanted vertical, it would be my. Or if we wanted to target a specific direction such as top, right, bottom or left, then it would be the appropriate character there. So for our case, we want margin at the bottom. Let's give this margin a value of two. And that adds enough space between them. Now our p elements need some space between them as well. So let's essentially do the same thing, we will add the same amount of margin to the p elements. And we could probably go a little bit more, let's add three, and I think we could go more. Let's go to four. That's a little bit better. So we of course want to apply this to all of our p elements and then we want some delineation between the different sections. And I think we could do that with a border. So, for these div elements that serve as the containers for the sections, let's add in a border. Now pretty much all of the border classes starts with border and they're followed by a dash. But then we're going to see the same patterns being used that we have used for other classes. Like for example, we want to apply a border to the bottom. So we're going to start with border b, that's going to add a border to the bottom and if we look at that, we can see that there is indeed a border. However, we can also apply a color to that using the same patterns that we've used for background and for text colors. So, border followed by the name, and then the shade or the graduation. And there's not much of a difference there. But then let's add some margin at the bottom. Let's give this a rather large margin of ten, and that looks okay. Let's see what if we add some padding, what that's going to do. I like that, although that might be a little bit too much. Let's add in eight instead of ten, and that's still a little bit too much. Let's try five, we'll see what that does, and that's a little bit better. So now we can just apply these same classes to the other elements and we will be good to go there. Let's add the same classes that we used for the h2 elements, we didn't do that. But everything else should be okay. And there we go. Now, the only other thing that I want to do is set our navigation to be fixed so that no matter how we scrolled, it's going to stay right here on screen. That of course means that we need to set the position property to fixed for our sidebar. Now, position is a lot like display, at least as far as the classes and tailwind are concerned. You know whenever we have set something as flex, well, flex is the value of the display property. If we wanted to set something as block or inline block, all we would need to use is the value as the CSS class. The same is true for position. So, if we wanted to set our sidebar absolute, we would use simply, absolute as the class name and then the sidebar would be positioned absolutely. That's not what we want, we want this to be fixed. So now, we are going to see our nav is fixed but it is also jumbled with the rest of our content because it is now out of the document flow. Which is easy enough to fix. We just need to add some padding or some margin, probably margin to our content wrapper, and it needs to be the left margin. So we know how to do this. The pattern is m for margin, l for left, dash and then whatever numeric value. Let's start with 60, which should put us back to where it was. That kind of looks a little bit more over to the right. So let's do this. Let's see what the value 40 is going to do. And I like that better. So, now our nav is fixed as we scroll along. That's not exactly what I was aiming for as far as emulating the tailwind documentation. But that's gonna be good enough. Besides the whole idea behind this exercise is to practice these classes getting familiar with the patterns. So that when it comes time to use them in our projects, we know exactly what we need to use without having to dig into the documentation.

Back to the top