Polishing Touches

Guess what guys? 0:00 You are in the home stretch. 0:02 Are page has really come together, and we've got our media queries set for 0:03 smaller sizes. 0:06 So now, let's look at how to polish and finesse our design. 0:08 Some of the things I have in mind are styling our content at 0:10 the bottom to be a drop down nav of the top. 0:14 Arranging our benefits section as an aside to our requirements section. 0:17 And adding some nice transitions and animations. 0:20 First, let me explain the extra credit from the last video and 0:24 how we achieved this drawer effect for our aside content at larger screen sizes. 0:27 We set a break point of 64.125em, which is 0:33 just slightly larger than our 1024 pixel or 64em break point. 0:37 The reason behind this is we'll be utilizing a CSS hover effect 0:43 that won't work on touch screens. 0:46 And most touch screens are under this pixel break point. 0:49 Since we don't have access to the HTML or JavaScript to create on click event, 0:51 we'll utilize this media query to show this draw effect for our desktops. 0:56 It's not a perfect solution. 1:01 But's it's our next best option since we don't have access to 1:02 other tools to create a bullet proof one. 1:05 So with our min width at 64.125em. 1:08 I've set our aside to have a position of absolute. 1:11 A top of -26.5. 1:15 So the majority of it's hidden above our header section. 1:17 And a transition of all 0.4 seconds and 1:21 ease to create that nice sliding out effect. 1:24 Next, I've set the hover state to be a top of -1em, 1:27 which will be where it slides to once it's hovered over. 1:30 Then, I've added a symbol button-like plus symbol with 1:34 the pseudo selector after on our aside and set its content to be a plus symbol. 1:37 We've also positioned it to be absolute with the text aligned off center. 1:43 It's background same as our aside. 1:47 It's color is our sandy white tone. 1:49 It's font size is 20 pixels. 1:52 And it's okay to utilize a fixed font size and 1:54 width here, as I don't want these elements to change. 1:56 And they're so small that it won't make a difference on smaller screen sizes. 1:59 Next, the width, height and 2:03 border radius are all 30 pixels, which will make this element a circle. 2:06 I want to position it in the center with the dark navy meets the sandy white. 2:10 So I gave it a bottom setting of -.65eM. 2:15 A left of 50%. 2:18 And a margin left of -15 pixels which is half of our 30 pixel width. 2:19 Let's check it out just once more to see how it looks. 2:25 The drawer and it's function is noticeable through the use of our plus symbol here. 2:28 And it's sliding transition effect is a nice touch. 2:32 Notice how it disappears under the 1024 pixel mark, and 2:36 moves now back to the bottom of the page. 2:39 Now let's get in to styling out our benefit section. 2:44 I want this content here to work as a subtle sidebar next to 2:47 our requirement section once there's enough room to fit it in. 2:50 I've done some testing and found that at 752 pixels or 2:55 our 47em media query, is a good place to start. 2:59 Anything below that would be too tight to try and fit it in as a sidebar. 3:03 This is also nice, because the size falls right below the iPad screen size, so 3:08 people reading this on an iPad will still get the sidebar layout. 3:12 To do this, I'll set my benefits class to have a position of 3:16 absolute, a background of none, a float to left. 3:19 This will allow us to position it within the requirement section. 3:27 I found that I like where it sits with a max width of 7.5 rem. 3:31 I text the line overwrite. 3:38 And a margin top of 12em. 3:43 To position it to the left of the content, I've given it a left of 50% and 3:50 a margin left of -25.5 rim. 3:55 [BLANK_AUDIO] 3:57 This technique aligns the piece in the middle of the page and 4:00 then moves it back to the left through a negative left margin. 4:03 This helps line up the content near the left margin of our 4:06 main content block for requirements. 4:09 Let's see what that looks like now. 4:11 I'll save and refresh. 4:13 All right. 4:17 That's a good start. 4:17 But let's continue to hone it in by decreasing it's font size and 4:18 styling out our content a bit more. 4:22 For our benefits H3 here, I want a font size of 1em, so 4:26 it's gonna be a lot smaller, and a margin of zero. 4:30 I also want this to be small caps as it will create hierarchy to 4:35 the content below it. 4:38 So I'll copy that small caps code. 4:39 [BLANK_AUDIO] 4:41 And I'll set it's font style to be normal since our base H3 is Italic. 4:47 Now for our paragraph copy and our benefits class, 4:52 I'll set it's font size to be 0.75em, the next size down in our scale. 4:56 With a line height of 1.4, 5:00 so it's a bit tighter, because our measure is a little tight here. 5:02 Let's save and see what that looks like. 5:07 Great. 5:10 Our benefits has been nicely arranged to the right side of 5:10 our requirements section. 5:13 This will need some tweaking as the browser expands because the font 5:15 sizes change in our media queries. 5:18 So let's fix it up. 5:20 As we increase our browser size, we notice our font change here. 5:23 Our measure for our benefit section is now a little bit tight and 5:27 a little bit too close to the edge of our requirements. 5:30 So let's fix that up. 5:33 Our min width media query will correspond to our max width one. 5:36 So we have this one set up at 54em. 5:41 I'll change our benefits class to have a slightly larger measure of 8 rem and 5:43 give it a margin top of 12.5em. 5:48 And in margin left of -28 rem, 5:51 which will position it well within our requirements class again. 5:54 Let's check out what that looks like. 5:57 Good deal. 5:59 It's starting to work well for medium sizes here and 5:59 feels positioned well within the container. 6:02 [BLANK_AUDIO] 6:04 With a font size increase at 64em our benefits class could use 6:06 some more changes. 6:10 So I'll go in and adjust our max width, our margin top, and 6:11 our margin left here to align it well within the container again. 6:14 [BLANK_AUDIO] 6:18 Let's refresh and check that out. 6:32 Nice. 6:34 Our benefits are now looking good for our mid to larger-sized screens. 6:35 We're getting close, but we're not done yet. 6:39 I wanna make two more media queries for large to extra large screen sizes. 6:41 People usually sit a little further back from large displays. 6:46 So it's nice to have a font size increase for comfortable reading. 6:49 We're not going to be able to view larger browser sizes here, 6:52 because the max width of of this video screencast is 1280 pixels. 6:56 So I'll just talk through what our code is doing here. 7:00 If you have a larger screen size, 7:05 then feel free to build out this code in your own workspace and test it out to see. 7:07 I've created a min width media query at 94em or 7:11 1472 pixels and upped our body font size to 1.375 or 22 pixels. 7:15 Most of our typography still held up well here. 7:22 But we needed to adjust a few things, like the measure of our summary and 7:25 benefits classes. 7:28 And I've adjusted the width of our explanation and participation H3s and Ps, 7:30 so their content measure doesn't go overboard for those two columns. 7:35 I also did one last media query at 124em or 1920 pixels. 7:39 I've increased our body font size once more to 1.5em or 24 pixels. 7:44 This new size meant we needed to adjust the measure on our summary class, all our 7:50 columns and we needed to slightly change the margin left of our benefit section. 7:55 Again, if you have a large screen, be sure to resize your browser and 8:00 check out these changes and how they actually look on the web page. 8:03 Now, let's add a few final touches to the design to really finesse it. 8:07 So first, I want all my links to have a smooth transition effect. 8:12 So, I'll go up here to my a link tag and add a transition of all 0.4 s and es. 8:17 Let's save and check out the difference. 8:22 [BLANK_AUDIO] 8:27 So I'll refresh our page. 8:30 And up here in our links, we see we have them slowly transitioning into their 8:32 color instead of just jumping to that color. 8:36 It's funny how something so simple can add so much to a design. 8:39 I'll also wanna enable kerning and ligatures on my body through 8:43 the font features settings with the necessary prefixes. 8:47 So I'll write out that property and 8:50 paste in these other prefixes for browser support here. 8:51 This code is what we went over in our lesson on advanced typography. 8:55 Lastly, I want my header and top drawer to fade in as someone lands on the page. 8:58 We'll use the CSS animation property along with the necessary prefixes for 9:03 browser support. 9:08 Since this isn't so much typography, I'm just gonna paste this in at the bottom and 9:09 explain it to you guys. 9:13 Here's our key frames for our animation, and they're going to be fading in with, 9:17 first with an opacity zero and then landing on one for that fade-in effect. 9:22 This other code down here includes the necessary browser prefixes. 9:26 [BLANK_AUDIO] 9:29 So I'll add in an animation of fade in two seconds to our aside for 9:33 that media query where it's at the top. 9:37 And I'm gonna copy that and add that to our header. 9:39 [BLANK_AUDIO] 9:41 [SOUND] Let's save and check that out. 9:53 yeah, that's nice. 9:56 Just in case you missed it, I'll do that one more time. 9:58 That's the stuff. 10:02 Great work. 10:03 Our design is now complete, polished, and fully responsive. 10:04 No matter the case, 10:08 be sure to test your typography on multiple browsers and devices. 10:09 In summary, we analyzed the content, chose a typeface pair to work with, 10:13 put together a color palette, set up our web fonts and 10:18 typographic scale, laid out type with good measure and 10:21 rhythm, created typographic hierarchy in the design and polished it responsively. 10:24 [BLANK_AUDIO] 10:29 We've covered a lot of ground over this project. 10:32 So be sure to download and 10:35 look into the final CSS for a better understanding if needed. 10:36 Also, for extra credit, try creating your own Zen Garden and submitting the own 10:40 design, as this is a great way to participate in the web community. 10:44 I hope you guys leave this course with a better understanding and appreciation for 10:47 web typography, and know how to execute it well. 10:51 Go forth creating websites with nice type. 10:54