Finishing Up12:24 with Nick Pettit
In this video, we'll work on the features sections towards the bottom of the page, and finish things up.
[Master Class Fluid Grids] [CSS: Part 4] 0:00 We have our basic 3 column layout completed, and now it's time to finish things up. 0:05 Next, we're going to work on the features down at the bottom of the page. 0:11 Go ahead and switch back to TextMate and move on. 0:16 We'll copy our comment flag here and paste it in, and the next section is going to be called 0:21 "Features" and the features, just to remind you, appear at the bottom of the page. 0:29 So let's go ahead and switch over to Photoshop, and we'll close this smart object 0:35 and scroll down here, and this is going to be the features section. 0:40 Now, these features are actually separate from our 3 column layout at the top, 0:45 and we're going we're going to style each individual feature because each one has 0:50 a slightly different icon, but there will still be shared styles among them. 0:55 So we'll go ahead and switch back to TextMate 1:00 and we'll make some room to work here, and first we'll just select the entire "Features" div 1:05 and we'll float it to the left. 1:13 Now inside of the features div we have a bunch of feature classes. 1:16 We're going to select the features list again and select each list item inside of it 1:21 which is identified by the class "feature." 1:28 Now, let's go ahead and switch over to our html just so 1:31 we can get an idea of what this actually looks like. 1:35 Like I said, features is actually an unordered list, and then each feature is a list item 1:39 inside of that, and of course, inside of each list item we have a few elements. 1:45 We have a div with an image inside of it for the icon, and then we have a div called "info" 1:52 with a 3rd level headline and a paragraph just sort of describing that feature a little bit. 1:58 So let's go ahead and switch back to our css, and for the feature we need to set a width, and 2:05 once again, this needs to be a fluid width. 2:11 So let's go ahead and switch over to Photoshop and select our marquee 2:14 tool and measure this out. 2:19 We're going to select this entire feature here and according to our info panel, 2:21 the width is 310 and this needs to be calculated against the context 2:27 of the entire page, which is 950. 2:33 So let's go ahead and switch back to TextMate and just make a comment in the margin here. 2:37 So we'll say 310 divided by 950 and we'll switch over to our calculator 2:43 and do this calculation. 2:50 So 310 divided by 950 gives us about 32% so we'll copy that number, paste it 2:52 in here, make it a percent and then move the decimal point over. 3:00 Just like that. 3:07 We want each feature to be floated to the left, and then we want to set a minimum height on 3:09 these of 200 pixels because they are in a fairly dynamic environment with fluid widths, but 3:17 we never want their height to go below 200 pixels, otherwise the text will start to wrap 3:25 strangely, and the icons could be offset and so on. 3:31 Next, we're going to go ahead and style the icons inside of each feature. 3:35 So we'll say "#features.feature.icon" and then we'll go ahead and float those icons 3:41 to the left and we need to set a width on these icons and of course, these icons are images 3:49 that will be scaled, and so we need to set a fluid width on these. 3:56 So we'll go ahead and switch back to Photoshop here, select one of our icons, 4:00 and it looks like the width is 71 pixels there, and this needs to be calculated against the 4:06 context of a feature which has a width of 310. 4:14 So we'll switch back to TextMate and we'll say the target of 71 pixels divided by the context 4:18 of 310 pixels, and we'll calculate that using our calculator, 4:29 and we'll say 71 divided by 310 and that gives us about 22%. 4:35 So we'll go ahead and copy and paste that in, move the decimal point 4:42 and set it to a percentage. 4:47 Then, we need to set a margin right on these icons, so we'll go ahead and type out 4:50 "margin-right" and this is of course along the x axis so we need to calculate 4:55 a fluid width for this as well. 5:01 So we'll go ahead and switch over to Photoshop and using our marquee tool, 5:03 we'll go ahead and measure out the margin right of this icon, and the margin right will just 5:08 give the icon some separation from our 3rd level headline and from the paragraph text. 5:14 So it looks like the width there is 10 pixels, and this will be measured against the 5:20 context of the entire feature class, which is a width of 310. 5:25 So we'll go ahead and switch back to TextMate, and we'll put a comment in the 5:31 margin, and we'll say 10 divided by 310 and we'll calculate that using our calculator, 5:36 10 divided by 310 and that gives us about 3%. 5:45 So we'll copy that from our calculator, paste it into our css document, move the 5:50 decimal point, and set it as a percentage. 5:55 And now, we just need to say height 100% on our icon just so that the icon fills the entire 5:59 width and height of its parent element. 6:08 Next, we're going to go ahead and select "#features.feature.info" and this is the 6:11 div that contains the 3rd level headline in the paragraph text to the right of the icon. 6:20 We're going to float this to the left, and we can just sort of approximate this and give it a 6:26 width of about 73% and we'll give it a margin top of about 2%, and then we'll style the 6:34 3rd level headline, and I want to give this the same Pacifico font 6:46 that we used on the quotes earlier. 6:54 So I'll go ahead and say "Pacifico" for the font, and I'll set some fall backs just like that. 6:57 I'll set the font size manually to 1.8 ems, and then I'll give it a margin bottom of about 16 7:07 pixels and again, this is on the h3 so this margin bottom is separating the 3rd level 7:15 headline from the paragraph text. 7:22 So we'll skip down here some more, and we'll move on to the actual paragraph text, 7:26 and this is pretty simple. 7:32 We want it to be slightly smaller than the 3rd level ,and we'll give it a lighter color 7:34 just so it has a little bit less emphasis. 7:40 Next, I'm going to go ahead and set a margin left on each one of our features. 7:43 However, if we switch over to Photoshop, we can see 7:49 that this 1st and 3rd feature are going to have a different margin left 7:53 than this 2nd and 4th feature. 7:59 So in order to accommodate this, we're actually going to use a css 3 selector. 8:03 So let's go ahead and switch back to TextMate, and we'll skip down here, 8:09 and then we'll select the features list and select a feature, 8:14 and we'll use the pseudo selector "nth-child" and give it a value of 1. 8:21 I'll go ahead and copy that and paste it on the next line, and we'll change this 8:28 value to 3 and we're going to give this a margin left, and in order to calculate this 8:34 we need to switch over to Photoshop. 8:41 Now, this margin left is going to be everything that's to the left of 8:44 this first feature and this 3rd feature. 8:49 So it looks like that's a width of 121, and this needs to be calculated against 8:53 the entire width of the page, which is 950, so we can go ahead and switch over 8:58 to TextMate and put that in the margin, and then we'll put that into our calculator. 9:04 So 121 divided by 950. 9:09 We'll switch over to our calculator and clear out what we have and say 121 divided by 950 9:13 and that gives us a value of about 12%. 9:21 So we'll go ahead and copy that and paste it into our css document. 9:24 We'll move the decimal point and remove the extra and set it to a percentage. 9:29 Next, we just need to style our 2nd and 4th children so we'll go ahead and say 9:35 "#features.feature:nth-child" and give it a value of 2 this time, and then we can 9:42 just go ahead and copy that and paste it down on the next line, and we'll give it a value of 4. 9:51 Now we need to say margin-left and we'll go ahead and switch over to Photoshop so that 9:58 we can calculate this and this is going to be everything to the left of our 2nd and 4th feature 10:05 up until our 1st and 3rd feature. 10:12 So it looks like this is a value of 90, so we'll go ahead and calculate that against 10:15 the width of the entire page. 10:21 So we'll put this in our margin as a comment just so we know how this is being calculated. 10:23 We'll say 90 divided by 950, switch over to our calculator, clear out what we have and say 10:29 90 divided by 950 and copy that, which looks to be about 9%. 10:36 We'll move the decimal point over just like that and then we'll set this to a percentage, 10:43 and save it out. 10:51 Now let's go ahead and switch over to Google Chrome, and we'll refresh the page and if 10:53 we scroll down here you can see that we now have these features. 10:59 We have a nice icon with a 3rd level headline next to it with the Pacifico font, 11:02 and then we have our paragraphs right below our 3rd level headline in a slightly lighter 11:09 colored font in the Helvetica font and if we go ahead and adjust the width 11:15 of our browser here, you can see that because we have a fluid grid, everything just resizes 11:22 itself automatically. 11:28 So let's go ahead and scroll up so we can see what the 3 columns actually 11:30 looks like when we do that. 11:34 If we just resize you can see that the percentages 11:36 automatically resize 3 columns. 11:39 Now, we're not quite done here. 11:42 We still need to get into responsive design because as you can see, when we get down 11:44 to these smaller sizes, the layout really starts to break down and our percentages don't quite 11:49 support the layout anymore. 11:56 That about wraps things up for this Master Class. 11:58 By now, you should have a pretty good idea of how to calculate and set up a fluid grid layout. 12:00 Our design is not completely responsive yet because we haven't added in our 12:07 css 3 media queries. 12:11 We also haven't done any cross browser testing. 12:13 However, setting up the fluid grid is an essential 12:16 step in creating a full, responsive design. 12:19
You need to sign up for Treehouse in order to download course files.Sign up