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.3 Using the Inverted Triangle

When sites get large, CSS gets complicated, and it can be difficult to know where to start, even with the RSCSS guidelines we have covered so far. In this lesson, I’ll introduce you to the ITCSS methodology for approaching your styles and how you can use it in conjunction with RSCSS.

3.3 Using the Inverted Triangle

Hello and welcome back. We've talked a lot about using the RSCSS methodology for styling the components and elements on your page. And what I wanna talk about in this lesson is an overall view for how to approach a website design, how to approach the styles for your design. The RSCSS methodology gives us some really good guidelines for once we get down to the specifics, but what about other aspects of your styles that we haven't talked about? What about the structure of your pages? What about the layout? What if you have columns in your layout, things like that. And it can be a very, very intimidating subject, especially when you're dealing with larger websites that need to scale. Well there's another methodology I want to quickly walk you through called ITCSS, which stands for inverted triangle CSS. And this methodology is specifically linked to on the RSCSS website, and for good reason because these two go hand in hand really, really well. And what the ITCSS methodology does for us is it gives us a good guideline for how to approach your styles from a top down view whenever you're styling your website. And the idea is to start with the broad general areas of your website and to gradually get more and more specific as we move down the triangle. And the analogy is used of a sculptor, a sculptor takes a large piece of rock and start chipping away it, piece by piece, but it doesn't start with the details of the sculpture instead he starts with the basic shape and once he gets the basic shape there, then he goes onto some of the finer details. And then at the very end, he gets down to the very, very minute details of the sculpture. And it's gonna be the same idea as we talk about this ITCSS methodology. So we have seven different layers of this triangle. And this kind of represents the order that you would go in when you are approaching the styles for your website. Now, the first couple of layers starting with the top layer which is your settings are going to be specific to designers who are using CSS pre processors, like saas or less. So you would start with your basic settings. Perhaps you have some brand colors that you want to include on your site, and in Saas or LESS, this is where you would put your variables. So you would put variables such as different colors you're gonna use, or perhaps the basic unit of spacing you want to use in between the components on your site. The next level of our triangle, as we get a little bit more specific, is going to be your tools. These are gonna be your mix ins. Again, if you're using Saas or LESS these are gonna be the chunks of styles that you might end up using on and off through out the website. So whenever you are looking at the design of your site you wanna keep an eye out for any areas of similarity, any areas where things kinda look the same. And you might want to use a mix in to take those styles that are gonna be similar across different areas of the site, and store those here. And, so this is the last level of the triangle, where we're gonna be talking specifically about using CSS preprossecors. The next section of the triangle would be the very top of the triangle, if you are just using vanilla CSS, old school CSS. And this would be your generic layer, this would be your generic styles. Your browser resets so you might use something like normalize CSS for this generic layer and the normalized CSS file would get rid of some of the browser defaults to make sure that no matter what browser you're using, you're starting from the same general starting position. Then, as we get more specific, we're gonna move towards the base layer of our triangle. The base layer of our triangle is going to represent element-specific styles. So these are gonna be your H1 through H6. What are the base styles for those elements gonna be? These are gonna be your basic paragraph styles. Your basic link styles, things like that. So we're not dealing with CSS classes just yet. We're just dealing with HTML elements here. Our next layer, the objects layer is gonna be the first layer where we start using exclusively CSS classes. And for our objects layer we wanna look a little bit more specifically than just our base styles or base elements. And we wanna start looking at maybe some of your layout elements. This might be a container div which provides the basic structure for the page. Maybe everything is contained inside a container div. And these rules, these styles on the objects layer with defined maybe how wide that container is and whether it's centered on the stage. So for this objects layer we are using class names now. We're no longer talking about element selector, we are using class names to talk about things like layout objects. You might also include your column layouts here. If you have small columns versus wider columns if you have a three column layout you might include those CSS styles here. And then our next layer is the components layer which is where the heart of what we've been talking about this entire course is the RSCSS methodology. Where we're talking about components and elements. This is where your styling, a specific UI elements on the stage and really making your website look like what it's supposed to look like in the end? So again, this would be all the components and elements that we've been talking about throughout this entire course. And again, this is all using class names exclusively. And then finally, once we get down to the point of the triangle at the very bottom, we're getting very, very specific here. And we're talking about Trumps. These are gonna be your overrides or your helper classes. There are gonna be classes such as the full width class that we talked about In a previous lesson. These are gonna be classes like pull left or pull right, where you would override the basic styles to make something float to the left or float to the right. So again, this ITCSS framework or methodology just gives us a really good concept of how to approach our website. And again, the idea is to start off with the large general over-arching styles and then gradually get more specific as we chip away at that sculpture. So thank you so much for watching and I'll see you in the next lesson.

Back to the top