How to Style the Index View with CSS18:53 with Nick Pettit
In this video, we'll begin some basic styling for the index view of our job board. This styling will focus on critical functionality and page layout, with finer details coming in future iterations.
[?music?] 0:00 [Master Class: Designer and Developer Workflow] 0:02 [Styling the Index View] 0:04 [Nick Pettit] To get started, let's go ahead and start our Rails server 0:07 and we'll refresh our page, 0:13 and here, we have our current Easy Jobs layout for our index view. 0:15 We'll go ahead switch back, and we can go ahead and stop our server 0:21 and open this up in TextMate. 0:28 First, let's go ahead and open up our application layout 0:31 and let's just change this title so it looks a little bit more friendly. 0:37 %title Easy Jobs! There we go. 0:43 And now, let's go ahead and open up our index view for our jobs. 0:47 So here we have our index view and it says Listing Jobs 0:54 and we don't really need that, so we'll go ahead and delete it. 0:58 And you'll also notice that all of our jobs are in a table right now. 1:02 We don't want that, either, so let's get rid of all of that. 1:07 We'll get rid of the table row and just so we keep careful track of this, 1:11 we'll remove the indentation by one. 1:18 And then we'll go ahead and delete all of these table cells because we don't need them. 1:22 We'll get rid of the Destroy link for now. 1:29 We don't need this break, 1:34 and we'll go ahead and keep this link to the new_job_path down at the bottom of this view. 1:37 We're going to eventually move this link, but we'll keep it there for now 1:43 just to remind ourselves that we do indeed need to include it somewhere in our layout. 1:47 So we'll go ahead remove some indentation here that we don't quite need, 1:53 and remember, this is our index view, so there's a few additional details here 1:58 that we don't need, like the details link and the company name. 2:03 All we want is the title, description, and the link to the Show view, 2:08 and eventually, we'll put in the Edit view someplace, but for now, 2:13 we won't really pay too much attention to that. 2:17 So we'll go ahead and save that out. 2:20 We'll save out our application layout, 2:22 and if we switch back to the browser and refresh the page, 2:24 you can see that now we have what looks like just a giant blob of text. 2:29 Now, we need to organize this a little bit more, so let's go ahead and do that 2:35 with some markup. 2:39 We'll switch back and go into our index view here, 2:41 and let's go ahead and add an unordered list. 2:45 We'll indent our job loop by one, 2:51 and then inside of the job loop, we want to go ahead and add a list item 2:53 and then we'll put all of our details inside of that. 3:01 So we'll save that out, switch back to the browser, and watch carefully. 3:04 When we refresh, you can see that the text changed just slightly 3:09 and that's because we now have just a little bit more separation 3:14 between each one of our job postings, but not much, 3:17 and that's where the styling will come in. 3:21 So let's go ahead and switch back to our markup and we'll go ahead and apply 3:24 a little bit of markup just so we can split out some of the details here 3:28 a bit more easily in our styling. 3:32 First, for our job title, we'll go ahead and apply a strong tag 3:35 and we'll give it the class job title, and then for our description, 3:40 we'll go ahead and apply a span tag and give it the class description 3:46 and we'll put our title and our job description indented by one 3:53 and we'll save that out. 4:00 In addition, we want each one of these 4:03 to link to the Show page for the job, so we need to move our Show link 4:06 up to the top, and then we need to actually change the way this is structured. 4:11 So inside of the link_to, we'll pass (job) as our URL 4:19 and then we'll indent everything underneath it just so that when we click on it, 4:27 it actually links to it. 4:33 So if we switch back to the browser and refresh the page, 4:35 it looks like we have a syntax error and that's because we got an unexpected end there 4:38 and it looks like we just messed up the link_to a little bit. 4:45 So let's go ahead and switch back and see if we can't fix this up. 4:48 The problem came in because we didn't actually pass a block to the link_to 4:52 so we just need to say do there, and when we refresh the page, 4:57 we should now have some nice links to each one of our job postings. 5:02 So when we click on these, it will go through to the Show view for our job posting. 5:07 Pretty nifty. 5:12 Now, this page is pretty ugly, so let's go ahead and get into our style sheet. 5:14 So we'll jump into the public folder, go into style sheets, 5:19 sass, and we'll open up application.sass 5:25 Now, just as a little bit of housecleaning, we need to go ahead and remove scaffold.css, 5:33 so we'll move that to the trash. 5:40 So in application.sass here, we have some styling applied to the body, 5:43 but we don't really need any of that. 5:47 We'll just go ahead and delete it 5:49 because most of what we need is already in the reset code for Blueprint. 5:51 So we'll go ahead and save our empty application.sass, 5:55 switch back to the browser and refresh, 5:59 and all that really visibly did is gave us the default white background 6:01 which, in this case, is what we want. 6:07 For now, we're just working on the layout of the site 6:10 and we'll worry about more detailed styling in a later iteration. 6:13 So let's go ahead and switch back, 6:18 and first, we're going to go ahead and select our list items 6:20 and let's just go ahead and put some padding on the top and bottom of them 6:25 just to give them some cleaner separation. 6:30 So that's a little bit easier to look at. 6:33 We may adjust that styling later on, but for now, it looks fine. 6:36 Now, these descriptions look pretty lengthy 6:40 and we actually want to tighten those up. 6:43 Now, you'll notice that the text is just spreading all the way from the left side of the page 6:46 to the right side of the page, and that's because we don't have any kind of wrapper div 6:52 or even any kind of grid applied to this page. 6:57 Now, of course, we did include Blueprint, so adding in Blueprint 7:01 would be a really easy way to do that. 7:05 So let's go ahead and switch back to our style sheet 7:08 and up at the top, we're just going to say @import blueprint 7:13 and for $blueprint_grid_column which should be a $ there because it's a variable. 7:19 We're going to say 24. 7:27 And then for $blueprint_grid_width, 7:30 we're going to say 30px. 7:36 And then, finally, for blueprint_grid_margin, we're going to say 10px. 7:38 And actually, these underscores need to be dashes, 7:41 so let's just go ahead and change that right now 7:49 and we'll line up all of these colons just so our CSS is a little bit more readable 7:53 and we'll save that out. 7:58 Now, right now, that's not going to do anything 8:01 because first we need to switch back to our application layout 8:03 and we're going to go ahead and add in a wrapper div, 8:07 so let's just add that in right now and we'll indent our yield 8:10 so that it will go inside of our wrapper. 8:14 And then, also inside of our wrapper, before we yield all of the content, 8:17 we want to include some kind of header and then we're going to include a logo. 8:21 Now, actually, I want this logo to be an h1, but we'll still apply the logo as an ID. 8:27 And inside of this logo, we're just going to put the text "Easy Jobs!" 8:35 And before we get ahead of ourselves, 8:42 let's just go ahead and switch back to the browser and refresh the page. 8:44 And indeed, it looks like we have some sort of syntax error. 8:49 It looks like we just didn't include a % sign in front of our h1, 8:54 so let's go ahead and fix that and see if it fixes the page. 8:59 And there we go. 9:03 Now, we have our h1 up at the top here, which of course is unstyled 9:04 and reset from the browser defaults, but we'll change that later, 9:10 and it looks like we're doing pretty good. 9:14 So let's go ahead and apply Blueprint to that wrapper. 9:16 So we'll switch back to our application.sass and we'll select our wrapper div 9:20 and we just want to include the mixin container 9:28 and this is gonig to turn our wrapper into a Blueprint container. 9:33 Now, if you haven't watched our SASS or Compass videos, 9:38 the advantage of doing things this way is that you get all of the benefits of Blueprint 9:42 like the reset code and the grid framework without all the presentational class names 9:47 in the markup. 9:53 Rather, all of that styling gets applied to the actual element, as it should be. 9:55 So we'll go ahead and save that, and when we switch back to the browser and refresh, 10:01 you can see that our wrapper is now being applied appropriately. 10:06 Now, let's go ahead and first work on this h1, so we'll go ahead 10:11 and just switch back to our style sheet 10:15 and we'll go ahead and select the h1 10:18 and all we're going to do is apply a large font-size of about 3em 10:22 and we'll go ahead and say font-weight: bold. 10:28 So we'll save that out, switch back and refresh, 10:31 and now, we have a nice, large logo. 10:34 Now, of course, we'll style this a little bit more, maybe apply a font 10:38 or maybe even turn it into an image and create an actual logo. 10:42 However, for now, when we're just working on the page layout, this looks fine. 10:46 So we'll go ahead and switch back, 10:51 and now, let's go ahead and work on those links a little bit. 10:55 Now, if you remember, we actually applied class names to those links, 10:59 so let's go ahead and use those. 11:04 Switch over to our index, and it looks like for the job title, 11:06 we have a class name job title, and for the description, 11:10 we have the class name description. 11:14 So let's go ahead and use these. 11:16 They're nested inside of our li, so for job title, 11:18 you want to just go ahead and make the font a little bit larger 11:25 and we want to put some margin on the right side, 11:29 so we'll put about 10px, we'll save that out and refresh this page. 11:32 And now, these job titles are nice and bold, so it's a lot easier 11:37 to just scan the page and actually see these job titles. 11:43 I think I will make them a little bit larger, but the spacing between the description 11:46 does look pretty good, so we'll go ahead and switch back 11:51 and maybe change this to 1.4, save that out and refresh, 11:54 and I think that looks pretty good. 11:58 Now, let's go ahead and tackle these descriptions. 12:01 You'll notice that these descriptions just run on and on 12:04 and they wrap down by several lines, especially this one down here, 12:07 and that just doesn't look good at all. 12:11 We actually want each one of these just to take up one line. 12:14 Now, in order to do that, we're going to just go ahead and wrap the text 12:17 and add an ellipsis, so let's go ahead and do that. 12:21 So we'll go ahead and switch back to TextMate 12:24 and before we apply the styling, let's just go ahead and take a look at our markup. 12:27 I think the smartest place to apply this would be actually to our link. 12:33 However, we don't want to apply this to all the <a> tags inside of our li 12:38 because of course, we have this 'Edit' link right here. 12:42 So let's go ahead and apply a class name to this link. 12:46 So we'll just pass in some parameters here, and we'll say class 12:50 and we'll just call this something simple like job_link. 12:55 So we'll go ahead and switch back to the browser and refresh the page 13:01 and let's just go ahead and look at the source to make sure that that class name 13:05 is indeed appearing on our links, and it looks like it is. 13:10 There it says class= "job_link" so that's good. 13:14 So now let's go ahead and switch back to our style sheet 13:19 and go ahead and use that. 13:22 So inside of our li, we'll say job_link and let's just skip down 13:25 and make some room to work here. 13:30 There we go. 13:33 And for our job link, we're going to say white-space: nowrap; 13:35 overflow: hidden; 13:42 and text-overflow: ellipsis. 13:46 And of course, we don't need semicolons because we're using SASS. 13:51 So I'll go ahead and save that out, switch back to the browser, 13:55 and refresh, and as you can see, 13:58 it looks like our text is actually getting cut off, 14:01 so let's see if we can figure out whats going on here. 14:05 I think our description actually needs to be a block-level element 14:09 in order for this to work, so let's go ahead and try that out. 14:13 So we'll go ahead and set this job description to display: block 14:19 and we'll just put a width: 100% on it for now. 14:27 And actually, we need to go ahead and move all of the styling 14:32 down to the description if this is going to work. 14:36 So let's just go ahead and save this and see where it gets us in the browser. 14:40 And it looks like everything still looks the same, so let's switch back to our CSS 14:44 and try to figure out what's going on. 14:49 I think our class name is incorrect. 14:53 We have job_description here whereas we actually just want description. 14:55 So we'll go ahead and change that to say description, 15:00 save that, and now if we refresh, 15:05 it looks like we have a nice ellipsis over on the right. 15:08 Now, this isn't quite what we want, though. 15:11 We want these descriptions to actually appear next to the job titles, 15:15 so let's go ahead and try to figure that out. 15:19 We'll switch back, and I think the strategy I'm going to take 15:23 is just to float these to the left, so we'll float the job description to the left, 15:26 and of course, that means we need to float a few other things, including the job title 15:32 and the job link, so we'll go ahead and save those out. 15:37 So if we switch back to the browser and refresh, 15:43 we can see that that didn't quite work. 15:46 So maybe a better way to do this would be to actually use Blueprint columns, 15:50 so let's go ahead and try that out. 15:55 First, we'll get rid of this margin because Blueprint will apply its own margin. 15:57 We'll get rid of these floats because each column will be floated on its own, 16:02 and let's go ahead and add in the mixin. 16:07 So we'll say this is a column and we'll say that this is 6 columns wide 16:11 and we'll add in the mixin here 16:17 and make up for the remaining 18. 16:20 We'll go ahead and remove this width: 100% 16:24 because we're setting the width with the column, 16:27 and this is going to be the last column in our layout, 16:29 so we need to let the column mixin know that 16:32 by passing true as the second argument. 16:35 So we'll go ahead and save that out, switch back and refresh, 16:38 and it looks like we now have a nice 2-column layout 16:42 where we have the job titles on the left and the job descriptions over on the right. 16:45 Now, as one final touch, I'd like to go ahead and move this new job link 16:50 over to the upper right. 16:56 But other than that, I think the layout for our index view is really coming together. 16:58 Remember, we'll be adding additional details in upcoming iterations. 17:03 So let's go ahead and switch back, 17:08 and we'll switch over to our index view, 17:11 and let's just move this new_job_path up to the top of the page. 17:15 So we'll go ahead and save that out, 17:21 and let's see what that looks like in the browser. 17:24 So now, our New Job link is right there, and we can just go ahead and float that to the right 17:26 or actually just change the text alignment. 17:35 But in order to do that, we need to actually add a class name, so let's go ahead and add that. 17:38 We'll say class ==> "new_job_link" 17:45 and then let's go ahead and include that in our style sheet. 17:52 So we'll say new_job_link and we'll float: right and let's just see what that does. 17:57 So it goes ahead and puts the new job link over here, 18:04 and let's just go ahead and set the font-weight: bold 18:08 and we'll go ahead and change the font-size to something fairly large 2em 18:14 just so we can make sure that we actually see that. 18:20 Now, in doing that, it looks like we forgot one final detail. 18:23 You'll notice that we still have bullet points on our list items, 18:28 so let's just go ahead and remove those. 18:31 We'll go up to the li and we'll say list-style: none, 18:34 save that out, refresh the page, 18:38 and now we've gotten rid of those bullet points. 18:40 Now, this layout might look pretty unrefined, but it's enough to get us started 18:44 and it's enough so that we can start adding detail later on. 18:48
You need to sign up for Treehouse in order to download course files.Sign up