1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:05,000
[Master Class: Fluid Grids: CSS: Part 2]

3
00:00:05,000 --> 00:00:10,000
[Nick Pettit] So far, we've added some of the basic essentials to our CSS

4
00:00:10,000 --> 00:00:13,000
and we've started our fluid grid calculations.

5
00:00:13,000 --> 00:00:16,000
Now we're going to move on to our center column

6
00:00:16,000 --> 00:00:20,000
which will contain our HTML5 video.

7
00:00:20,000 --> 00:00:24,000
First, we're going to style the div called phone,

8
00:00:24,000 --> 00:00:28,000
so we'll go ahead and select that #phone {

9
00:00:28,000 --> 00:00:34,000
and we need to first apply a width; however, this of course, has to be a fluid width

10
00:00:34,000 --> 00:00:39,000
so we need to jump over to Photoshop to go ahead and calculate that.

11
00:00:39,000 --> 00:00:42,000
So let's go ahead and switch over

12
00:00:42,000 --> 00:00:48,000
and this is going to be the center column, so we need to go ahead and grab that

13
00:00:48,000 --> 00:00:52,000
and it looks like the width is 310

14
00:00:52,000 --> 00:00:57,000
and the context is the entire width of the page, 950,

15
00:00:57,000 --> 00:01:01,000
so we can switch over to our calculator and calculate that.

16
00:01:01,000 --> 00:01:07,000
310, which is our target divided by the context of 950

17
00:01:07,000 --> 00:01:10,000
gives us that number there: 0.326315789473684

18
00:01:10,000 --> 00:01:17,000
and we'll copy it, switch over to TextMate, paste it in, move the decimal point over,

19
00:01:17,000 --> 00:01:23,000
and then make it a percentage, just like that. 

20
00:01:23,000 --> 00:01:27,000
And we should go ahead and put a comment on the right side

21
00:01:27,000 --> 00:01:32,000
so that we know what it is we're actually calculating here.

22
00:01:32,000 --> 00:01:33,000
There we go. 

23
00:01:33,000 --> 00:01:40,000
We'll go ahead and float this to the left because, of course, it is a column.

24
00:01:40,000 --> 00:01:44,000
We'll set the background to the image that we created earlier,

25
00:01:44,000 --> 00:01:49,000
which is in the images directory, so we need to jump out of the CSS directory,

26
00:01:49,000 --> 00:01:56,000
go into the /images/ directory, and the image we want is called phone.png.

27
00:01:56,000 --> 00:02:04,000
We'll set that to top center and no-repeat.

28
00:02:04,000 --> 00:02:07,000
Next, we're going to set a background-size on this,

29
00:02:07,000 --> 00:02:13,000
and of course, background-size is a CSS3 property, so we need to use vendor prefixes.

30
00:02:13,000 --> 00:02:18,000
We'll start out with -webkit-background-size:.

31
00:02:18,000 --> 00:02:25,000
We'll set the width to 100% and we'll set the height to auto.

32
00:02:25,000 --> 00:02:29,000
So by setting a width of 100% and setting the height to auto,

33
00:02:29,000 --> 00:02:32,000
the width will fill up the container

34
00:02:32,000 --> 00:02:35,000
and whatever's left over will just fill up the rest,

35
00:02:35,000 --> 00:02:38,000
and will maintain the aspect ratio of the image.

36
00:02:38,000 --> 00:02:42,000
This is slightly different from what we've been doing previously

37
00:02:42,000 --> 00:02:46,000
where we've actually been putting images inside of our markup.

38
00:02:46,000 --> 00:02:52,000
By setting a background size like this, it allows us a little bit more flexibility

39
00:02:52,000 --> 00:02:59,000
and allows us to actually put an HTML5 video on top of this image. 

40
00:02:59,000 --> 00:03:02,000
So next, we'll go ahead and do the Mozilla styling,

41
00:03:02,000 --> 00:03:05,000
which is actually exactly the same as the webkit styling.

42
00:03:05,000 --> 00:03:08,000
We just need to change the vendor prefix -moz. 

43
00:03:08,000 --> 00:03:13,000
And then finally, we'll go ahead and have a fallback

44
00:03:13,000 --> 00:03:19,000
that will support browsers that actually don't need a vendor prefix. 

45
00:03:19,000 --> 00:03:23,000
Next, we need to set a margin-left on this column

46
00:03:23,000 --> 00:03:27,000
and of course, we need to calculate the fluid grid for this,

47
00:03:27,000 --> 00:03:30,000
so we'll go ahead and switch over to Photoshop, 

48
00:03:30,000 --> 00:03:33,000
select our marquee tool,

49
00:03:33,000 --> 00:03:38,000
and the margin-left here will be everything to the left of the phone

50
00:03:38,000 --> 00:03:40,000
before we hit the left column.

51
00:03:40,000 --> 00:03:44,000
So it looks like we have about 40 pixels here,

52
00:03:44,000 --> 00:03:48,000
and we want to calculate this against the entire width of the page,

53
00:03:48,000 --> 00:03:52,000
so we'll go ahead and switch over to our calculator and say 

54
00:03:52,000 --> 00:03:57,000
40 divided by 950, which gives us about 4%.

55
00:03:57,000 --> 00:04:01,000
We'll copy that number, switch over to TextMate, paste it in, 

56
00:04:01,000 --> 00:04:06,000
move the decimal point, and then make it a percentage. 

57
00:04:06,000 --> 00:04:12,000
We should also put the calculation in the margin,

58
00:04:12,000 --> 00:04:16,000
just so we know what's going on, so we'll say 40 divided by 950. 

59
00:04:16,000 --> 00:04:17,000
* 40 / 950 */

60
00:04:17,000 --> 00:04:20,000
And then finally, we're just going to put some margin-top,

61
00:04:20,000 --> 00:04:23,000
and really, you can put whatever you want here.

62
00:04:23,000 --> 00:04:28,000
I'm going to put 35px just to give it a little bit of space from the top.

63
00:04:28,000 --> 00:04:31,000
Now next, we need to move on to the video container,

64
00:04:31,000 --> 00:04:37,000
so let's go ahead and switch back to our markup just so we can see what's going on here.

65
00:04:37,000 --> 00:04:42,000
We just styled the phone, which is basically just the center column,

66
00:04:42,000 --> 00:04:47,000
and then inside of our center column, we have this video container div.

67
00:04:47,000 --> 00:04:52,000
Inside the video container div, we have the actual HTML5 video. 

68
00:04:52,000 --> 00:04:56,000
But first, let's go ahead and style this video container.

69
00:04:56,000 --> 00:05:00,000
So we're going to go ahead and switch over to our CSS

70
00:05:00,000 --> 00:05:03,000
and we'll scroll down here just a little bit.

71
00:05:03,000 --> 00:05:07,000
We're going to first select our #phone, which is, of course, our center column

72
00:05:07,000 --> 00:05:12,000
and then we'll select the #video_container {.

73
00:05:12,000 --> 00:05:16,000
We're going to set a width on this and this of course needs to be a fluid width

74
00:05:16,000 --> 00:05:19,000
so we're going to go ahead and switch over to Photoshop 

75
00:05:19,000 --> 00:05:24,000
and we're going to open up our Layers panel here

76
00:05:24,000 --> 00:05:28,000
because this phone is actually a Smart Object. 

77
00:05:28,000 --> 00:05:31,000
So we're going to go ahead and open that up

78
00:05:31,000 --> 00:05:36,000
and we need to calculate a couple of things here.

79
00:05:36,000 --> 00:05:39,000
First, we'll just start off with the width.

80
00:05:39,000 --> 00:05:45,000
Now, I'm going to select everything so that we can actually see the entire width of the phone,

81
00:05:45,000 --> 00:05:49,000
which appears to be 1021.

82
00:05:49,000 --> 00:06:00,000
So we'll go ahead and switch over to TextMate and record some of these values.

83
00:06:00,000 --> 00:06:04,000
So 1021 = width of phone,

84
00:06:04,000 --> 00:06:18,000
1978  = height of phone, 

85
00:06:18,000 --> 00:06:24,000
and then we're going to measure the video area, and this will be where our HTML5 video

86
00:06:24,000 --> 00:06:26,000
is actually contained. 

87
00:06:26,000 --> 00:06:29,000
So the width is 853 and the height is 1280,

88
00:06:29,000 --> 00:06:33,000
so we'll go ahead and write that down.

89
00:06:33,000 --> 00:06:37,000
853 = width of video area

90
00:06:37,000 --> 00:06:42,000
1280 = height of video area

91
00:06:42,000 --> 00:06:47,000
And now, we're ready to actually calculate the width of the video container

92
00:06:47,000 --> 00:06:56,000
so we want to go ahead width: ; /* 

93
00:06:56,000 --> 00:07:00,000
and take our target of 853, which is the width of the video area,

94
00:07:00,000 --> 00:07:05,000
and divide that into the context, which is the width of the entire phone.

95
00:07:05,000 --> 00:07:09,000
So we'll go ahead and switch over to our calculator, clear out what we have, 

96
00:07:09,000 --> 00:07:16,000
and say 853 divided by 1021, 

97
00:07:16,000 --> 00:07:20,000
and we'll go ahead and copy that value from our calculator and paste it in,

98
00:07:20,000 --> 00:07:24,000
move the decimal point, 

99
00:07:24,000 --> 00:07:29,000
set it as a percentage, and now we have our width.

100
00:07:29,000 --> 00:07:32,000
We also need to calculate our margin, and to do that, 

101
00:07:32,000 --> 00:07:37,000
we do need to switch back to Photoshop and make a few more measurements.

102
00:07:37,000 --> 00:07:42,000
Now, the video is actually going to be centered inside of this phone element

103
00:07:42,000 --> 00:07:47,000
so the only margin that we need to calculate is going to be on the top and bottom. 

104
00:07:47,000 --> 00:07:53,000
Remember, in our fluid layout, this phone could potentially be resized,

105
00:07:53,000 --> 00:07:59,000
so we need to resize the video with that and that means that our top and bottom margins 

106
00:07:59,000 --> 00:08:05,000
need to be percentages, so we'll go ahead and select the top margin here,

107
00:08:05,000 --> 00:08:11,000
starting from the top of the video container going all the way to the top of the phone.

108
00:08:11,000 --> 00:08:18,000
The height there is 352 so let's go ahead and record that value in TextMate.

109
00:08:18,000 --> 00:08:25,000
So 352 = height of area above video.

110
00:08:25,000 --> 00:08:28,000
And then we need to get that bottom margin

111
00:08:28,000 --> 00:08:35,000
so we'll go ahead select that, and it looks like the height there is 346

112
00:08:35,000 --> 00:08:37,000
so we'll go ahead and record that.

113
00:08:37,000 --> 00:08:45,000
So 346 = height of area below video.

114
00:08:45,000 --> 00:08:49,000
And now, we're ready to go ahead and do our calculations. 

115
00:08:49,000 --> 00:08:53,000
First, I'm going to calculate the top margin

116
00:08:53,000 --> 00:09:01,000
which will be 352 divided into the width of the phone

117
00:09:01,000 --> 00:09:04,000
Now remember, the way that margin is calculated

118
00:09:04,000 --> 00:09:08,000
is into the width, so we can't actually calculate this into the height.

119
00:09:08,000 --> 00:09:13,000
I know that seems a little bit strange, but just bear with me. 

120
00:09:13,000 --> 00:09:22,000
So we'll go ahead and copy this because we also need to do this for the bottom margin.

121
00:09:22,000 --> 00:09:27,000
So that will be 346 divided by 1021,

122
00:09:27,000 --> 00:09:30,000
and now we can go ahead and switch over to our calculator,

123
00:09:30,000 --> 00:09:34,000
clear out what we have, and do our calculations.

124
00:09:34,000 --> 00:09:42,000
So 352 divided into the width of the phone gets us that number there.

125
00:09:42,000 --> 00:09:48,000
We'll go ahead and move the decimal point and set it as a percentage.

126
00:09:48,000 --> 00:09:52,000
We want the top and bottom to be set to auto

127
00:09:52,000 --> 00:09:55,000
 so we'll go ahead and put in that value

128
00:09:55,000 --> 00:10:02,000
and then, we're ready to do the bottom margin, which is 346 into 1021,

129
00:10:02,000 --> 00:10:11,000
so let's go ahead and do that calculation, 346 / 1021.

130
00:10:11,000 --> 00:10:18,000
We can go ahead and paste in that value,

131
00:10:18,000 --> 00:10:21,000
just like that.

132
00:10:21,000 --> 00:10:25,000
And we'll go ahead and move those over

133
00:10:25,000 --> 00:10:27,000
just so they all line up nicely

134
00:10:27,000 --> 00:10:31,000
and now we have our video container.

135
00:10:31,000 --> 00:10:37,000
So let's go ahead switch over to the browser and refresh.

136
00:10:37,000 --> 00:10:41,000
And now, we have our three columns, so we have our column on the left,

137
00:10:41,000 --> 00:10:46,000
which is our header, our center column, which is the phone,

138
00:10:46,000 --> 00:10:49,000
and our column on the right, which is miscellaneous.

139
00:10:49,000 --> 00:10:52,000
And inside of the phone in our center column, 

140
00:10:52,000 --> 00:10:57,000
we have our HTML5 video contained inside of the phone.

141
00:10:57,000 --> 00:11:01,000
Now, my browser window is just set to some arbitrary size,

142
00:11:01,000 --> 00:11:04,000
but we can already see that it's working pretty well.

143
00:11:04,000 --> 00:11:07,000
If we go ahead and actually resize the browser window,

144
00:11:07,000 --> 00:11:14,000
you can see that the HTML5 video keeps up with the size of the phone.

145
00:11:14,000 --> 00:11:20,000
In my opinion, what we just covered is the most complex portion of this entire project,

146
00:11:20,000 --> 00:11:24,000
mostly because of the way top and bottom margins are calculated 

147
00:11:24,000 --> 00:11:26,000
when using percentages.

148
00:11:26,000 --> 00:11:29,000
When using percentages for the margin width value,

149
00:11:29,000 --> 00:11:35,000
the CSS2.1 box model specification under section 8.3 says 

150
00:11:35,000 --> 00:11:42,000
the percentage is calculated with respect to the width of the generated box's containing block.

151
00:11:42,000 --> 00:11:46,000
Note that this is true for margin-top and margin-bottom as well. 

152
00:11:46,000 --> 00:11:49,000
The important word there is "width,"

153
00:11:49,000 --> 00:11:52,000
so in other words, margin-top and margin-bottom percentages

154
00:11:52,000 --> 00:11:58,000
are calculated with respect to the containing block's width and not the height,

155
00:11:58,000 --> 00:12:00,000
as you might expect.

156
00:12:00,000 --> 00:12:05,000
This is why in our fluid grid calculation we set our target to the top and bottom margins

157
00:12:05,000 --> 00:12:08,000
but we set our context to the width.

158
00:12:08,000 --> 00:12:15,000
We then divided the top and bottom margins by the width of the entire element.