Creating a Fluid Grid for Responsive Design

[? 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 set up Workspace

Sign up