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

2
00:00:02,000 --> 00:00:07,000
[Master Class: Designer and Developer Workflow: Third Sprint: Basic Site Styling]

3
00:00:07,000 --> 00:00:10,000
[Nick Pettit] Now that we have all of our images, 

4
00:00:10,000 --> 00:00:14,000
we're ready to go ahead and dive into the CSS and include all of them. 

5
00:00:14,000 --> 00:00:18,000
First, let's just go ahead and assess our CSS a little bit 

6
00:00:18,000 --> 00:00:22,000
and see what we need to remove or change

7
00:00:22,000 --> 00:00:27,000
before we go ahead and add in our fluid grid layout.

8
00:00:27,000 --> 00:00:31,000
First, we're going to get rid of all of these Blueprint variables

9
00:00:31,000 --> 00:00:35,000
because they're all pixel widths and we can't use that 

10
00:00:35,000 --> 00:00:38,000
if we're trying to create a fluid grid.

11
00:00:38,000 --> 00:00:41,000
This doesn't make Blueprint useless entirely.

12
00:00:41,000 --> 00:00:45,000
In fact, there's lots of things in Blueprint that are still bootstrapping the page,

13
00:00:45,000 --> 00:00:50,000
such as the reset code, but we don't really need it. 

14
00:00:50,000 --> 00:00:56,000
On our wrapper, we're going to get rid of the container

15
00:00:56,000 --> 00:01:02,000
and we're going to set the width to 100% for now

16
00:01:02,000 --> 00:01:09,000
and let's just jump back to the browser to see what kind of effect this had.

17
00:01:09,000 --> 00:01:12,000
So when we refresh the page, 

18
00:01:12,000 --> 00:01:16,000
that's exactly what we expected to happen. 

19
00:01:16,000 --> 00:01:19,000
The text is all the way up against the sides

20
00:01:19,000 --> 00:01:22,000
because there's no wrapper keeping this in.

21
00:01:22,000 --> 00:01:29,000
So let's just change that to about 90% for now.

22
00:01:29,000 --> 00:01:33,000
So we'll bump this back down to 90% and refresh the page

23
00:01:33,000 --> 00:01:39,000
and now we have a little bit of space and we just need to center this on the page

24
00:01:39,000 --> 00:01:47,000
and we can do that pretty easily using margin: 0 auto.

25
00:01:47,000 --> 00:01:51,000
And now, it's centered on the page, so as we resize the browser,

26
00:01:51,000 --> 00:01:55,000
these margins will stay there.

27
00:01:55,000 --> 00:01:57,000
Now let's switch back to TextMate

28
00:01:57,000 --> 00:02:00,000
and take a look at the rest of the code.

29
00:02:00,000 --> 00:02:04,000
This h1 is okay; we're going to end up changing that

30
00:02:04,000 --> 00:02:07,000
when we change it to our actual logo.

31
00:02:07,000 --> 00:02:11,000
I don't want to change any of these list items except for the columns

32
00:02:11,000 --> 00:02:16,000
we'll probably need to get rid of pretty soon. 

33
00:02:16,000 --> 00:02:23,000
And everything else looks okay for now, but we'll change things as we go along. 

34
00:02:23,000 --> 00:02:27,000
So let's scroll back up to the top here and let's look in the browser really quick.

35
00:02:27,000 --> 00:02:34,000
What's going to end up happening is this Easy Jobs! is going to become our logo

36
00:02:34,000 --> 00:02:39,000
so this h1 will actually end up being an image here and will hide the text,

37
00:02:39,000 --> 00:02:43,000
but we'll keep it in the markup for accessibility reasons.

38
00:02:43,000 --> 00:02:49,000
The list in the center of the page here will end up being inside of that piece of paper

39
00:02:49,000 --> 00:02:53,000
and the authentication links will end up in the upper right.

40
00:02:53,000 --> 00:02:55,000
I'm not really sure where the New Job link is going to go 

41
00:02:55,000 --> 00:02:59,000
because we didn't really design that view. 

42
00:02:59,000 --> 00:03:04,000
We only designed the show view here,

43
00:03:04,000 --> 00:03:08,000
so on that note, why don't we go ahead and focus on the show view

44
00:03:08,000 --> 00:03:12,000
when we're creating our design and we'll go ahead and come back to the index view

45
00:03:12,000 --> 00:03:15,000
and some of the other views later on.

46
00:03:15,000 --> 00:03:20,000
If we can get this one view done in this Sprint, we should be in a pretty good position 

47
00:03:20,000 --> 00:03:24,000
to get the rest of them done in maybe the next Sprint. 

48
00:03:24,000 --> 00:03:29,000
So let's start with a few simple things like the logo and then the background 

49
00:03:29,000 --> 00:03:34,000
and try to make them look like our Photoshop mockup. 

50
00:03:34,000 --> 00:03:37,000
So if we review in Photoshop here, 

51
00:03:37,000 --> 00:03:41,000
we have our logo, which we sliced up already,

52
00:03:41,000 --> 00:03:44,000
and that's actually going to be a pixel width

53
00:03:44,000 --> 00:03:49,000
because when we create our fluid grid layout, we don't want this image

54
00:03:49,000 --> 00:03:54,000
to be resized at all because if this image were to resize, 

55
00:03:54,000 --> 00:03:57,000
the border would become smaller and it wouldn't line up very well 

56
00:03:57,000 --> 00:04:02,000
with our background image.

57
00:04:02,000 --> 00:04:08,000
So even though most everything else will have a fluid or percentage width on it,

58
00:04:08,000 --> 00:04:13,000
our logo does need to have a pixel width, and that's fine. 

59
00:04:13,000 --> 00:04:17,000
So with that in mind, let's go ahead and switch back to TextMate

60
00:04:17,000 --> 00:04:23,000
and let's go ahead and apply this background image to our h1.

61
00:04:23,000 --> 00:04:28,000
Now, the font-size and font-weight really don't matter here.

62
00:04:28,000 --> 00:04:36,000
We just need to set an explicit width and the width of our image is 390px.

63
00:04:36,000 --> 00:04:43,000
The height is 79px and we're just going to set a really obvious background 

64
00:04:43,000 --> 00:04:49,000
like a background color of red just to see what's going on in our markup.

65
00:04:49,000 --> 00:04:52,000
So let's go ahead and switch back to the browser 

66
00:04:52,000 --> 00:04:57,000
and we'll refresh the page and that's the size of our logo. 

67
00:04:57,000 --> 00:05:00,000
Now let's go ahead and include the image.

68
00:05:00,000 --> 00:05:08,000
So we'll switch back again and the background is going to be a URL 

69
00:05:08,000 --> 00:05:17,000
and to get to the image, we need to jump out of the style sheets directory,

70
00:05:17,000 --> 00:05:21,000
jump into the images directory, and remember, inside of the images directory

71
00:05:21,000 --> 00:05:28,000
we created another folder called Layout to hold all of our images related to our layout,

72
00:05:28,000 --> 00:05:36,000
and we called our logo easy_jobs.png. 

73
00:05:36,000 --> 00:05:40,000
We want this to be top center for the position, 

74
00:05:40,000 --> 00:05:43,000
although that doesn't really matter a whole lot,

75
00:05:43,000 --> 00:05:47,000
and we want to set this to no repeat. 

76
00:05:47,000 --> 00:05:52,000
So let's go ahead and save that out, we'll switch back and refresh the page,

77
00:05:52,000 --> 00:05:56,000
and now we have our logo somewhat in place. 

78
00:05:56,000 --> 00:05:59,000
Now, you'll notice that we still have this text here,

79
00:05:59,000 --> 00:06:01,000
and we need to get rid of that. 

80
00:06:01,000 --> 00:06:10,000
To do that, we're going to set a text-indent: -20000px.

81
00:06:10,000 --> 00:06:16,000
Now, what this will do is actually push the text to the left by 20000 pixels,

82
00:06:16,000 --> 00:06:21,000
and unless you're using a monitor from the future, you probably aren't going to see it

83
00:06:21,000 --> 00:06:25,000
because it's just going to be so far off screen.

84
00:06:25,000 --> 00:06:28,000
So we'll switch back and refresh the page,

85
00:06:28,000 --> 00:06:33,000
and now that Easy Jobs! text is gone, but it's still in the markup 

86
00:06:33,000 --> 00:06:35,000
for accessibility reasons.

87
00:06:35,000 --> 00:06:39,000
Now you'll notice that the background color that we're using here 

88
00:06:39,000 --> 00:06:46,000
is just slightly off-white, so we need to make sure that we change that

89
00:06:46,000 --> 00:06:50,000
when we apply the background image to the whole page, 

90
00:06:50,000 --> 00:06:58,000
so let's go ahead and switch over and we're going to apply our background image 

91
00:06:58,000 --> 00:07:02,000
to the body of the page. 

92
00:07:02,000 --> 00:07:08,000
We'll use the background property, of course, and same URL.

93
00:07:08,000 --> 00:07:13,000
We need to jump out of the style sheets directory into the images directory 

94
00:07:13,000 --> 00:07:21,000
layout, and if you'll recall, we named the image bg.png.

95
00:07:21,000 --> 00:07:30,000
We'll set this to the top center and we want to repeat along the x axis.

96
00:07:30,000 --> 00:07:36,000
And then, finally, we need to grab the color that we're going to use from Photoshop,

97
00:07:36,000 --> 00:07:42,000
but first, let's just go ahead and set it to red

98
00:07:42,000 --> 00:07:46,000
and we'll switch back and refresh the browser

99
00:07:46,000 --> 00:07:52,000
and you'll see that our logo isn't quite lining up with the manila folder just yet,

100
00:07:52,000 --> 00:07:54,000
but that's okay. 

101
00:07:54,000 --> 00:07:58,000
And we can see that we have this nice paper texture going,

102
00:07:58,000 --> 00:08:03,000
and just looking at it from here, it doesn't look like it's really repeating at all

103
00:08:03,000 --> 00:08:07,000
even though, of course, it is, so it looks like we have the effect

104
00:08:07,000 --> 00:08:10,000
that we wanted to accomplish. 

105
00:08:10,000 --> 00:08:12,000
Now, we need to do a couple of things here. 

106
00:08:12,000 --> 00:08:16,000
Our page isn't scrolling yet, but if it were to scroll 

107
00:08:16,000 --> 00:08:19,000
beyond the height of this background image,

108
00:08:19,000 --> 00:08:22,000
we would get some sort of strange color down there, 

109
00:08:22,000 --> 00:08:28,000
so we need to go ahead and add in that extra noise image that we created originally,

110
00:08:28,000 --> 00:08:32,000
and actually, because we're using an image all the way to the top, 

111
00:08:32,000 --> 00:08:38,000
it looks like we don't need to grab that off-white background color after all. 

112
00:08:38,000 --> 00:08:45,000
But let's go ahead and put in that noise image down below this repeating image. 

113
00:08:45,000 --> 00:08:52,000
So we have a comma there; we're going to skip down to the next line 

114
00:08:52,000 --> 00:08:57,000
and we're going to jump out of the style sheets directory into images,

115
00:08:57,000 --> 00:09:07,000
into layout, and we called this image folder_noise.png.

116
00:09:07,000 --> 00:09:10,000
Again, we'll say top center.

117
00:09:10,000 --> 00:09:12,000
It doesn't really matter.

118
00:09:12,000 --> 00:09:17,000
And we don't need to say repeat because it will repeat by default.

119
00:09:17,000 --> 00:09:22,000
So we'll save that and when we switch back and refresh, 

120
00:09:22,000 --> 00:09:24,000
it looks like we have a SASS error,

121
00:09:24,000 --> 00:09:27,000
so let's see what's going on here. 

122
00:09:27,000 --> 00:09:34,000
Now, it looks like SASS didn't like the fact that this line was indented so far

123
00:09:34,000 --> 00:09:39,000
because using this SASS syntax, indentation is actually very important,

124
00:09:39,000 --> 00:09:45,000
so we'll just skip the niceties and we won't put it on the next line

125
00:09:45,000 --> 00:09:50,000
and we'll just have one somewhat long line of backgrounds here.

126
00:09:50,000 --> 00:09:56,000
We'll save that out, switch back and refresh, and although nothing really looks different

127
00:09:56,000 --> 00:10:03,000
than what we had before, rest assured, our noise image is somewhere down below.

128
00:10:03,000 --> 00:10:09,000
Now, let's try to fix our logo so it's lined up with our background image.

129
00:10:09,000 --> 00:10:12,000
What we need to do is put some margin on the top 

130
00:10:12,000 --> 00:10:15,000
so that we can move this logo down 

131
00:10:15,000 --> 00:10:20,000
and we need to get these registration links out of the way

132
00:10:20,000 --> 00:10:24,000
because those are probably block-level elements. 

133
00:10:24,000 --> 00:10:27,000
So let's first switch back to Photoshop 

134
00:10:27,000 --> 00:10:31,000
and we'll grab our marquee tool 

135
00:10:31,000 --> 00:10:36,000
and we can probably figure out how much margin we need just by measuring

136
00:10:36,000 --> 00:10:40,000
from the top here going to the info tab,

137
00:10:40,000 --> 00:10:45,000
and it's saying a height of 18 pixels, so let's go ahead and try that out first. 

138
00:10:45,000 --> 00:10:48,000
So we'll switch over to TextMate

139
00:10:48,000 --> 00:10:59,000
and on our h1, we'll just say margin-top: 18px and save that out,

140
00:10:59,000 --> 00:11:03,000
and if we switch back to Google Chrome, that looks like it's just about perfect.

141
00:11:03,000 --> 00:11:10,000
I think it's 1 pixel off, so we'll change that to 17 pixels,

142
00:11:10,000 --> 00:11:13,000
and that looks like it's perfect.

143
00:11:13,000 --> 00:11:18,000
And it turns out we didn't really need to move those authentication links after all,

144
00:11:18,000 --> 00:11:21,000
although we do still need to move them to the upper right 

145
00:11:21,000 --> 00:11:24,000
because that's where we want to put them in our layout.

146
00:11:24,000 --> 00:11:34,000
So we'll switch back to TextMate and let's go in our views directory here 

147
00:11:34,000 --> 00:11:37,000
and we'll open up our application layout.

148
00:11:37,000 --> 00:11:42,000
You can see that we have an ID called user_bar

149
00:11:42,000 --> 00:11:47,000
and that contains all of our authentication links.

150
00:11:47,000 --> 00:11:51,000
So we can go ahead and use that ID in our CSS

151
00:11:51,000 --> 00:11:56,000
to move it over to the right, so let's just try something really simple 

152
00:11:56,000 --> 00:12:00,000
like floating it. 

153
00:12:00,000 --> 00:12:05,000
So we'll select our user_bar and we'll just float it to the right

154
00:12:05,000 --> 00:12:07,000
and see what happens.

155
00:12:07,000 --> 00:12:11,000
So we'll switch back to the browser and refresh, 

156
00:12:11,000 --> 00:12:13,000
and that's almost what we want. 

157
00:12:13,000 --> 00:12:17,000
We actually just need to float the Easy Jobs! logo over to the left

158
00:12:17,000 --> 00:12:20,000
and then we should be good, because remember, 

159
00:12:20,000 --> 00:12:23,000
this is an h1, which is a block-level element, 

160
00:12:23,000 --> 00:12:28,000
and it's actually extending all the way over to the right,

161
00:12:28,000 --> 00:12:32,000
or blocking the content all the way over on the right, at the very least. 

162
00:12:32,000 --> 00:12:34,000
So we'll switch back 

163
00:12:34,000 --> 00:12:39,000
and we'll float our h1 to the left,

164
00:12:39,000 --> 00:12:42,000
switch back and refresh, 

165
00:12:42,000 --> 00:12:46,000
and now we're getting into some issues where we need to actually clear the content,

166
00:12:46,000 --> 00:12:48,000
but that's okay. 

167
00:12:48,000 --> 00:12:51,000
The general idea is there, where we have our registration links over on the right side

168
00:12:51,000 --> 00:12:56,000
and our Easy Jobs! logo over on the left. 

169
00:12:56,000 --> 00:12:59,000
So I'd say so far this is looking pretty good, and I think now

170
00:12:59,000 --> 00:13:03,000
we're ready to get into the content.