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

2
00:00:02,000 --> 00:00:05,000
[Master Class: Designer and Developer Workflow: Styling the Index View]

3
00:00:05,000 --> 00:00:07,000
[Nick Pettit] We're now in Sprint number four 

4
00:00:07,000 --> 00:00:12,000
and there's a few things that we need to do here, but in general, 

5
00:00:12,000 --> 00:00:14,000
we're probably going to try and wrap things up. 

6
00:00:14,000 --> 00:00:18,000
Our major goals for this Sprint are going to be 

7
00:00:18,000 --> 00:00:22,000
to finish up any fluid grid calculations that we need to do,

8
00:00:22,000 --> 00:00:26,000
clean up our CSS by adding some comments.

9
00:00:26,000 --> 00:00:32,000
We need to move our styling from the job show view to all the other pages on the site. 

10
00:00:32,000 --> 00:00:37,000
We may need to add some media queries in order to make the site more responsive,

11
00:00:37,000 --> 00:00:41,000
and there are probably a few other things we need to tie up, 

12
00:00:41,000 --> 00:00:44,000
so let's just go ahead and dive in.

13
00:00:44,000 --> 00:00:47,000
First, I'm going to go ahead and do a $git pull

14
00:00:47,000 --> 00:00:53,000
to make sure that I'm completely up to date with any changes Jim may have made,

15
00:00:53,000 --> 00:00:59,000
and then I'm going to go ahead and branch into a branch called style.

16
00:00:59,000 --> 00:01:06,000
So if I type $git branch now, I should see that I have a branch called style,

17
00:01:06,000 --> 00:01:12,000
so let's go ahead and do a $git checkout style

18
00:01:12,000 --> 00:01:14,000
and switch over.

19
00:01:14,000 --> 00:01:18,000
And that should keep any of our changes isolated from any changes 

20
00:01:18,000 --> 00:01:21,000
that Jim might be making in parallel with us.

21
00:01:21,000 --> 00:01:24,000
So now, let's go ahead and start up our Rails server

22
00:01:24,000 --> 00:01:28,000
so I'll type $rails s 

23
00:01:28,000 --> 00:01:30,000
and I'll let that get fired up.

24
00:01:30,000 --> 00:01:39,000
And then, if I switch over to the browser and refresh on localhost: 3000

25
00:01:39,000 --> 00:01:43,000
I should see our Easy Jobs! website here.

26
00:01:43,000 --> 00:01:47,000
Now, most of our work has been done on the show view for jobs

27
00:01:47,000 --> 00:01:51,000
and if we go ahead and resize the browser here, 

28
00:01:51,000 --> 00:01:55,000
you can see that we have a little bit of a fluid grid going.

29
00:01:55,000 --> 00:01:57,000
There's a few problems when we get down to smaller sizes, 

30
00:01:57,000 --> 00:02:02,000
but that's nothing that can't be solved with a few media queries.

31
00:02:02,000 --> 00:02:07,000
And so I think we're looking pretty good with the fluid grid so far,

32
00:02:07,000 --> 00:02:09,000
so we'll go ahead and roll with that for now.

33
00:02:09,000 --> 00:02:12,000
Now, the next thing that we need to do 

34
00:02:12,000 --> 00:02:14,000
is start cleaning up our CSS, 

35
00:02:14,000 --> 00:02:17,000
so let's go ahead and switch over to our text editor. 

36
00:02:17,000 --> 00:02:23,000
I'm going to go into the public folder here, style sheets, SASS, 

37
00:02:23,000 --> 00:02:28,000
and then I'm going to jump into application.sass

38
00:02:28,000 --> 00:02:33,000
and let's just go ahead and add a few comments.

39
00:02:33,000 --> 00:02:38,000
So I'll type // to start my comments there.

40
00:02:38,000 --> 00:02:43,000
I'll go ahead and put in a few stars to create a comment flag

41
00:02:43,000 --> 00:02:51,000
and let's go ahead and call this first section BASIC STYLES.

42
00:02:51,000 --> 00:02:56,000
And let's go ahead and copy our comment flag

43
00:02:56,000 --> 00:03:05,000
down to about here because I think that's where our job styling begins. 

44
00:03:05,000 --> 00:03:08,000
So we'll go ahead and just call this JOBS 

45
00:03:08,000 --> 00:03:17,000
and then maybe a little bit more detail with INDEX/SHOW VIEWS. 

46
00:03:17,000 --> 00:03:21,000
And with that comment flag still on our clipboard, 

47
00:03:21,000 --> 00:03:24,000
let's go ahead and scroll down here. 

48
00:03:24,000 --> 00:03:27,000
So it looks like we do have job_show view here, 

49
00:03:27,000 --> 00:03:31,000
so we can actually split those out.

50
00:03:31,000 --> 00:03:37,000
So here, we'll say this is the JOB SHOW VIEW

51
00:03:37,000 --> 00:03:40,000
and then if we go back up to that first comment flag, 

52
00:03:40,000 --> 00:03:49,000
we'll say that it's the JOB INDEX VIEW.

53
00:03:49,000 --> 00:03:51,000
There we go. 

54
00:03:51,000 --> 00:03:56,000
And I'm just going to create a little bit of space between each one of these comment flags

55
00:03:56,000 --> 00:03:59,000
just to denote a new section

56
00:03:59,000 --> 00:04:04,000
and let's keep scrolling down here to see if we have anything else. 

57
00:04:04,000 --> 00:04:08,000
It looks like we have an h2, a field, and then a label here

58
00:04:08,000 --> 00:04:13,000
and I'm guessing that's probably for our forms,

59
00:04:13,000 --> 00:04:23,000
so let's go ahead and just create a section there called FORMS.

60
00:04:23,000 --> 00:04:26,000
So now, we've added some commentary and we'll probably add 

61
00:04:26,000 --> 00:04:29,000
a little bit more commentary as we go along,

62
00:04:29,000 --> 00:04:36,000
but now it's a lot easier to understand where our CSS is actually going here. 

63
00:04:36,000 --> 00:04:44,000
So next, let's start styling some of the other pages beyond the show view. 

64
00:04:44,000 --> 00:04:49,000
So we'll go ahead and switch over to the browser and take a look at what we have here. 

65
00:04:49,000 --> 00:04:54,000
Here we have our show view and that looks to be in pretty good state of completion,

66
00:04:54,000 --> 00:05:00,000
so we'll go ahead and run with this and use it to style our other pages.

67
00:05:00,000 --> 00:05:02,000
We click the Back button here, 

68
00:05:02,000 --> 00:05:07,000
we can see that our index view probably could use some work to pretty it up 

69
00:05:07,000 --> 00:05:11,000
and make it look just as good as our show view. 

70
00:05:11,000 --> 00:05:17,000
and then we have our New Job view, which actually I need to be logged in to view,

71
00:05:17,000 --> 00:05:21,000
so let's look at some of our other forms pages. 

72
00:05:21,000 --> 00:05:25,000
If I go to Register here, it looks like something's messed up there, 

73
00:05:25,000 --> 00:05:28,000
so we'll go ahead and fix that. 

74
00:05:28,000 --> 00:05:33,000
And I've already created an account, so I'll go ahead and sign in

75
00:05:33,000 --> 00:05:41,000
using my email address and very insecure password.

76
00:05:41,000 --> 00:05:43,000
Now, if I hit Log In, 

77
00:05:43,000 --> 00:05:46,000
you'll see that I should now be able to create New Jobs.

78
00:05:46,000 --> 00:05:51,000
Down here at the bottom of the New Jobs view, 

79
00:05:51,000 --> 00:05:53,000
it looks like a few things are broken there, 

80
00:05:53,000 --> 00:05:57,000
so in general, it seems as though we have a little bit of work to do

81
00:05:57,000 --> 00:06:02,000
on the forms view and we also probably need to style that Flash message

82
00:06:02,000 --> 00:06:07,000
that appears at the top that said I needed to be logged in. 

83
00:06:07,000 --> 00:06:10,000
So there's a few other views to style here.

84
00:06:10,000 --> 00:06:12,000
Why don't we start off with the index view?

85
00:06:12,000 --> 00:06:15,000
So now that I'm logged in and looking at the index view, 

86
00:06:15,000 --> 00:06:19,000
I think I want to add some row striping here, 

87
00:06:19,000 --> 00:06:24,000
and I think I might want to turn the New Jobs into more of a button 

88
00:06:24,000 --> 00:06:27,000
that makes it look like more of a call to action. 

89
00:06:27,000 --> 00:06:32,000
The typography on these new jobs also isn't that great, 

90
00:06:32,000 --> 00:06:34,000
so maybe we'll play with that a little bit 

91
00:06:34,000 --> 00:06:38,000
and I think all the jobs could use some spacing here

92
00:06:38,000 --> 00:06:41,000
because originally, when we were logged out, 

93
00:06:41,000 --> 00:06:46,000
a few of the other links were actually the only thing giving these any kind of separation.

94
00:06:46,000 --> 00:06:52,000
And hopefully, in this Sprint, Jim will either show or hide some of those links.

95
00:06:52,000 --> 00:06:57,000
So before we get ahead of ourselves, let's go ahead and switch back to our TextEditor

96
00:06:57,000 --> 00:07:06,000
and we're going to go into apps, views, and then we want to open up a jobs folder here

97
00:07:06,000 --> 00:07:10,000
and we're going to open our index view. 

98
00:07:10,000 --> 00:07:13,000
Now, it looks like this is an unordered list. 

99
00:07:13,000 --> 00:07:18,000
So we have a %ul tag and then we have a few list items 

100
00:07:18,000 --> 00:07:21,000
and we have all of our jobs underneath that. 

101
00:07:21,000 --> 00:07:25,000
There may be other unordered lists on the site in the future, 

102
00:07:25,000 --> 00:07:30,000
so let's go ahead and make this a little bit more specific by adding an id. 

103
00:07:30,000 --> 00:07:37,000
And to this unordered list, I'm going to add the id of jobs

104
00:07:37,000 --> 00:07:43,000
and then I'll go ahead and switch back to our application.sass file

105
00:07:43,000 --> 00:07:48,000
and let's scroll up to where it says JOB INDEX VIEW.

106
00:07:48,000 --> 00:07:58,000
And so next, I'll go ahead and select our unordered list with the id #jobs.

107
00:07:58,000 --> 00:08:02,000
I'll select each one of our list items.

108
00:08:02,000 --> 00:08:06,000
I will use the :nth-child pseudo selector

109
00:08:06,000 --> 00:08:12,000
and give it a value of odd so only the odd rows are selected.

110
00:08:12,000 --> 00:08:19,000
And then, our background color is on the job_link here, 

111
00:08:19,000 --> 00:08:23,000
so let's go ahead and delete that 

112
00:08:23,000 --> 00:08:31,000
and we'll apply a background color to each one of our job_links

113
00:08:31,000 --> 00:08:33,000
and let's just see if this works. 

114
00:08:33,000 --> 00:08:35,000
So we'll say background: 

115
00:08:35,000 --> 00:08:40,000
and we'll just give it a value of something really obnoxious, like green

116
00:08:40,000 --> 00:08:45,000
and we'll switch back to the browser and refresh 

117
00:08:45,000 --> 00:08:48,000
and it looks like that applied correctly.

118
00:08:48,000 --> 00:08:52,000
So now, we need to go ahead and pick out a background color. 

119
00:08:52,000 --> 00:08:57,000
So we'll go ahead and switch back to our text editor,

120
00:08:57,000 --> 00:09:01,000
so let's make this a light blue color, 

121
00:09:01,000 --> 00:09:09,000
and to do that, we'll go ahead and drop the values of red, green,

122
00:09:09,000 --> 00:09:12,000
and then put on full blue.

123
00:09:12,000 --> 00:09:18,000
We'll save that, switch back, and it looks like we now have this nice blue color.

124
00:09:18,000 --> 00:09:25,000
It looks a little bit purpley to me, so I'm going to go ahead and drop the reds a bit more.

125
00:09:25,000 --> 00:09:28,000
So maybe we'll drop that down to B

126
00:09:28,000 --> 00:09:34,000
and if we refresh, that still looks a little bit too saturated

127
00:09:34,000 --> 00:09:42,000
so maybe we'll bump this up to C and E. 

128
00:09:42,000 --> 00:09:51,000
And that's getting a bit closer; maybe we can make that just a little bit more subtle.

129
00:09:51,000 --> 00:09:58,000
We'll do something like this #00F5FF

130
00:09:58,000 --> 00:10:03,000
and I think that looks pretty good for our row striping.

131
00:10:03,000 --> 00:10:06,000
Now let's go ahead and do the same thing

132
00:10:06,000 --> 00:10:15,000
on the even rows

133
00:10:15,000 --> 00:10:20,000
and for the even rows, we'll make them even lighter #EEFFFF

134
00:10:20,000 --> 00:10:26,000
so it will be just a very slight color on them 

135
00:10:26,000 --> 00:10:29,000
and I think that looks pretty good.

136
00:10:29,000 --> 00:10:32,000
That gets them some nice separation. 

137
00:10:32,000 --> 00:10:37,000
And so now, we need to add in some padding,

138
00:10:37,000 --> 00:10:41,000
so let's go ahead and try that on our job_link.

139
00:10:41,000 --> 00:10:44,000
So we'll add some padding to the top and bottom 

140
00:10:44,000 --> 00:10:46,000
and let's just see what that does.

141
00:10:46,000 --> 00:10:48,000
That looks pretty good. 

142
00:10:48,000 --> 00:10:52,000
That adds some nice separation to each one of these jobs.

143
00:10:52,000 --> 00:10:56,000
I'm still noticing that the text is running right up against the edge

144
00:10:56,000 --> 00:10:58,000
and that doesn't look very good, so let's go ahead

145
00:10:58,000 --> 00:11:02,000
and add some padding on the left and right.

146
00:11:02,000 --> 00:11:07,000
Just do something like 10px, and if we refresh, 

147
00:11:07,000 --> 00:11:11,000
I think this is starting to look pretty good. 

148
00:11:11,000 --> 00:11:14,000
Now, I'm not totally thrilled with the typography here, 

149
00:11:14,000 --> 00:11:18,000
so maybe we can try to improve the look of this a little bit

150
00:11:18,000 --> 00:11:22,000
and make these jobs a lot easier to scan.

151
00:11:22,000 --> 00:11:24,000
Remember, these entire rows are links, 

152
00:11:24,000 --> 00:11:27,000
so maybe we can even add a hover state there as well 

153
00:11:27,000 --> 00:11:30,000
just so that when you scroll over all of these jobs, 

154
00:11:30,000 --> 00:11:33,000
they sort of light up and you know which one you're selecting, 

155
00:11:34,000 --> 00:11:36,000
so let's go ahead and do that. 

156
00:11:36,000 --> 00:11:40,000
We'll switch back to our text editor, and on the job_link, 

157
00:11:40,000 --> 00:11:45,000
go ahead and add a hover state, 

158
00:11:45,000 --> 00:11:52,000
and we actually don't need those curly braces there because we're using SASS.

159
00:11:52,000 --> 00:11:55,000
And let's apply a background color, and again, 

160
00:11:55,000 --> 00:12:01,000
we'll just do green to make sure that we're selecting this properly.

161
00:12:01,000 --> 00:12:05,000
And it looks like we're actually not, so let's see what we can do to fix that. 

162
00:12:05,000 --> 00:12:11,000
We need to actually add an ampersand there to get the pseudo-class

163
00:12:11,000 --> 00:12:15,000
to run right up against the job_link there with no space,

164
00:12:15,000 --> 00:12:17,000
so we'll save that, 

165
00:12:17,000 --> 00:12:20,000
switch back to the browser and refresh.

166
00:12:20,000 --> 00:12:22,000
And it still looks like we're having an issue here,

167
00:12:22,000 --> 00:12:25,000
so let's go ahead and switch back 

168
00:12:25,000 --> 00:12:29,000
and let's try something a bit more simple

169
00:12:29,000 --> 00:12:33,000
by just saying job_link:hover

170
00:12:33,000 --> 00:12:36,000
and let's see if that works. 

171
00:12:36,000 --> 00:12:42,000
So I think the problem that we're now encountering is selector specificity, 

172
00:12:42,000 --> 00:12:46,000
so let's go ahead and switch back to our text editor 

173
00:12:46,000 --> 00:12:51,000
and the problem is coming in with this pseudo-selector here, 

174
00:12:51,000 --> 00:12:55,000
so what we need to do is just create hover states for each one of these.

175
00:12:55,000 --> 00:12:59,000
So we'll go ahead and delete that here

176
00:12:59,000 --> 00:13:05,000
and I'll go ahead and add a &:hover state

177
00:13:05,000 --> 00:13:10,000
and here we'll say background: green 

178
00:13:10,000 --> 00:13:16,000
and we'll do this a little bit messily by repeating ourselves, but that's okay.

179
00:13:16,000 --> 00:13:20,000
We'll save that out, switch back, refresh,

180
00:13:20,000 --> 00:13:23,000
and now it looks like we have a really nice hover state. 

181
00:13:23,000 --> 00:13:27,000
So now, we just need to pick a color 

182
00:13:27,000 --> 00:13:31,000
and I think for this color, we'll actually go back to that yellow highlight. 

183
00:13:31,000 --> 00:13:35,000
So we'll say background: #FFFFCC

184
00:13:35,000 --> 00:13:38,000
and let's just see how that looks on these ones here. 

185
00:13:38,000 --> 00:13:46,000
That looks pretty good, so I'll go ahead and add that color in to there

186
00:13:46,000 --> 00:13:49,000
and refresh the page.

187
00:13:49,000 --> 00:13:51,000
Now we have this nice hover state going,

188
00:13:51,000 --> 00:13:53,000
so I think that looks pretty good. 

189
00:13:53,000 --> 00:13:55,000
Now let's address this text. 

190
00:13:55,000 --> 00:13:57,000
So we'll switch back 

191
00:13:57,000 --> 00:14:01,000
and on the job_title, 

192
00:14:01,000 --> 00:14:06,000
let's go ahead and make this a little bit bigger. 

193
00:14:06,000 --> 00:14:08,000
We'll do something that I think is probably going to be too big,

194
00:14:08,000 --> 00:14:12,000
like 2ems.

195
00:14:12,000 --> 00:14:15,000
And yep, that is a little bit too large.

196
00:14:15,000 --> 00:14:18,000
We can probably increase the number of columns here. 

197
00:14:18,000 --> 00:14:20,000
There we go. 

198
00:14:20,000 --> 00:14:23,000
But I think that's pretty close to the size we want.

199
00:14:23,000 --> 00:14:27,000
The only problem is that it's almost as large as the New Job link,

200
00:14:27,000 --> 00:14:33,000
so let's go ahead and just decrease the size a tiny bit down to 1.8em. 

201
00:14:33,000 --> 00:14:35,000
I think that's pretty good. 

202
00:14:35,000 --> 00:14:40,000
And in addition, I wanted to actually style the color of these links,

203
00:14:40,000 --> 00:14:43,000
so on the job link,

204
00:14:43,000 --> 00:14:50,000
we'll say text-decoration: none so that there's no underline on the links.

205
00:14:50,000 --> 00:14:57,000
And then let's go ahead and just say color: black

206
00:14:57,000 --> 00:15:00,000
to color big links black there. 

207
00:15:00,000 --> 00:15:04,000
That looks pretty good to me. 

208
00:15:04,000 --> 00:15:08,000
The titles are nice and dark so they contrast with the background really nicely

209
00:15:08,000 --> 00:15:11,000
and make them very easy to read. 

210
00:15:11,000 --> 00:15:14,000
Let's go ahead and make the descriptions a little bit lighter

211
00:15:14,000 --> 00:15:21,000
so that they're less emphasized and allow the titles to be more scanable. 

212
00:15:21,000 --> 00:15:25,000
So on the description,

213
00:15:25,000 --> 00:15:28,000
we'll go ahead and change the color 

214
00:15:28,000 --> 00:15:33,000
and we'll make it a dark gray color;

215
00:15:33,000 --> 00:15:38,000
maybe something like #555 in hexadecimal. 

216
00:15:38,000 --> 00:15:39,000
And I think that's perfect. 

217
00:15:39,000 --> 00:15:41,000
I think we nailed that on the first try,

218
00:15:41,000 --> 00:15:45,000
so that looks pretty good. 

219
00:15:45,000 --> 00:15:49,000
I think next we need to get this text running all the way across the page

220
00:15:49,000 --> 00:15:55,000
if at all possible, so let's go ahead and see if we can't do that. 

221
00:15:55,000 --> 00:15:59,000
It looks like we're having this take up a fixed width 

222
00:15:59,000 --> 00:16:02,000
with a column, so let's go ahead and just see if we can cut that out

223
00:16:02,000 --> 00:16:05,000
and see what happens. 

224
00:16:05,000 --> 00:16:08,000
Okay, well it looks like we actually did need that fixed width,

225
00:16:08,000 --> 00:16:15,000
so let's go ahead and add that back in.

226
00:16:15,000 --> 00:16:20,000
So next, let's go ahead and try to apply a width to the unordered list element. 

227
00:16:20,000 --> 00:16:23,000
So we'll come up here

228
00:16:23,000 --> 00:16:30,000
and we'll say ul and we'll go ahead and apply the id #jobs

229
00:16:30,000 --> 00:16:34,000
and let's just say width: 100%.

230
00:16:34,000 --> 00:16:40,000
And then, let's go ahead and remove those columns again.

231
00:16:40,000 --> 00:16:42,000
Let's see if we can get away with this. 

232
00:16:42,000 --> 00:16:45,000
No, it looks like we do need some sort of container here

233
00:16:45,000 --> 00:16:51,000
to go ahead and stop these columns from running all the way across. 

234
00:16:51,000 --> 00:16:56,000
Actually, before we try that, let's go ahead and switch back to our text editor

235
00:16:56,000 --> 00:17:01,000
and let's try putting a width on the job_link here. 

236
00:17:01,000 --> 00:17:06,000
So we'll say width: 100% and save that, 

237
00:17:06,000 --> 00:17:10,000
and then let's switch back over and refresh the page

238
00:17:10,000 --> 00:17:14,000
and that actually looks like it did it. 

239
00:17:14,000 --> 00:17:17,000
We don't need a container after all, so that's good--less markup.

240
00:17:17,000 --> 00:17:22,000
However, it does look like we have a slight issue on the left and right side.

241
00:17:22,000 --> 00:17:29,000
So you can see the space over on the left is much greater than the space over on the right

242
00:17:29,000 --> 00:17:34,000
and I'm pretty sure that's because of this elipses here, these ...

243
00:17:34,000 --> 00:17:38,000
It looks like they're not actually precalculated with this text, 

244
00:17:38,000 --> 00:17:42,000
so we need to go ahead and account for that in our width.

245
00:17:42,000 --> 00:17:47,000
We could probably do this another way by maybe adding some negative margin,

246
00:17:47,000 --> 00:17:51,000
but we can go ahead and just fudge that a little bit by reducing the width,

247
00:17:51,000 --> 00:17:59,000
so let's go ahead and switch back and we'll put this at something like 98% and save that.

248
00:17:59,000 --> 00:18:02,000
And when we switch back and refresh, 

249
00:18:02,000 --> 00:18:07,000
it looks like that's just about the same amount of space on the left and right sides,

250
00:18:07,000 --> 00:18:10,000
so it looks good.