Start a free Courses trial
to watch this video
In this video, we'll finish things up by styling some of the finer details on the page. Additionally, we'll get started on some fluid grid measurements.
Download: Project File and Source Code
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[? Music ?] [Master Class] [Designer and Developer Workflow] 0:00 [Third Sprint] [Details and Fluid Grid] 0:03 [Nick Pettit] Now, the next thing I'm noticing 0:07 are these links for authentication up here. 0:10 It looks like these are actually using the same font, 0:13 so maybe we should make that font a little bit more global, 0:16 and then we can go ahead and style our links throughout the site. 0:19 So, right now our links are in the upper right, 0:22 so they're almost in the correct position, 0:27 but we also need to position them a little bit better. 0:29 Let's switch back to TextMate, and let's move this font 0:32 up to a higher level. 0:36 We'll jump up to the top of the document, 0:38 and let's just put it on the body, so we'll switch back and refresh, 0:41 and now those links have that really nice font. 0:45 And let's go ahead and try to position those. 0:49 Now, if you'll remember, we had the ID user bar on those, 0:52 so we just need to add some margins, so we'll say 0:57 "margin-top," and we'll start out at about 30 pixels, 0:59 and let's just see if we're anywhere close. 1:04 Yep, that looks pretty good. 1:07 We don't need an exact measurement on this, 1:09 just whatever looks good in the browser. 1:12 I'd push that down a little bit more, about 50 pixels. 1:15 There we go. I think that looks pretty good. 1:20 And now we just need to make sure everything looks okay 1:24 and then start putting in our fluid grid measurements. 1:28 We also do need to get that date in place, 1:33 so why don't we work on that first. 1:35 We'll switch back to TextMate, 1:37 and this isn't going to be in the application layout. 1:40 This is actually going to be in the jobs layout, 1:43 and this is going to be in the show view. 1:47 So, we'll open up the show view, 1:51 and we need to add in the date created. 1:53 The date created needs to be over to the right, 1:57 and the job title and company name need to be over to the left. 2:00 Let's go ahead and contain those in their own separate div. 2:04 So, we'll just call this "job_header" 2:07 and indent those, and then right after job header 2:15 we'll have "job_date." 2:21 We just need to grab the created at date 2:24 from the jobs model. 2:29 We'll switch back and refresh, 2:32 and now we have this date here. 2:35 Now, we need to say "posted on," and then we also need to 2:37 format and style this date. 2:40 We're not going to format it right now. 2:42 We can go ahead and do that in a later sprint, 2:44 but let's just get some of the text in there first. 2:46 So, we'll include a string 2:50 that says "Posted on." 2:55 And I'm pretty sure that's what it says in our layout. 2:57 It says "POSTED ON" in all caps, so we'll make this all caps, 3:01 "POSTED ON," and we'll save that out, switch over to Google Chrome 3:05 and refresh, and it now says "POSTED ON," and now we just need 3:11 a quick line break there, so we'll just throw in a br tag. 3:16 There we go. 3:21 And now we're ready to go ahead and style the job date. 3:23 So, we'll switch back to application.sas, 3:27 and we're starting to get to the point where 3:31 we need some comments, although we do have 3:34 a job show view, so that's probably good enough for now. 3:37 We need the job date, 3:42 and we're just going to set the color to red, 3:45 the font size to 1.2 ems. 3:49 The font weight is going to be bold, 3:53 and text alignment is going to be center, 3:56 and let's just see where that gets us. 4:01 That's looking okay so far. 4:04 I think the font size can be a little bit larger. 4:06 That looks good, and now we need to go ahead 4:11 and float that to the right. 4:14 And then the job header, 4:18 which is the new div that we created, 4:20 is going to be floated to the left. 4:25 So, when we refresh, we now have our job title and company name 4:30 over on the left, our date over on the right, 4:34 and now we need to just fix a couple things here in the content area. 4:38 So, the job description will be floated to the left, 4:46 and the details link will also be floated to the left, 4:55 and that should be everything on the page. 5:00 It looks like we still have a few edit and back links here 5:03 that we need to fix. 5:06 If we look at our show view again, 5:08 it looks like those aren't really wrapped in any kind of div, 5:11 so we'll just say "navigation_links," 5:16 or maybe we can be a little bit more specific 5:22 and say "job_links." 5:26 And we'll float our job_links to the left. 5:31 It looks like those aren't being floated properly, 5:41 so let's just go ahead and set a background color on them 5:43 to make sure that they're even being selected properly. 5:47 So, if we refresh, it looks like, indeed, they are not being selected, 5:52 so let's see what's going on here. 5:56 We styled them as "job_links," and it looks like the problem 6:00 is that they're just not indented, 6:03 so let's see if that fixes it. 6:06 If we refresh and--yep, it looks like that was it. 6:09 So, let's just go ahead and take that background color off. 6:13 And we'll also say "clear both," 6:19 just to make sure that they're down at the bottom. 6:22 And so now we just need to rotate this date, 6:25 so let's go ahead and switch back to Photoshop and 6:28 see where that date is. 6:31 It looks like it's a little bit too far over to the right in our real layout, 6:33 but that's nothing we can't fix. 6:38 It also looks like it's just rotated by just a few degrees, 6:41 so let's see if we can try and recreate that. 6:44 So, in our style sheet, find our job date, 6:48 and first we'll add in the rotation, so we'll say 6:54 "webkit-transform: rotate( -3deg)." 6:58 And that rotated it just a little bit. 7:11 I think I'd like to rotate it a bit more, 7:13 so we'll say -5 degrees, 7:15 and now it's rotated a bit more. 7:18 Now that I'm looking at it, it looks like that red color 7:21 is a little bit harsh, so let's switch back to Photoshop 7:24 and get that actual color on the font. 7:27 I'll just copy that hexadecimal value, 7:33 switch back to TextMate, and we'll change this color red 7:36 to the real hexadecimal value that looks 7:42 a lot less intense. 7:46 And then finally, we'll just stick some margin right on it 7:48 so it's pushed over just like it is in Photoshop here. 7:52 We'll say "margin-right," and we'll give this an explicit value as well 7:58 of about 50 pixels. 8:02 And that looks a little bit better. 8:06 This layout is looking pretty good, and we're almost done here. 8:08 The problem right now, though, is that when we resize the browser, 8:12 you'll notice that our layout isn't exactly proportionally resizing. 8:18 In fact, it isn't at all. 8:24 Although this layout is very close to being fluid, 8:26 we just need to make some slight adjustments 8:29 so that we don't mess ourselves up later. 8:33 So, we don't need our web fonts anymore, 8:36 so I'll close that tab. 8:38 And let's switch over to Photoshop 8:40 so we can start doing our fluid grid calculations. 8:43 Before we start doing these calculations, we need to figure out 8:46 our context, so let's switch over to the info tab, 8:50 and we'll select the entire page. 8:54 And it looks like we're dealing with a width of 950 pixels across, 8:56 which is what we should expect because we went with the 9:01 Blueprint PSD. 9:05 With 950 pixels across, 9:07 we just need to measure a few things on the page, 9:10 mainly in this content area. 9:13 First, we need to figure out the entire width of 9:15 this actual content area, so let's go ahead and select that. 9:20 And it looks like that's a width of 790 pixels, 9:26 so if we switch over to our calculator, 9:31 we can go ahead and do a fluid grid calculation. 9:34 The target is 790 pixels, 9:37 and we'll divide that by the context of 950 pixels, 9:43 and that gives us a really ugly number, 9:48 but that's exactly what we want. 9:52 We don't want to round this off. 9:54 We want all of the accuracy that we can get. 9:56 And switching over to TextMate, 10:00 we'll go ahead and adjust this content width. 10:03 We'll say "width." 10:09 We'll paste in our percentage value here, 10:11 and if we were to multiply that by 100, 10:13 we'd actually get a percentage, just like that. 10:17 And just in the margins here, 10:20 I'm going to add a comment so that we know 10:23 what calculation we actually made. 10:27 We divided 790 into 950, 10:29 so we'll save that, switch back to the browser and refresh. 10:33 And as you can see, we have a slightly more narrow content area. 10:39 We need to center that on the page, though, 10:43 so let's go ahead and adjust our margins here. 10:45 We have a margin of top and bottom at 65 pixels, 10:49 and we just need to adjust the left and right to be auto. 10:53 And if we refresh the page, we can see that's now taking up just 10:59 a percentage of the width. 11:02 However, our content area is not actually centered on the page, 11:04 and in order to do that, we need to set a percentage margin, 11:09 so let's go ahead and switch back to Photoshop. 11:14 And I'm going to turn on our guides here. 11:19 And let's just see what the width is here. 11:23 It's 80 pixels, and that's going into 950, 11:26 so before we forget that, let's go ahead and add that 11:31 as a comment. 11:35 80 pixels going into 950, 11:38 and let's do our fluid grid calculation. 11:41 80 divided by 950, and we'll copy that number 11:45 and paste it in. 11:53 And then we'll turn it into a percentage. 11:59 Now, if we save that out, switch back to the browser 12:04 and refresh the page, you can see that we have 12:09 a fluid margin on the left and right sides. 12:12 So, if we go ahead and resize it, 12:15 everything will resize proportionally, which is pretty neat. 12:19 There's still more to do to complete our fluid grid, 12:24 but I think this is a pretty good start. 12:27 There's also other small styling details, 12:29 but again, this is just a sprint, and we can continue to iterate 12:32 on this view and apply our work here 12:36 to all of our other views. 12:39 So, with that, I think we're ready to go ahead and commit, 12:41 so I'll switch over to the terminal, 12:45 stop the server, and we'll clear out what we have. 12:50 And I'll say "git add ." and "git commit." 12:55 And our commit message will be "Added several images 13:02 and fluid grid measurements to the job show view." 13:09 And then finally, we'll go ahead and say "git push." 13:23 And that's going to go ahead and push our work up to the master branch, 13:28 and now I think we're ready to go ahead and meet with Jim. 13:32
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up