Refining an Index View with Design Details

[?music?] 0:00 [Master Class: Designer and Developer Workflow: Styling the Index View] 0:02 [Nick Pettit] We're now in Sprint number four 0:05 and there's a few things that we need to do here, but in general, 0:07 we're probably going to try and wrap things up. 0:12 Our major goals for this Sprint are going to be 0:14 to finish up any fluid grid calculations that we need to do, 0:18 clean up our CSS by adding some comments. 0:22 We need to move our styling from the job show view to all the other pages on the site. 0:26 We may need to add some media queries in order to make the site more responsive, 0:32 and there are probably a few other things we need to tie up, 0:37 so let's just go ahead and dive in. 0:41 First, I'm going to go ahead and do a $git pull 0:44 to make sure that I'm completely up to date with any changes Jim may have made, 0:47 and then I'm going to go ahead and branch into a branch called style. 0:53 So if I type $git branch now, I should see that I have a branch called style, 0:59 so let's go ahead and do a $git checkout style 1:06 and switch over. 1:12 And that should keep any of our changes isolated from any changes 1:14 that Jim might be making in parallel with us. 1:18 So now, let's go ahead and start up our Rails server 1:21 so I'll type $rails s 1:24 and I'll let that get fired up. 1:28 And then, if I switch over to the browser and refresh on localhost: 3000 1:30 I should see our Easy Jobs! website here. 1:39 Now, most of our work has been done on the show view for jobs 1:43 and if we go ahead and resize the browser here, 1:47 you can see that we have a little bit of a fluid grid going. 1:51 There's a few problems when we get down to smaller sizes, 1:55 but that's nothing that can't be solved with a few media queries. 1:57 And so I think we're looking pretty good with the fluid grid so far, 2:02 so we'll go ahead and roll with that for now. 2:07 Now, the next thing that we need to do 2:09 is start cleaning up our CSS, 2:12 so let's go ahead and switch over to our text editor. 2:14 I'm going to go into the public folder here, style sheets, SASS, 2:17 and then I'm going to jump into application.sass 2:23 and let's just go ahead and add a few comments. 2:28 So I'll type // to start my comments there. 2:33 I'll go ahead and put in a few stars to create a comment flag 2:38 and let's go ahead and call this first section BASIC STYLES. 2:43 And let's go ahead and copy our comment flag 2:51 down to about here because I think that's where our job styling begins. 2:56 So we'll go ahead and just call this JOBS 3:05 and then maybe a little bit more detail with INDEX/SHOW VIEWS. 3:08 And with that comment flag still on our clipboard, 3:17 let's go ahead and scroll down here. 3:21 So it looks like we do have job_show view here, 3:24 so we can actually split those out. 3:27 So here, we'll say this is the JOB SHOW VIEW 3:31 and then if we go back up to that first comment flag, 3:37 we'll say that it's the JOB INDEX VIEW. 3:40 There we go. 3:49 And I'm just going to create a little bit of space between each one of these comment flags 3:51 just to denote a new section 3:56 and let's keep scrolling down here to see if we have anything else. 3:59 It looks like we have an h2, a field, and then a label here 4:04 and I'm guessing that's probably for our forms, 4:08 so let's go ahead and just create a section there called FORMS. 4:13 So now, we've added some commentary and we'll probably add 4:23 a little bit more commentary as we go along, 4:26 but now it's a lot easier to understand where our CSS is actually going here. 4:29 So next, let's start styling some of the other pages beyond the show view. 4:36 So we'll go ahead and switch over to the browser and take a look at what we have here. 4:44 Here we have our show view and that looks to be in pretty good state of completion, 4:49 so we'll go ahead and run with this and use it to style our other pages. 4:54 We click the Back button here, 5:00 we can see that our index view probably could use some work to pretty it up 5:02 and make it look just as good as our show view. 5:07 and then we have our New Job view, which actually I need to be logged in to view, 5:11 so let's look at some of our other forms pages. 5:17 If I go to Register here, it looks like something's messed up there, 5:21 so we'll go ahead and fix that. 5:25 And I've already created an account, so I'll go ahead and sign in 5:28 using my email address and very insecure password. 5:33 Now, if I hit Log In, 5:41 you'll see that I should now be able to create New Jobs. 5:43 Down here at the bottom of the New Jobs view, 5:46 it looks like a few things are broken there, 5:51 so in general, it seems as though we have a little bit of work to do 5:53 on the forms view and we also probably need to style that Flash message 5:57 that appears at the top that said I needed to be logged in. 6:02 So there's a few other views to style here. 6:07 Why don't we start off with the index view? 6:10 So now that I'm logged in and looking at the index view, 6:12 I think I want to add some row striping here, 6:15 and I think I might want to turn the New Jobs into more of a button 6:19 that makes it look like more of a call to action. 6:24 The typography on these new jobs also isn't that great, 6:27 so maybe we'll play with that a little bit 6:32 and I think all the jobs could use some spacing here 6:34 because originally, when we were logged out, 6:38 a few of the other links were actually the only thing giving these any kind of separation. 6:41 And hopefully, in this Sprint, Jim will either show or hide some of those links. 6:46 So before we get ahead of ourselves, let's go ahead and switch back to our TextEditor 6:52 and we're going to go into apps, views, and then we want to open up a jobs folder here 6:57 and we're going to open our index view. 7:06 Now, it looks like this is an unordered list. 7:10 So we have a %ul tag and then we have a few list items 7:13 and we have all of our jobs underneath that. 7:18 There may be other unordered lists on the site in the future, 7:21 so let's go ahead and make this a little bit more specific by adding an id. 7:25 And to this unordered list, I'm going to add the id of jobs 7:30 and then I'll go ahead and switch back to our application.sass file 7:37 and let's scroll up to where it says JOB INDEX VIEW. 7:43 And so next, I'll go ahead and select our unordered list with the id #jobs. 7:48 I'll select each one of our list items. 7:58 I will use the :nth-child pseudo selector 8:02 and give it a value of odd so only the odd rows are selected. 8:06 And then, our background color is on the job_link here, 8:12 so let's go ahead and delete that 8:19 and we'll apply a background color to each one of our job_links 8:23 and let's just see if this works. 8:31 So we'll say background: 8:33 and we'll just give it a value of something really obnoxious, like green 8:35 and we'll switch back to the browser and refresh 8:40 and it looks like that applied correctly. 8:45 So now, we need to go ahead and pick out a background color. 8:48 So we'll go ahead and switch back to our text editor, 8:52 so let's make this a light blue color, 8:57 and to do that, we'll go ahead and drop the values of red, green, 9:01 and then put on full blue. 9:09 We'll save that, switch back, and it looks like we now have this nice blue color. 9:12 It looks a little bit purpley to me, so I'm going to go ahead and drop the reds a bit more. 9:18 So maybe we'll drop that down to B 9:25 and if we refresh, that still looks a little bit too saturated 9:28 so maybe we'll bump this up to C and E. 9:34 And that's getting a bit closer; maybe we can make that just a little bit more subtle. 9:42 We'll do something like this #00F5FF 9:51 and I think that looks pretty good for our row striping. 9:58 Now let's go ahead and do the same thing 10:03 on the even rows 10:06 and for the even rows, we'll make them even lighter #EEFFFF 10:15 so it will be just a very slight color on them 10:20 and I think that looks pretty good. 10:26 That gets them some nice separation. 10:29 And so now, we need to add in some padding, 10:32 so let's go ahead and try that on our job_link. 10:37 So we'll add some padding to the top and bottom 10:41 and let's just see what that does. 10:44 That looks pretty good. 10:46 That adds some nice separation to each one of these jobs. 10:48 I'm still noticing that the text is running right up against the edge 10:52 and that doesn't look very good, so let's go ahead 10:56 and add some padding on the left and right. 10:58 Just do something like 10px, and if we refresh, 11:02 I think this is starting to look pretty good. 11:07 Now, I'm not totally thrilled with the typography here, 11:11 so maybe we can try to improve the look of this a little bit 11:14 and make these jobs a lot easier to scan. 11:18 Remember, these entire rows are links, 11:22 so maybe we can even add a hover state there as well 11:24 just so that when you scroll over all of these jobs, 11:27 they sort of light up and you know which one you're selecting, 11:30 so let's go ahead and do that. 11:34 We'll switch back to our text editor, and on the job_link, 11:36 go ahead and add a hover state, 11:40 and we actually don't need those curly braces there because we're using SASS. 11:45 And let's apply a background color, and again, 11:52 we'll just do green to make sure that we're selecting this properly. 11:55 And it looks like we're actually not, so let's see what we can do to fix that. 12:01 We need to actually add an ampersand there to get the pseudo-class 12:05 to run right up against the job_link there with no space, 12:11 so we'll save that, 12:15 switch back to the browser and refresh. 12:17 And it still looks like we're having an issue here, 12:20 so let's go ahead and switch back 12:22 and let's try something a bit more simple 12:25 by just saying job_link:hover 12:29 and let's see if that works. 12:33 So I think the problem that we're now encountering is selector specificity, 12:36 so let's go ahead and switch back to our text editor 12:42 and the problem is coming in with this pseudo-selector here, 12:46 so what we need to do is just create hover states for each one of these. 12:51 So we'll go ahead and delete that here 12:55 and I'll go ahead and add a &:hover state 12:59 and here we'll say background: green 13:05 and we'll do this a little bit messily by repeating ourselves, but that's okay. 13:10 We'll save that out, switch back, refresh, 13:16 and now it looks like we have a really nice hover state. 13:20 So now, we just need to pick a color 13:23 and I think for this color, we'll actually go back to that yellow highlight. 13:27 So we'll say background: #FFFFCC 13:31 and let's just see how that looks on these ones here. 13:35 That looks pretty good, so I'll go ahead and add that color in to there 13:38 and refresh the page. 13:46 Now we have this nice hover state going, 13:49 so I think that looks pretty good. 13:51 Now let's address this text. 13:53 So we'll switch back 13:55 and on the job_title, 13:57 let's go ahead and make this a little bit bigger. 14:01 We'll do something that I think is probably going to be too big, 14:06 like 2ems. 14:08 And yep, that is a little bit too large. 14:12 We can probably increase the number of columns here. 14:15 There we go. 14:18 But I think that's pretty close to the size we want. 14:20 The only problem is that it's almost as large as the New Job link, 14:23 so let's go ahead and just decrease the size a tiny bit down to 1.8em. 14:27 I think that's pretty good. 14:33 And in addition, I wanted to actually style the color of these links, 14:35 so on the job link, 14:40 we'll say text-decoration: none so that there's no underline on the links. 14:43 And then let's go ahead and just say color: black 14:50 to color big links black there. 14:57 That looks pretty good to me. 15:00 The titles are nice and dark so they contrast with the background really nicely 15:04 and make them very easy to read. 15:08 Let's go ahead and make the descriptions a little bit lighter 15:11 so that they're less emphasized and allow the titles to be more scanable. 15:14 So on the description, 15:21 we'll go ahead and change the color 15:25 and we'll make it a dark gray color; 15:28 maybe something like #555 in hexadecimal. 15:33 And I think that's perfect. 15:38 I think we nailed that on the first try, 15:39 so that looks pretty good. 15:41 I think next we need to get this text running all the way across the page 15:45 if at all possible, so let's go ahead and see if we can't do that. 15:49 It looks like we're having this take up a fixed width 15:55 with a column, so let's go ahead and just see if we can cut that out 15:59 and see what happens. 16:02 Okay, well it looks like we actually did need that fixed width, 16:05 so let's go ahead and add that back in. 16:08 So next, let's go ahead and try to apply a width to the unordered list element. 16:15 So we'll come up here 16:20 and we'll say ul and we'll go ahead and apply the id #jobs 16:23 and let's just say width: 100%. 16:30 And then, let's go ahead and remove those columns again. 16:34 Let's see if we can get away with this. 16:40 No, it looks like we do need some sort of container here 16:42 to go ahead and stop these columns from running all the way across. 16:45 Actually, before we try that, let's go ahead and switch back to our text editor 16:51 and let's try putting a width on the job_link here. 16:56 So we'll say width: 100% and save that, 17:01 and then let's switch back over and refresh the page 17:06 and that actually looks like it did it. 17:10 We don't need a container after all, so that's good--less markup. 17:14 However, it does look like we have a slight issue on the left and right side. 17:17 So you can see the space over on the left is much greater than the space over on the right 17:22 and I'm pretty sure that's because of this elipses here, these ... 17:29 It looks like they're not actually precalculated with this text, 17:34 so we need to go ahead and account for that in our width. 17:38 We could probably do this another way by maybe adding some negative margin, 17:42 but we can go ahead and just fudge that a little bit by reducing the width, 17:47 so let's go ahead and switch back and we'll put this at something like 98% and save that. 17:51 And when we switch back and refresh, 17:59 it looks like that's just about the same amount of space on the left and right sides, 18:02 so it looks good. 18:07