2.3 Designing the Homepage Content
The next item on our to-do list is the homepage content. This contains a series of repeatable elements, so designing it should be relatively easy.
1.Introduction2 lessons, 14:26
2.Designing the Template9 lessons, 1:36:08
3.Writing the Markup6 lessons, 1:06:01
4.Writing the CSS9 lessons, 1:42:34
5.Conclusion1 lesson, 02:03
2.3 Designing the Homepage Content
In the previous lesson, we've designed the tub bar and the header of our start page. Now it's time to fill in the content of our main page. And if you remember from the planning stage, this should contain an index of all the categories and subcategories, or subpages, of our documentation. So we're gonna begin, or we're gonna organize our content in three columns. Right, each column containing a single category, a description, and a list of its subcategories or sub pages. Now we're gonna start with an age 4, which is this. So we're gonna copy it from here, paste it in my page. I'm gonna set a distance of about 90 pixels from the separator. And the very first category is Introduction. Under this, let's make things a bit bigger, we're gonna have a paragraph that's gonna say something like this, what is WordPress, what is a WordPress theme, and what's in the package. This will serve as a description. Now for the style, I'm gonna use the muted paragraph just as a base. And then what I'm gonna do is change the paragraph color to black-65, and I'm gonna change the alignment to left. And then with this I'm gonna create a new Textile, that's gonna be paragraph default. So the idea is that we have the content organized into three columns. And these columns, we're gonna use a special grid when we're gonna code this, and that grid has gutters, basically. It has distance between columns and that distance is placed on the right and on the left side of the column. In the form of margin or padding, it doesn't really matter, the idea is that we need to take this into account when designing, right? Now I'm thinking, that gutter can be 30 pixels. It's a good enough distance, so 30 pixels on one side, 30 on the other. That will give us 60 pixels in between the two columns. I think that's a very good distance. So, how do we calculate the width of a single column. Well, we start from here, this is 1320 pixels in width. Then we need, I'm gonna say 1320, then I'm gonna subtract 30 pixels from this side, 30 from this side, that's 60. And then I'm also going to subtract 60 pixels from the distance between the first two columns. And then again 60 pixels as the distance between the second and the third column, so that's 120 and that gives me a distance of 1140 pixels. Now, it's simply a matter of dividing this by 3, and that gives me 380 pixels, that's the width of a single column. Also what I forgot to do on the paragraph here is set a line height of 24 pixels. I'm also going to position this at 15 pixels from the heading. And then I'm gonna position this at 90 Pixels from the left side, because this is positioned at. Let's see if I can see it here, sorry. 60 from the left, but this one is in a grid. It's gonna have a 30 pixel gap, so it's positioned at 90 pixels. And then finally, we need some kind of a link. Now because the introduction is kind of a standalone page inside the documentation we don't have sub-pages for it. So our links will look slightly different. I'm gonna. Create a link that says, read the introduction. For the color, I'm going to use this bit. And I'm also going to make the link bold. So PT Sans, bold, 16 pixels. I'm gonna align it like this and then I'm going to do the following, I'm gonna create a line that's 380 pixels in width and 1 pixel in height. The fill color is going to use the black 5 color. Now we can actually use this shared style here to make things easier for us. Let's bring this up a little bit. What I want to do now is add an arrow right here at the far end of my link. Now for the icons I'm gonna use an icon set called ion icons. And what's nice about it is that it's free, first of all. But also I have a sketch plugin, it's called icon fonts, and I can use it to insert icons from this set that I just specified. So I just hit that button and want an arrow right. Or maybe just an arrow, let's see, okay. So an arrow, yeah, and it gives me all the results that I want and I'm going to use this one right here, and this created a layer But I think it's a little bit bugged, just bear with me here. You need to create a text layer first, and then select that text layer, go to Plugins, follow the same steps. [BLANK AUDIO] And now it works, okay. Yeah, it's a small bug, it's probably going to be a sorted out really, really fast. So type face ion icons, but I don't as a type face, I want is as outlines. This I'm gonna scale up a little bit to 10 pixels in height. I'm gonna create a symbol. Icon/ and the name of the icon from the icon pack. And then I'm gonna set the same width and height to that icon and align it in the middle. And I'm doing this because I want to be able to swap this icon with a different one later in a symbol if I need to. Sketch has something really awesome called Symbol Overrides, where you can have a symbol, and you can change other instances of a symbol inside it, such as an icon. In all of its instances. I'll show you how that works in just a little bit. So now I have this symbol, I'm gonna set it to the original size. I'm gonna align it right at the edge here. I'm gonna select both of these, align them vertically, and then select this, and I'm gonna group it as, let's call it index list item. And I'm gonna create a symbol out of it. So inside the symbol I'm gonna make the entire symbol, 60 pixels in height, I'm gonna align this line at the very bottom. And then I'm gonna center align these elements. So let's see 20 from there. Okay, so 21 and 21 That looks okay. Again, set to original size, and then I'm gonna position this at 30 pixels from the element above. Now why exactly did I do this? Why did a set a fixed height for this element? Well because now all I need to do is duplicate it, move it down, align it perfectly with one above it, and the separator line is exactly in the middle of the two texts basically. So that's the first category, Introduction. Let's go to Category1. Now I'm just gonna duplicate this. Move it to the right 60 pixels. And this will be the second category inside the documentation that's called Getting Started. I'm gonna change the text here. And then the very first item we can override this text because it's a symbol. We can change its icon here of course, but we can also override the text inside. So for the first item we have preparation. Installing WordPress and the rest of the item from our list, something like that. Now I also forgot to do something, and that is to one, create a textile for this. Because this is a link in the end, so we're gonna say link default, we're gonna reuse this across our pages and also. We have to consider the case where when a list item like this be will be resized. Well, if it will be resized, I want the text to stick to the left side and also have a fixed width. And also I want this to stick to the right side, and have a fixed width and fixed height. So now, let me just. Duplicate this. Now if I resize this, the elements stay exactly where they need to. Perfect, now I'm gonna go ahead and populate the rest of the page with the content. I'm making a quick note here. The distance between each row of columns is gonna be 60 pixels, so it's gonna look exactly like that. Now on to the second row. All right, and I just finished adding all of the content based on the stuff that we wrote in our planning file. So we have all of the sections here along with their subsections. And everything looks like this. I think this will be very easy for people to use. Since they have everything at a glance on the home page, they can just find the category they want. And click on the subpage or subcategory. Now one thing that I did forget to do is create a new text style for this Heading 4. So I’m gonna say Heading and then H4. And once I did that, I can simply select the other ones using Command and Shift, and selecting them individually and I can just choose H4 style. And what this allows me to do, in case you're not familiar with this, I can simply change one style on one element and then that change will be propagated to all the other instances. So in this case I wanna change the color to this black 85. So once I hit update, all of the other items will be updated as well. And that's about it for the homepage content. Now, to finish this up, all we have to do now is design the footer. And we're gonna do that in the very next lesson. See you later.