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

  • Overview
  • Transcript

3.4 Planning Out Your Site

Using what you’ve learned so far, in this lesson, I’m going to walk you through the thought processes of designing a live site using the RSCSS methodology.

3.4 Planning Out Your Site

Hello, and welcome back. Now that we have a basic idea of using the RSCSS methodology, as well as the ITCSS methodology for approaching your styles from a top-down perspective. I wanna take a look at how we would tackle a specific website design using these methodologies. We've looked at this Tuts+ websites before very briefly, but now that we've gone over these methodologies, I want to kind of walk through this again and give you an idea of how you would approach this. So, let's say that we are looking at a Photoshop file right now of a design that we are tasked to build. What we want to do first of all is to take a look at every page that has been designed and to look for similar elements, similar styles. Things that we might be able to reuse, and those things that we're gonna reuse are going to make up the top two levels of that triangle. Those top two levels, remember, are specific to CSS preprocessors like Sass and Less. This is where you would include your variables and your mix-ins. Your variables might include colors, such as these, maybe these title colors we see on these different cards here. The background color for our header and our footer at the bottom of the site. So, any colors that you see over and over again, you might include those in your variables. Any styles that you see over and over again, you might include in your Mixins. Then we move down to the third layer of that ITCCS trends, and which if you remember is the top layer for those who are just using plain CSS. This is gonna be a very generic overall styles. This would include things like normalize.css where you're just resetting your browser styles. You're starting from a consistent starting point no matter what browser your users are using. And generally, that third layer of the triangle, that generic layer, for me, anyway, that usually only consists of using something like normalize.css. And remember, underneath that generic section, we have the base section where we're just styling Our basic HTML elements that don't have any classes applied to them so our H1s through H6s are links, our basic lists, things like that. And then we get down to a little bit more specific where we start using class names and these are going to be your objects. And the main objects that you might tackle right away when you start styling your site are going to be your layout objects, your containers, your column layouts, things like that. This is where you're gonna be using specific class names But you're not really giving the site its look and feel just yet. You're just giving it its basic layout. And then finally, we get to the second to last layer of our triangle, and that's where we get specific and start talking about components and elements that we've been talking about this entire course. And I want to talk about how we would approach that with RS CSS. So again, what you want to do is to take a look at all of the pages that have been designed for you. Sometimes, a designer will only give you a home page design. And maybe one other page and then you'll have to figure out the rest as you go back and forth. However sometimes your designer will give you every single page and what it needs to look like. So as you go through your pages you want to look at elements like these that we see here that might have a similar look and feel. Something that we would include in a component. And the more organized you are with this the easier it's going to be In the long term. So the more time you spend keeping things organized in the very beginning, the easier it's going to be to actually lay out your styles. So if we're looking at this particular site, we might immediately notice a group of components here, where we have these sections that have an image in the background and some text in the foreground, where we have a title and then some descriptive text below that. But you'll notice that not all of them have that image background. We have a couple over here that just have solid color backgrounds but they're using the same basic styles. They're using the same text sizes and the same basic look and feel. So we would go through our site and look for everywhere where we see something that would fit that particular mold. And so we would go past just the homepage. We would look at other pages on the site. And look for other elements that might match that. And write down those elements. And keep track of all of those elements that are gonna match this particular component. As we scroll down, we'll see another type of component. And this is the type of component we dealt with a lot in our course. We have these cards where we have an image at the top. And then a heading and some text below it. And these actually have a little bit more as well, at the very bottom in the footer area. But these would be another example of a component that you would write down, and you would again go through all of your pages and find other. Elements of a UI elements that might look kind of the same way that could fit into that same mold, and we can even scroll then towards the bottom and we see kind of a variation of that component. Because this down here the kind of set up the same way, but the text might be a little different and you'll notice the top corners are squared off instead of rounded. But in general they could be the same type of components. And this is also the point where you would start thinking in terms of variations, or variants, as we've talked about before. For example these squared off corners that we just mentioned Would be a variant of that particular element. So our original design for that element, if we go up here, has all the corners rounded off. But that variant has the top left and top right corners squared off. If we go back to the very top we can see some variants in our items up here at the top. One of these variants would be the text color for the titles of each of these sections. Another variant would be whether it's using an image for a background or a solid color for a background. And so again I want you to think in terms of writing these things down. Writing down Your even your element names in your variant names as well as what items on what pages are going to be using those elements and those variants. So if you take this from a top down approach and take it one step at a time Getting more and more specific with every new step, then you will find that this really isn't as monumental a task as you originally thought it was. So even a large website, if it's well designed, can be handled in a very straightforward fashion using this RS CSS system. Especially when you use it in conjunction with a methodology like the ITCSS methodology. So hopefully this lesson has given you some direction when it comes to taking an overall design and approaching it from the top down. Thank you for watching and I'll see you in the next lesson.

Back to the top