7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.1 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Positioning Components

In the interest of keeping things modular and reusable, the RSCSS system encourages you not to place any positioning styles on a component. Let’s now examine the best way to position elements.

Related Links

2.4 Positioning Components

Hello, and welcome back. One thing we have not talked about yet is the layout of our content. For the most part in our CSS, all we've done is really affect the way that something looks. We've affected background colors, text colors, border colors, things like that. But we haven't talked about laying out or positioning our content. And the reason we haven't talked about that yet is because the RSCSS system has a very specific suggestion for laying out your content. And the main consideration here is that we don't want to put any type of positioning styles on the rules for our components, for our individual components. More specifically what this means is that I shouldn't put any margins, floats or positioning styles on my feature cards for example. Instead, the RSCSS system suggests putting all of your layout styles within the context of a larger container. So for example, if we jump into our CSS, you'll see we have our feature card rule here. We're not going to apply any positioning styles to this feature card rule. Instead we are gonna look at the feature card rule within a context element or a containing element. So we're gonna put all three of these components here, all these feature cards inside a containing div or a containing section called card list. And you'll notice I've done something a little bit different with our components now. I no longer have a rounded one and all three of them now have a different color border on them. And you can find the URL for this starting pen and the course notes for this lesson. Once you open that up, go ahead and click on fork to make your changes. So what we're gonna do in our HTML is we're going to put everything inside a section element, and I'm gonna give this section a class of card-list. So this is another component, but it's kind of a context component. We're putting everything else inside this context component and then we need to grab everything else. And that's not supposed to be a div, that's supposed to be section, there we go. And then we'll grab our three feature cards inside it and just nudge them over a little bit. And so now, according to the RSCSS system, we would point to these feature cards inside this card list and apply our styles appropriately. This way, we can reuse these cards elsewhere on our site without having to force them to have the same layout characteristics. Without having to override any floats that we might have put on them, things like that. So let's jump into our CSS and let's make that happen. So first of all, I'm gonna come down here, let's just go to the bottom. And we're gonna create a rule for the card list and inside that rule, let's say that we want this to be 660 pixels wide. And we want to give it a margin of zero auto. Now we have already broken this layout rule that we've been talking about. If we go up to our original feature card rule, here we have a width and we have our margin of zero auto. So again, we have already broken that rule and I wanna delete those two properties. So we're no longer setting the width and the margins for these cards on the feature card rule itself. Instead we're applying them to a rule that contains the feature card inside its context container. So we're gonna have it inside the card list. And again, by doing it this way, it makes this component much more reusable. Because we're not stuck to a particular width or a particular positioning or float element. So, let's jump into our card list container. We've set our width and our margins, and now we're gonna go inside that container to our feature card. So if you remember, we're not just gonna type .feature card here, instead we're going to use the child selector and then point to the feature card class. Because we want to make sure that this is applying to only the direct children of that card list class or that card list component. And as you can see here we're already hinting at nested components which we're going to talk a little bit more about later on. But now, inside our cardless we can tell our future cards how wide we want them to be. So for example we might set the width here to 200 pixels and so now they're each 200 pixels wide. We can set them to float. So we'll set a float to the left. And now they're all next to each other. And so I want just a little bit of spacing in between them. So I'm going to give each of them a margin of 10 pixels. And now we have a nice layout. And that layout Is not tied to the feature card component as a whole, it's only tied to the feature card if it's inside this card list component. So we can use different layouts, different margins, different positioning For other card components that we might use in the future. Now I do see a little bit of an issue here, at the bottom of our cards. We can right-click and Inspect that to get an idea of what's causing that issue. And it looks like it's just the, okay, the margins are fine. Let's drill into that feature card there, and there we go. So any time you're using H tags, H1, H2, H3, etc, you're often going to run into issues like this with the margins. So another thing we might want to do here is to turn off the margins for that description class. So we're going to go up into the description class here, and we're gonna set our margins to 0, and that should take care of those issues. And there we go, that already looks a lot better. But anyways, those are the basics of laying out your content using positions, and floats, and dimensions, width and height, and things like that in the RS CSS system. So thank you for watching. And in the next lesson we'll start talking about nested components in a little more detail.

Back to the top