3.4 Coding the Article Template Left Sidebar
Let’s start writing the markup for the article template. In this lesson we’ll cover the left sidebar.
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.4 Coding the Article Template Left Sidebar
In the previous lesson, we've written the markup for the entire homepage. And we also used some pretty cool stuff like menu XY Grid from Foundation. Now let's move on and write the markup for one of the secondary pages, or one of the article pages. And we're gonna be doing the introduction page. So if we click on Documentation, or we click on read the introduction, it takes us to documentation/introduction.html. Let's go ahead and create a new layout here. This time it's gonna be article.html. And for now I'm simply gonna copy the contents of default html. And actually while I'm here, I did forget to update the title here. So this should say, and then dash. And I'm gonna be using a variable called page-title. Now we can find the page-title right here. It's a variable defined in each page. So the layout, or Panini, takes the variable value from here and replaces it right here. And I'm gonna do the same for this article page. Now inside this article layout there are a couple of changes. First of all, we still have the off-canvas-wrapper and the off-canvas-content. And this does not change. However, we're gonna add a couple of things to these. off-canvas-content, I'm gonna add an id of top, and that id of top will be used to anchor this link. So whenever we click this link, it's gonna go to the beginning of our content. And then we're gonna add data off canvas content and data-magellan-target=top. We're gonna be use the magellan component from Foundation. It's basically a script that will highlight our specific links when we reach a certain position on the page which is perfect for what we need here. So when we scroll down to the What is WordPress section, this second link will be highlighted. When we get to the top, the top link will be highlighted. So what we're doing here is setting data-magellan-target to this element where the ID of top. And then the header will have the top-bar as usual but will also add an info-bar. And the info-bar is just this secondary navigation as I called it, right here. So let's go ahead and define a partial, info-bar.html. And then instead of this article body, yeah, we have a slightly different structure, because we have this layout with three columns. We have one sidebar here, the main content and another sidebar on the right. So we're gonna be using the grid for that, grid-x, this time no margin, no padding. And then I'm gonna define an aside with a class of cell, and then this aside or this sidebar, however you wanna call it, will be hidden on small screens and tablet screens. So we're only gonna show it for large screens. So I'm gonna say hide-for-small and then show-for-large. So hide-for-small, basically means hide it on small screens, show-for-large it means show it on large screens and higher. And then, I'm also gonna add my own class, ap-sidebar-left inside ul, with a class of vertical-menu, these are foundational classes. And then accordion-menu, also a Foundation class. And ap-menu, which is one of my own. And I'm also gonna set data-accordion-menu, because we want it to behave like an accordion, expanding and collapsing items. And then inside I'm gonna import nav-items-documentation, which is a partial that we've also loaded In the nav-offcanvas, or the nav-main actually. So these are the items strictly related to the documentation. Now let's also create the introduction page. So introduction_html, and I'm also gonna create a new folder here called documentation. I'm just gonna place that in there. So now if we take a look, let's do a refresh. Okay, we have a header and we have the footer. But this is currently using the default template or layout, so to change that, I'm gonna go in here, I'm gonna define a couple of variables, first of all the layout we want to use as article. And that will get its information from article.html. We're gonna set the page title to Introduction. We're gonna set the page domain to documentation, and this is for highlighting this menu here on the top. And finally the doc-domain is introduction. And this is actually to highlight the item on the left here. So after doing this, if we take a look, we now have that aside, which currently takes up all the available space. But just by writing the markup correctly and using a framework-like foundation, we have a working accordion, cool. Now let's go back to the article.html, and let's create article. I'm gonna give it a class of cell.auto, which means we're gonna take up all the available space. And ap-article-content, and I'm also gonna do an id of ap-article-content. This will be used later on for styling. And in here I'm simply gonna load the body of our page or the main content. And finally, we're gonna have another aside with a class of cell. Again, we're gonna hide it for small and we're also gonna show it not for large but for extra large. And the reason I'm doing that is because on large screens, there simply isn't enough room for the main content in two side bars. The content is just too small in width. So we're only gonna show that extra side bar on the right if we have enough room, enough width, enough screen real estate. And that happens only on extra large screens, which on Foundation, I think they start at 1,200 pixels. So we're gonna show it there. And also, let's add an ap-sidebar-right class. Now the idea for this side bar is that the content will always be in view. It's gonna have a fixed position, or in other words it's gonna be sticky. And Foundation has a plugin for that, it's called a sticky plugin. And it's really easy to use. You simply define the class of data-sticky-container on the parent element, and then inside, you do a div with a class of sticky, and you set. Data-sticky, data-anchor, you need a anchor for this, so I'm gonna tie it to the ap-article-content. And it can also adjust its position by setting data-margin-top. In my case, that's gonna be equal to 4. And inside this sticky class, I'm gonna have two widgets because it's aside bar, or maybe it's a bit improper but I'm calling them widgets. So we're gonna have a widget-nav. And we're gonna have a widget-video for that smaller version of the video. So let's go ahead and create those partials, widget-nav.html and widget-video.html. And I think we've written pretty much all we need in the article layouts, right? So if we actually populate this with some content. Let's see, hello introduction. Widget-nav, widget-video, and let's also put the info-bar in here. You can see how these look like, so we have the info bar and then we have the widget nav and widget video. But I do not see the content here. So what's up with that. So introduction.html layout article. Let's see if we have any errors in here. Nope, seems to be working just fine. So let's see, I am including the body here correctly. Cell auto ap-article-content Let's do a quick Inspect and see what's going on. Maybe I missed something, so we have the grid-x here. We have an aside, which is hidden for small. Then we have an article. I know what the problem is, our article basically has no width. Because we have set it to auto. But if we also set these cells to auto, yeah, now we should have the content, okay? So here's the first sidebar, here is the main content, and here is the second sidebar. So by setting all of them to auto we have equal width. But we're not gonna do that actually. And because we will set fixed widths for these side classes when we get to the CSS part. Now we have to write the markup for the info bar main content and right sidebar. We'll do that in the next lesson. See you there.