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