FREELessons: 8Length: 45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Simple Layout

In this lesson, you are going to get a little practice with the grid system as I walk you through the creation of a simple page layout using Materialize.

Useful Links

2.3 Simple Layout

Now that we understand a little bit more about the grid system in the Materialize framework, I want to walk through a sample page layout using this grid system. So that we'll know how to create more than these nice little pink boxes in the page. So our starting pen here is going to be the same pen that we ended with in the last lesson, so you can open that up. And then click on Fork to create a new copy of it. And in our new copy, I'm just going to delete everything, but I wanna keep the settings that we already had there, here. To make sure that we still had our Materialize CSS and then our jQuery and our Materialize JavaScript. So in our HTML, we're going to create first of all our container, so again, I'm gonna use Zen coding to do this. And we're creating a div with a class of containers, so I'm gonna type div.container, and then Tab. And so that creates our container div for us. Inside our container, we need a row. So we're gonna create a row for the header of our page. So we're gonna create another div with a class of row. And you'll discover that you can put pages like this together very, very quickly once you understand how the grid system works. So for our header inside this row, I wanted to take up the full width of our container. So we're gonna create a column here, so we're gonna create a div with a class of C-O-L. I want that column to take up the full 12 columns of our grid system. I'm also gonna give it a class of s12. Hit tab to fill that out. And I'm also going to add another class here of header, just so we can add some other styles in our style sheet. So inside our header, I'm just gonna put a simple h1 tag. And we'll just get creative here with our title. We will call it header, and so that'll be the main top section of our page. And we'll talk later on about how we can actually create a nav bar at the very top using some built-in Materialize functioning. But for now we'll just leave it at that. So we'll go to the end of this row, and we'll create another row after that. So we'll create another div here with a class of row. And let's say we want a two column layout here. We wanna sidebar on the left and then our main content over on the right. So inside our row, I'm gonna create a div for our sidebar, this is gonna be our first column. So we're gonna create a div with a class of COL for column. And then I'm gonna give this a couple different sizing classes here. I'm gonna give it m4. So for medium size browsers and up, this is gonna take up four-twelfths or one-third of the width of the container. And then at a small size I want it to take up all 12 columns. So once we get down to small like mobile size browsers, we want each of these columns to take up the full width of the page. And then I'm also gonna give this another class and I forgot to put dots here. Don't wanna forget to do that, or our Zen coding isn't gonna work right. So we have all of these dots with no spaces so that we can add all of these classes to the same div. Then I'm gonna add another class of sidebar. So I'm gonna hit Tab and it will add all of those classes to that particular div. And then inside that div I'm gonna create an h3 here, and we're just gonna put sidebar here. And then after the h3, I'm gonna put a paragraph with some lorem text. So I'll do that here. And then we can also, in Materialize, we can create a div with a class of divider, which will give us a nice divider that looks kind of like a horizontal rule. So we can do a div here after our paragraph, and do .divider to add a class of divider to it. And again this is a Materialize specific class, and we can just leave that empty, we can leave it blank, and we can see that it adds a little underline there, or a horizontal rule for us. And then after that I'll create another paragraph with another paragraph of lorem text, if we can spell it. There you go. Okay, so there's our sidebar, and then after the sidebar, still inside our row here, but after our closing div for our sidebar we'll create another div with a class of C-O-L. And this one is also going to have two different size classes. So for m4, remember our columns need to add up if we want them to take up the full width, they need to add up to 12. So if we have m4 for the left column, we're gonna have m8 for the right column. And then we are gonna have small 12 or s12. And I'm also going to give this a class of main-content. I'll hit tab to fill that out, and then again inside here I'm just gonna put some demi-content. We'll add an h3, excuse me, with main content here. And then after that, maybe we'll have a few paragraphs. So I'll do inside parenthesis here, we'll do a paragraph, inside that we'll have some lorem text. And then after our parenthesis, well do times three, so that it will create three separate paragraphs for us. And there we go. So in just a couple of minutes, we're able to put together a very simple layout for our web page. And then we can go into our CSS and start styling our custom classes. So we had our header, for example. We gave it a class of header. And for that header, let's give it a dark gray background color. So we'll give that a color of #333, and a text color of #eee. So there's our header with that dark background. [SOUND] and then maybe for our sidebar, we'll just give it a light gray background. So, we'll create a rule for our sidebar class, and we'll give it a background color as well. And we'll give it a background color of eee so that it stands out a little bit. So again, this isn't a very complicated layout. You can come up with something a lot more creative than this if you put just a little bit of time into it. But I just wanted to run you through the process of creating a layout with multiple columns with a header at the top. You can do the same thing with your footer at the bottom. You can create a new row with a column that spans all 12 columns of the grid system, and that would work just fine. Now, again we'll look later on at how to create a nav bar at the top. And how to create a Materialize-specific footer at the bottom that's gonna look really nice. But this is one option if you wanna keep it simple. And you'll notice that as we get to a small browser size, that our side bar jumps up to the top and the main content is just below it. So that's very easy to create a responsive layout. So thank you for watching, and I'll see you in the next lesson.

Back to the top