7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 27Length: 4.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Coding the Rest of the Homepage

In the previous lesson, we've written the markup for off-canvas and the main navigation. Now, it's time to complete the rest of the home page by writing the markup for it. And if we take a look in the sketch file, we can see that we're starting with this page header that contains having one and a paragraph. And we're gonna follow that up with this thick separator. So, first of all, to get the left and right padding here on the page, I'm gonna use a div with a class of ap-container. And I repeat, everything that starts with ap- is a custom style different from what Foundation comes with. So inside this ap-container, I'm gonna start with a header. I'm gonna give it a class of ap-page-header, and also text-center. Text-center is a class from Foundation that aligns the text in the center. And then we have an h1, I'm gonna say the name of the theme, and then a paragraph. And to get this light gray color, I'm gonna use a special class called ap-muted. Great, next I'm gonna use an hr with a class of ap-thick, and then we have to create this content. Now, as I was saying in the design stage, we're gonna be using a grid. Now the grid of choice is the new XY Grid from Foundation. It's awesome, it's really easy to use. It's based on Flexbox, and it's only downside is that the browser support is a bit limited. Let's say because Flexbox is not yet implemented in the older browsers. I don't know if it will be, but if you don't need a lot of browser support coverage, then Flexbox is the way to go. So for this course, that's what I'm going to use. Now, defining a grid using the XY system is pretty simple. We start with a container with a class of grid X if you want a horizontal grid. If you want a vertical grid, you would do grid Y. So we're gonna say grid-x, and then you can add two additional classes. Or actually, it's four additional classes. So here's the way this grid works. By default, it does not have any gutters, right? The columns sit right next to each other without any kind of padding or margin. But you can add a margin or padding to create these gutters, and a gutter is the distance between the two columns, by using some special classes defined in Foundation. And these classes are called grid-padding-x, which will add padding on the left and right, and grid-padding-y, which will add padding on the top and bottom. Alternatively, if you want to use margins instead of paddings, you would simply replace this. So you would have grid-margin-x and grid-margin-y. In my case, I want paddings, so grid-padding-y. And I'm also going to add one of my own classes, it's called ap-index-list. We'll use this later on to apply some custom styling. Now inside each grid column, if you wanna call it that, is defined by using the class of cell. So you would do cell and then followed by the number of columns that you want to occupy. And you can do that by using the pre-existing break points inside Foundation, just small, medium, large, and so on. So for example, on large screens, we have three columns here. So I'm gonna say large-4, because we're dealing with a 12-column grid system. So to have three columns of equal width, each column must be four columns, or let's call these cells, right? Maybe it's a bit confusing. If we want three cells inside my page that have equal width, then we need to use a class of large-4, because 12 divided by 4 equals 3. Then on medium screens, yeah, on medium screens we have only two columns. So I'm gonna say medium-6. And then on small screens, we have a single column. Well, here, instead of saying small-12, we can simply say small-auto. And small-auto means that particular cell will occupy all the available space, fantastic. Next, we have an h4, yeah, Introduction. Then we have a paragraph. Let's go ahead and copy this text from here. And then we have a list. Now I'm gonna use a list even on the cells with a single link here. It's just gonna make it much easier to style later on. So I'm gonna use a ul with a class of no-bullet. No-bullet is a class defined in Foundation that strips away the padding and the bullets or the list style type of a list. And then in here, I'm simply gonna define an anchor tag, the href will go to root. Documentation/introduction.html. And then I'm going to add a special class to this link. Because we have a link with an arrow on the end. I'm gonna say ap-link-arrow. And then Read the introduction. When creating a list item like this or a button or a link, whatever you wanna call it, basically, we had two options. One, place this arrow in the markup as well. So, because I'm loading an icon font, I can simply do an i with a class of, I don't remember what it was, icon, I believe, and then ion. -arrow, right, whatever it was called. And I would have an i element in there that will render that arrow. But because this will be eventually edited by someone that may not have the best knowledge of HTML and CSS, I decided it's best for the user to just render that icon as a pseudo element inside that link. That way, anyone who is editing these anchor tags, adding their own, they can simply apply a class, and enter the text and they're done. Now, what I'm gonna do is simply fill in the rest of the content for this page. Basically, what I did was just copied the cell for the rest of the groups. We don't need to create another grid-x. We don't need to create rows, like maybe you're used to from other grid systems. You just define your cells, you define their sizes, and Foundation takes care of it for you. So by doing that, here is our page. Yeah, and you'll see that when we're gonna resize this, for example, this is a tablet size, we now have two columns. And when we go to even smaller, a mobile size, we have a single column. And just to show you what those padding-x and padding-y classes are doing, let me just get rid of them. Yeah, see that is changed. Now there is no more space between these cells or columns. But if I bring them back, yeah, now we have gutters, awesome. Now, what else is there to do? Well, we have to do the footer. So for the footer, I can close now the index.html. Because that content is done, it's being replaced right here. So inside my default, after this article, I'm simply gonna say, and I'm gonna define a partial called footer.html. And I'm gonna define a footer with a class of ap-footer. And then inside, we have two sections basically. One contains these links, and the second one contains the logo, copyright information, and a list of social icons. So we're gonna start by defining this section. Inside, I'm gonna use the same ap-container class to set the proper padding on the left and on the right. And then I'm gonna use a ul with a class of no-bullet to get rid of the bullet items. And then menu, this is a Foundation class, ap-menu. This is one of my own, ap-divided, that's gonna be used to render these separators between the menu items, and finally, ap-footer-links. And I kinda using a whole bunch of classes here, but each class has it's own purpose. And by doing that, I can reuse those classes on other elements. So for example, the ap-menu class will only have specific properties, like, for example, font size and font width. The ap-divided will only cover the separators between the items and so on. So inside, I simply have a list item with an anchor tag for the three lengths. And then we're gonna exit this section, we're gonna create another one for the second part of the footer. And then I'm gonna create a div with the class of ap-footer-secondary. Because we need to apply a different background color and other styling, and then inside an ap-container. And then for this particular layout here, I'm also going to use the grid. So, I'm gonna say, grid-x again, and then this time, I'm gonna be using grid-margin-x and grid-padding-y. So I'm using padding on the top, margin on the left and bottom. I'll define my cell, and the cell on large screens, I want it to shrink. And shrinking will basically reduce its size to only what it needs. So if I have an image inside like my logo, that's 100 pixels in width, that column, because it has the shrink class, will be 100 pixels. Again, a fantastic addition to this grid. And on small screens, I want it to be auto, so it take up as much space as it can. And then inside, I simply have image source is {{root}}assets/img, and that logo is called logo-ap.svg. Okay, the next cell is for the copyright text. So again, cell, again, large-shrink, small-auto, and then inside, a paragraph with a small text that says, copy 2017 and my own name. Finally, the third class or the third cell, sorry, will contain these social links. So I'm gonna simply say, cell with a class of auto, and the class of auto basically means occupy as much space as you can on every screen. And inside, I'm gonna have a ul with a class of no-bullet menu and I'll give it an ID of ap-social-icons. Inside, I'm gonna have a list item with an anchor tag, and that anchor tag will have a class of ap-button-icon. And inside that, I'm gonna have an i with a class of icon, and for the very first item, which is this envelope, it's gonna be ion-android-mail. And this will show that icon once we load the ion icon's font. So now I'm gonna populate this list with the rest of these links. Okay, perfect. Now let's take a look at what we have here in the footer. And just to test things out, let's add a temporary style here of background: black. And just to see what we're dealing with, so we have our logo, then we have our text. And finally, we have, and let me just add some letters here so we can see the icons or the feature icons, yeah, we have the social links. Now one thing that you would notice, let me actually reduce. The color here so you can see, you'll notice that these are not properly aligned vertically. So to fix that, all we have to do is say, align-middle on our grid, and that will align everything properly in the middle. This is not currently aligned in the middle, because it has a margin bottom. And this is a paragraph, after all, so. Yeah, see, it has a 16 pixel margin bottom. But once we get rid of that, it will be properly aligned. Now, I also want these items to be placed on the right side here. Very easy to do, I’m simply going to add a class here. It’s called align-right. Again, this a Foundation class and it’s gonna push those items to the right. Now let me just get rid of this temporary style here, and. For these letters. And with this, we've completed the footer which is common for all the pages, and also completed writing the markup for the home page. Now, in the next lesson, we're gonna write the markup for one of the Oracle pages. And that's coming up next.

Back to the top