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

4.7 Styling the Article Page Typography and Layout

In the previous lesson, we styled the article page side bars. Now, let's move on to the actual content. So in this lesson, we're going to write some styles for typography and layout. Let's begin with these ap-section-headers and these ap-section-contents, because they are being re-used all over our template. So I'm gonna go to headers first and I'm gonna target ap-section-header, and this needs to end up having left and right. It needs to have this border-bottom, and also a margin-bottom to separate us from the content below it. So I'm gonna say padding 0 and 5rems on the side. Border-bottom is 1 pixel solid ap-black-05. And margin-bottom we'll set it to 2rems. Next, let's see about these section-content. So for that, I'm gonna open containers, and I'm gonna target .ap-section-content. I'm gonna add a padding. 0 on the top, 5rems on the sides, and 6rems on the bottom. Yeah, just like that. Then I'm gonna target some elements and apply the same margin bottom. And the elements are Figure, ap, file structure, what you can see are right here, and it's this div which corresponds to this element. And then, also the table needs to have the same margin bottom, and also the the callouts. So I'm gonna say margin-bottom 4rems, Save that. All right, so this s starting to take shape. Next, let's push this content down about 4rems. And the way I'm gonna do that is I'm gonna open the article layout. So you can see that we have a master class here of ap-article-content, and it's the same thing on pages, we have ap-page-content. So we're gonna target both of these at the same time, and we're gonna do that before the style. I'm gonna say ap-page-content, and ap-article-content, I'm gonna do two things first. Set a padding top of 4rems. So all of the content that's being pushed down. And then, I'm also gonna add the border-left and border-right for the content. So border: 1px solid $ap-black-12. So that's gonna add a border all around, but we only wanted on the sides. So on ap-page-content, I'm gonna set the border-width to 0 top 1 pixel to the right, and then 0 and 0, because we only want a border on one side. And then, on the article content, I'm gonna set the border width to 0 and 1 pixel, which means 0 top, 1 pixel on the sides. Let's take a look, and do we have an error somewhere? Let's see, ap-article-content, border-width 01 pixel, okay, let's do another save. Okay, so if for some reason this doesn't work, let me check this in Firefox. Firefox seems to be displaying these. So I think, yeah, so Firefox displays these boarders correctly, but Chrome doesn't for some reason. Okay, let me try restart, and restart Chrome. And I also checked this in another web kit browser, which is Safari. And it seems to be displaying these borders properly. So yeah, not sure. Probably is just a Chrome glitch, because I cannot explain why these borders are not rendered. All right, let's move on, let's actually use Firefox for now, to style this. Okay, the next elements to style are these headings. And if you remember from the sketch file, we need to add these hash signs. We're gonna open typography and right here at the headings we're gonna do the following. We're gonna say ap-hash-heading, and this is a class that I'm gonna, we'll be able to apply to different elements. And then, ap-section-header h2, h3, h4 and h5. So I'm targeting all of these. I'm gonna be setting position to relative. And then the B4 element on each one. I'm gonna set a font size of 1.25 rams. I'm gonna set the color to ap-black-12. I'm gonna set it left of -4rems, and width of 3rems. And by doing this I make sure that these before elements are positioned at exactly 1.5rems from the actual heading. What else, let's set up display to block, and align the text to the right and also align them vertically. So I'm gonna extend the .ap-center-v class. Well, nothing to see just yet, because we still need to input the content for these before elements. And the content looks something like this. So on the h2s before element we set one hash. h3 has two hashes, h4 three, and h5 four hashes. So that gives us, These elements. Awesome, next up, we need a little bit more margin bottom for this paragraph, and for some of these lists that we have right here. So going back to typography, I'm gonna target the paragraph, the ol and the ul. And while they are in .ap-section-content, all of these will have a margin bottom of 2rems, and we'll have a maximum width of 43rems, right? So just in case we're dealing with a very large screen, we don't want the list, or the paragraphs to just stretch a mile long. Instead, we wanna keep them at a respectable width. Okay, let's see what else we need to style in here. Well, we need to style this fake caption, that's super easy to do. I'm simply gonna say font-style as italic. I'm gonna sort of margin top of 1rem. And then, I'm gonna extend ap-muted, and also ap-small-text, okay? And that is the fig caption. Next, let's turn our attention to this navigation menu, because if you remember from our sketch file the text was small. And also, we have this border on the left. Let's see, we're gonna open up an article in our introduction. And introduction have that nav-internal. Okay, so now internal has a list ap-vertical-menu with the an ideal ap-vertical-menu table of contents. So we gonna open navigation and for navigation, well, let's put this on the top here, ap-vertical-menu table of contents. Let's set a border-left of 4 pixels, solid, ap-black-05. Let's set a padding left of 1rem. Okay, and the font is already small. We need to add a little bit of margin bottom to this h5, and also to this h6. If we take a look right here, this needs to be positioned at 30 pixels from the menu below it. And this also at 30. We're gonna go back to the typography around the headings here. So h5 and h6, I'm gonna specify a margin-bottom of 2rems, just like that. What else? Let's see about this detailed link. So if we take a look back in Sketch, we can see that this link has a border. It has an arrow right, and also another element in the form of its URL. So we're gonna go back to our anchor tag here. And I'm gonna say ap-detailed-link, border 1 pixel solid, ap-black-12. I'm gonna give this a padding of 1rem all around except for the top where it has 4rems. And then, I'm gonna give it a color, ap-black-85. I'm gonna set this plate inline-block. I'm gonna set margin-bottom 2rems, just in case we have content below that. I'm gonna set a maximum width of 100%. Because we're dealing with a link that's bold by default I'm gonna set a font weight of normal. Finally, let's make it small. So extend ap-small-text, and let's make it round, include ap-round. And on hover, I'm gonna actually change the border-color to $ap-black-50;. Okay, let's have a look. Yep, not bad. Let's add that arrow on the right side, so for that I'm gonna use an after sudo element. The contents I'll be \f125, let's set right 2rems, and do the usual stuff for icons @extend .ap-super-small-text;, I'm gonna extend .ap-ionicons;, and @extend ap-center-v, okay, perfect. The last thing that we need to do is take its URL and put it above the text. For that, I'm going to use before the content. We're gonna get it from the attribute attr(href). And I'm gonna set a white-space to no-wrap overflow to hidden, and text-overflow set to ellipsis. This will make sure that even on small screens that text will not break the layout. Instead, it will be truncated and some ellipses will be shown instead. Let's set a color, it's gonna be ap-primary, let's make it bold. And let's play it as a block, so it sits above the actual link text, perfect and we're almost done with the article page content. So there are just a few remaining pieces to style, but we'll do that in the next lesson.

Back to the top