FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 CSS Frameworks

[SOUND] It's fairly common for designers to use CSS frameworks, or what we call them, a selection of styles that make it easier to build our designs. One of the most popular is called 960 grid system. And what you see here is it sets a handful of classes, that allow us to quickly develop a column structured layouts. So you see right here where we have one column and then we have another. So we have set of three columns. If I were to right click on this and choose Inspect Element. You can see that it's being applied by adding classes, in this case, it's adding a class of grid_4. So watch what happens if Essence then becomes a class of grid_12. If I tab off it, that will now take up the entire width. And what's nice about this is when you're not having to measure on your own. You can create much more quickly. So if, let's say we want essence and dimensions right here to both be on the same line, so we want two column lines, well grid_12 is the maximum. It's a 12 column grid. So why don't we change this to half of that, 6, and then I'm gonna do the same thing with dimensions. And notice dimensions is showing because, grid_4, so mostly we're trying to add up to 12, if that makes sense, let's change it to 6. And now 6 plus 6 is 12 and they're both on the same line. What if we want purpose to take up a smaller amount? Well we could say 6, and then this one would take up maybe 4. That equals 10, so that means we have a grid_2 available, to fill up that void and now we've adjusted it like so. So yeah, using a grid can be really, really helpful. However it's important to know some people don't like grids. They think, its better to use your own CSS or to create your own grid by hand. And a lot of people feel that, adding these unsemantic classes to your mark up is a bad idea, remember, a class name or an id, should describe, what your element is. But grid_6, that says nothing. That's really visual. It doesn't describe anything about the content. So a lot of people don't like this. Now, it's important to know though, there are a variety of ways to get out of this. There are what we call CSS preprocessors, that allow us to create grids, in our style sheets. However, that's going to be a little bit beyond the scope of this tutorial, and it's still okay, plenty of people will use grids like this. So let's get started. I'm gonna come back to the top, and choose download. We're going to open this up, as you can see it was created by Nathan Smith, and it's gonna have a handful of folders in here, but don't let this scare you. What we really need here is within the code folder. And if we click on CSS, you can see there's a bunch of these here. What we need is either the 12 column, or the 16 column. The only difference is the number of columns that it creates. If you need a lot more room, you might use 16 columns to fit more in. And each column will be a slightly narrower width. But we're gonna stick with 12. So we will copy this one. And we also want a reset. And we can also add text.css that will reapply some big stylings. Such as making the font weight bold, setting some sizes for our headings, et cetera. So I'm gonna hit command c or control c to copy that. Next I'll open up our working directory. Enter our CSS folder and paste these in. So now we need to reference them within our page. So, again, remember in the last lesson how I discussed HTTP requests. In a real world project, when you're ready to put this on the web, you will likely want to combine all of these into one single style sheet. But for now, you can keep them separated. So let's see what that gives us. Let's load it in the browser and I don't have anything here. So let's make sure. That we add a bit of markup. What we'll do is we'll add some traditional markup and then I'm gonna show you how to implement the grid framework. So first, we're gonna have a div with a class of wrap. And within it why don't we have our header, and an h1 of My Website. And once again we'll do a nav, with an unordered list and we'll have 3 list items each with an anchor tag that links to nowhere. Home, About, Contact and so our header is finished. Why don't we have our main section now, and we want to have our main content area. And then perhaps a sidebar. So why don't we say div primary, for primary content area and within here we'll have a p tag, and then we'll also set a sibling for a sidebar. And we're going to use the aside element, because it's content that's related to the main content area, or the primary content. And within here we will say, maybe an unordered list, maybe we have some additional subnavigation. So maybe six list items, and we're gonna say sub. Okay so this gives us some gibberish content to get started. I'm gonna come back now and reload, and we want to turn this into an actual website. So we are linking to the stylesheets. If we wanna make sure, we view source. And click on them and you can make sure that you are referencing them appropriately. If you receive a error page, you know that you might have made a mistake linking to it. If we open up the 960 framework, these are all the classes that we can work with. So don't let these confuse you, mostly. They're just different ways to specify widths and padding. Now the first step here as you can see container, it has a width of 960 and it sets the margin left and right to auto, which we know will center it on the page. And this is important, the 960 framework is specifically made for websites that have a width of 960. It' been cited that is a good number to compensate for all of the computer screen resolutions. And that's beginning to change, so you might want to consider. A width of maybe 1120. But this works too. 960 is extremely common. Let's come back and now let's apply that class, wrap and then container_12. Notice here that we can apply multiple classes by using a space. Now of course, you cannot do that with ids. You might be able to get away with it. But it's not what it's for. An id should refer to one element, not to multiple, so let's keep it like so. And now if I load the page, refresh, you can see that that's now been centered on the page and it's been pushed over. If you were to apply a background color, you can really see this take shape. I'll do that right now for the example. Backgrounds, red. And there you go. You see you have a nice, centered website. The next step is, to maybe push the navigation to the top right. So let's open up style.css, and I'm going to override container_12 and apply that background color of red, because I think it's easier to see the dimensions of what we're working with. The next step is, within the header, why don't we specify that h1 should have a class. And how can we set these? If we come back, look at all of these different grids. Every grid is floated, and that's the way this is working. You create your columns by floating each section. And then it is over written where each grid, so grid 1, 2, 3, all the way up to 12, has a different width. So if I were to set the h1 class. And we gave it a class of grid_4. And we know that they need to add up to 12. So why don't we then make the navigation have a class of grid_8? 8 plus 4 equals 12. And this should take shape for us. And now that takes up grid_4, and this will take up all the available space. And now if I highlight these, you can see that. So let's go into style, and we're going to say nav li display, inline, so that we can create a horizontal list. So that's fixed. Next, let's work on right here, main. So why don't we set a class of grid_8. And the aside will have a class of grid_4. So that's moved it over slightly. But if we apply background colors again, we can really see the effect. So let's do that now. Aside, background is green, and primary content will have a background, of a greyish color. Now, this might look really odd to you. First, this is the main content, that should be on the left, so why is the sidebar on the right? That should be over here, right? And that's because this is not clearing anything above it. Right here, notice how this is lining up with the top here. It's not quite clearing it, so it gets stuck right here. If we wanna fix that and clear it, we can either do it manually, or 960 provides some classes. But also, we need to note that, if we come back to our mark up, because within our header we have floated both the h1 and the nav, it has collapsed in on itself. We can verify this by going to style.css and setting a background color and seeing if that takes shape. Reload and notice it's no where to be found, because it's collapsed. We can fix this by using the overflow hidden trick that we learned. We can do an inline, overflow, hidden and notice that forces it to contain it's floats. And you'll also notice that it fixes the issue that we have right here. So we can either manually specify this. Or we can apply a class of clearfix. Watch what happens if I do it right here with the header, class of clearfix. And if I reload the page, that is going to work. And that's because the 960 framework provides a class of clearfix. And what that does is, it gets the content after and it clears it. And this is what we call the clearfix hack. And it essentially forces the element contained in a float. It's kind of a more, error-proof way of doing it, rather than doing overflow hidden. Feel free to do whatever you like though. If we want to give this some breathing room, why don't we go back to style, and we'll say main, margin top, maybe 30 pixels. And that's gonna push it down ever so slightly. And also, why don't we apply some margin bottom as well. So I'm gonna use the shorthand. 30 pixels on the top and bottom and 0 on the right and left. However again, that's not going to take shape, because we've floated all of the elements within this main section, the exact same thing. So again you can apply a class of clearfix. Or, if you use a CSS pre-processor, if you increase your skills, you can do that without adding these extra classes, and that's generally what I do. And now you can see that has contained those floats. So it makes sense that our heading, and our navigation should probably follow the same format as what we have right here. So let's come back and adjust this. The heading section will have a grid_8 and the nav will be grid_4. And now if we wanna make sure that this lines up perfectly with this box, let's apply a background color again just so we can see what we have going on. We're running out of nasty colors. And I'm gonna place this up here. Reload. Notice that the lines are correct but the list items aren't. And that's because a margin left for each list item is being applied. So you could say margin left, is 0, and that's gonna push those over, and then you can apply margin right, to add the spacing back in. So now we can get rid of that, and our lines are nice and neat. Let's do a next section, within our main content where we want to have, perhaps, three or four columns within it. And within our primary section, we know it's set to grid_8 is the width. So now we know we can have four sections with grid_2. And notice I used the word section. Well, that makes sense to use a section element. And I'm gonna give it a class of grid_2. And next, within here, I'm gonna add a little more dummy text. Some editors have what we call Loren ipsum text built-in by default. Reload that and that's probably way too much. Why don't we seal that off right here? That looks good. And now I'm gonna duplicate this three times. So that we add up to, four grids. Now if I reload it, it looks a little off. Well how is that possible? Why is this one dropping to the bottom? And it's because there is margin right applied to each grid and that's what creates the spacing right here. So what we have to do is specify that the very last one. Shouldn't have any margin right at all. If I inspect element and we are on this last section. If I set margin right to 0, and then we go to the very first one and we set margin left to 0, you'll see that that jumps up then. Now, 960 provides helpful classes for this which call alpha and omega, and think you say, alpha, omega in sequence so it works left to right. We can set alpha, and this will set the margin left to 0. And the very last one omega,. We'll set the margin right to 0 on this one. And if I reload, now those are all contained. And this is really neat, because you could then, if you have lots of sections right here, we could repeat this exact same thing and now you quickly have. A column structure and you didn't have to do this on your own. And of course you would probably want to provide some padding within. So next why don't we provide some headings. In sublime text I can be clever, because we have access to multiple cursors. So, I'm going to select this p, hit control, command G on the mac and it's going to select every instance of them. And then I'm gonna hit up and right here we will add perhaps a heading four and we'll add some generic text. Multiple cursors are amazing, definitely use an editor that supports them. If I reload, now we have headings for each one. Now one thing that you will most likely do is you're gonna try to apply padding to each of these sections. And you're going to find that it screws up your layout. So let's be generic here and provide 10 pixels of padding all around for each section. But watch. Reload. Now it's all messed up. Because padding is applied in addition to the width. So without any padding, the width is perfect for four columns but as soon as you add padding, in this case. 10 pixels to the left and right. We've added 20 additional pixels of width to each column, or 80 pixels for all four sections, and this is something that, that irritates a lot of people. So you have a couple options here. One, would be to add more unsemantic markup. And what some people would do is, within the section, they would add a div right here. And what this allows you to do, is then apply the padding to the nested div and that's not going to create any issues. So what I'm doing right now is, I'm gonna copy this, right here so we have our newly formatted markup. And if I reload, it still looks the same, but now, we will apply the padding to the div. And it looks like we forgot to add the final omega. So we have alpha, two, three, omega. And now that has fixed it and we're able to add as much padding as we want. Now the one problem with this though is again. Maybe it's necessary to add that extra div, but be careful about adding too many divs. We call this divitis. And if you're not careful, it can really, quickly, muddy up your markup. So another way that you can fix this, and I will remove all of those so we are starting from scratch, and I'll get rid of this, is to change the box sizing. So this is a very high level. But the basic box model, says that you take the width and then you add margin and then you add the paddings applied to the element. And that equals the full width of the element. However, older versions of Internet Explorer did it a different way. And some people think, that this made more sense. Internet Explorer would take the width that you specify. So if I said, this is 200 pixels, it would say okay, the width of this element is 200 pixels, it can never increase. If we apply padding, we will reduce the width. So then the effective width would be 180 pixels. And then we would add 10 pixels on the left and right, which comes to 200. And a lot of people think, and I think even including myself, that this made more sense. If I set the width to 200, I don't want its effective width to be higher. I want it to be exactly 200 pixels, regardless of any padding that I have. So we can overwrite this and specify that we want to use the older forum. By setting the box sizing element. Section, box, sizing. Now that default is content box, but we want to update that, to set it to border box. So now with that applied. Let's add padding of 15 pixels. And now, we've added that without having to add any of these extra divs into our markup. If we switch the content-box, which is the default and effectively the same as removing it, you'll see that we have that issue again. So what this does is it specifies. That we are going to set a width, which is already applied by the class, that we gave it, grid_2. And then any padding will be reduced from that width, so that we never increase it and we don't screw up our grid. Now one problem with this is it's a relatively new property, which means it may not work in older versions of I-E. And you need to investigate that to see if that's a problem. Also, because these are new features, many browsers will add what we call prefixes, while they're playing with them. So in this case what you would want to do is. Now the reason why it worked just like this, is because Chrome is an advanced browser. And it's very quick to adopt the new standards. Browsers like Internet Explorer, though they are getting better, are not quite as quick. The same thing with Firefox and this also accommodates older forms. So, though Chrome supports box-sizing now. A handful of versions ago it didn't. In that case in those browsers it supported the prefix sized version. WebKit box sizing. So this is a good practice to make sure that we are capturing adoption in as many browsers as possible. So that's all we're gonna do here for grids. I highly recommend you check it out. It can really increase how quickly you build a website. And it also keeps you from ripping your hair out when you cannot figure out why a particular block is maybe, dropping down. These grids are highly tested and it will ensure that you spend less time fixing bugs and more time building your layouts. In the next lesson will be the beginning of our final project where will convert a complete website, over the course of a few videos, to a HTML and CSS. So stay tuned.

Back to the top