3.6 Coding a Page Template
In this lesson we’re going to write the markup for one of the page templates. Let’s begin.
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
3.6 Coding a Page Template
In the previous lesson, we've coded one of the article pages in the introduction. Well now, to complete our mock-up page, let's go ahead and code one of the stand alone pages. In our case, the change log. So, the change log, or one of the stand alone pages is very similar to an article page with a couple of differences. First of all we have no left side bar, we have no video, and we have no navigation here at the bottom. So let's create the change log page and I'm gonna copy the article code create a new layout page.html. So paste that in we're gonna save it. And in here, let's see we'll keep the header top bar in full bar. And then inside grid-x I'm gonna delete this aside. I'm gonna set the, article content to auto. The class will be ap-page-content instead of article-content, we'll include the body. And then, we'll have the aside cell shrink hide-for-small show-for-large ap-sidebar-right, also sticky. Yeah, the rest is pretty much the same except we're gonna remove this widget-video. Okay, so the layout is done. Let's go ahead and create our page changelog.html. We start with a couple of variables, the lay out will be using this page. The page title is Changelog and the page domain is changelog. Okay, we start with a section inside header with a class of ap-section-header, where I'm going to an h2 and I'm gonna include page-title. And then I'm gonna have a div for the class of ap-section-content where I'm gonna include the nav-internal, just like that. And then we have the three sections. So each one will have an ID, will have a header and will have a content. And in our case, it's content separated or organized by badges and each content has a list. So section with an id of changelog-1. Also don't forget data-magellan-target=changelog1. The same header with a class of ap-section-header. Where I'm gonna have an h3 that says, in this case version 1.2. And then I am gonna use a span inside for the small text and then ap-section-content and inside we're gonna have a badge, ap-badge and ap-bug-fixes. This is an additional class. Now Foundation also has a class for badges, but it's slightly different. It's meant to be used a little bit differently than what I'm gonna be using it for here. So I prefer to define my own class. In here I'm just gonna say bug fixes, and then I'll have a list ul class no-bullet, and also ap-changelog-list, and inside simple list items. Finally, I'll go ahead and fill in the other two sections, just like that. So on the second one we have an ap-badge again, with this time ap-new, and also ap-enhancements. And on the third one, we have no badge where it simply says version 1.0 was first released. End result, we do a refresh, is this. We're still not seeing the magellan nav, but no worries we'll see it when we get to the starting port. And this is how one of the standalone pages look like. With the markup complete we can now move on to styling this whole thing. And we're gonna start with the colors and typography. That's coming up.