Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Adding Basic Site Styling13:03 with Nick Pettit
[?music?] 0:00 [Master Class: Designer and Developer Workflow: Third Sprint: Basic Site Styling] 0:02 [Nick Pettit] Now that we have all of our images, 0:07 we're ready to go ahead and dive into the CSS and include all of them. 0:10 First, let's just go ahead and assess our CSS a little bit 0:14 and see what we need to remove or change 0:18 before we go ahead and add in our fluid grid layout. 0:22 First, we're going to get rid of all of these Blueprint variables 0:27 because they're all pixel widths and we can't use that 0:31 if we're trying to create a fluid grid. 0:35 This doesn't make Blueprint useless entirely. 0:38 In fact, there's lots of things in Blueprint that are still bootstrapping the page, 0:41 such as the reset code, but we don't really need it. 0:45 On our wrapper, we're going to get rid of the container 0:50 and we're going to set the width to 100% for now 0:56 and let's just jump back to the browser to see what kind of effect this had. 1:02 So when we refresh the page, 1:09 that's exactly what we expected to happen. 1:12 The text is all the way up against the sides 1:16 because there's no wrapper keeping this in. 1:19 So let's just change that to about 90% for now. 1:22 So we'll bump this back down to 90% and refresh the page 1:29 and now we have a little bit of space and we just need to center this on the page 1:33 and we can do that pretty easily using margin: 0 auto. 1:39 And now, it's centered on the page, so as we resize the browser, 1:47 these margins will stay there. 1:51 Now let's switch back to TextMate 1:55 and take a look at the rest of the code. 1:57 This h1 is okay; we're going to end up changing that 2:00 when we change it to our actual logo. 2:04 I don't want to change any of these list items except for the columns 2:07 we'll probably need to get rid of pretty soon. 2:11 And everything else looks okay for now, but we'll change things as we go along. 2:16 So let's scroll back up to the top here and let's look in the browser really quick. 2:23 What's going to end up happening is this Easy Jobs! is going to become our logo 2:27 so this h1 will actually end up being an image here and will hide the text, 2:34 but we'll keep it in the markup for accessibility reasons. 2:39 The list in the center of the page here will end up being inside of that piece of paper 2:43 and the authentication links will end up in the upper right. 2:49 I'm not really sure where the New Job link is going to go 2:53 because we didn't really design that view. 2:55 We only designed the show view here, 2:59 so on that note, why don't we go ahead and focus on the show view 3:04 when we're creating our design and we'll go ahead and come back to the index view 3:08 and some of the other views later on. 3:12 If we can get this one view done in this Sprint, we should be in a pretty good position 3:15 to get the rest of them done in maybe the next Sprint. 3:20 So let's start with a few simple things like the logo and then the background 3:24 and try to make them look like our Photoshop mockup. 3:29 So if we review in Photoshop here, 3:34 we have our logo, which we sliced up already, 3:37 and that's actually going to be a pixel width 3:41 because when we create our fluid grid layout, we don't want this image 3:44 to be resized at all because if this image were to resize, 3:49 the border would become smaller and it wouldn't line up very well 3:54 with our background image. 3:57 So even though most everything else will have a fluid or percentage width on it, 4:02 our logo does need to have a pixel width, and that's fine. 4:08 So with that in mind, let's go ahead and switch back to TextMate 4:13 and let's go ahead and apply this background image to our h1. 4:17 Now, the font-size and font-weight really don't matter here. 4:23 We just need to set an explicit width and the width of our image is 390px. 4:28 The height is 79px and we're just going to set a really obvious background 4:36 like a background color of red just to see what's going on in our markup. 4:43 So let's go ahead and switch back to the browser 4:49 and we'll refresh the page and that's the size of our logo. 4:52 Now let's go ahead and include the image. 4:57 So we'll switch back again and the background is going to be a URL 5:00 and to get to the image, we need to jump out of the style sheets directory, 5:08 jump into the images directory, and remember, inside of the images directory 5:17 we created another folder called Layout to hold all of our images related to our layout, 5:21 and we called our logo easy_jobs.png. 5:28 We want this to be top center for the position, 5:36 although that doesn't really matter a whole lot, 5:40 and we want to set this to no repeat. 5:43 So let's go ahead and save that out, we'll switch back and refresh the page, 5:47 and now we have our logo somewhat in place. 5:52 Now, you'll notice that we still have this text here, 5:56 and we need to get rid of that. 5:59 To do that, we're going to set a text-indent: -20000px. 6:01 Now, what this will do is actually push the text to the left by 20000 pixels, 6:10 and unless you're using a monitor from the future, you probably aren't going to see it 6:16 because it's just going to be so far off screen. 6:21 So we'll switch back and refresh the page, 6:25 and now that Easy Jobs! text is gone, but it's still in the markup 6:28 for accessibility reasons. 6:33 Now you'll notice that the background color that we're using here 6:35 is just slightly off-white, so we need to make sure that we change that 6:39 when we apply the background image to the whole page, 6:46 so let's go ahead and switch over and we're going to apply our background image 6:50 to the body of the page. 6:58 We'll use the background property, of course, and same URL. 7:02 We need to jump out of the style sheets directory into the images directory 7:08 layout, and if you'll recall, we named the image bg.png. 7:13 We'll set this to the top center and we want to repeat along the x axis. 7:21 And then, finally, we need to grab the color that we're going to use from Photoshop, 7:30 but first, let's just go ahead and set it to red 7:36 and we'll switch back and refresh the browser 7:42 and you'll see that our logo isn't quite lining up with the manila folder just yet, 7:46 but that's okay. 7:52 And we can see that we have this nice paper texture going, 7:54 and just looking at it from here, it doesn't look like it's really repeating at all 7:58 even though, of course, it is, so it looks like we have the effect 8:03 that we wanted to accomplish. 8:07 Now, we need to do a couple of things here. 8:10 Our page isn't scrolling yet, but if it were to scroll 8:12 beyond the height of this background image, 8:16 we would get some sort of strange color down there, 8:19 so we need to go ahead and add in that extra noise image that we created originally, 8:22 and actually, because we're using an image all the way to the top, 8:28 it looks like we don't need to grab that off-white background color after all. 8:32 But let's go ahead and put in that noise image down below this repeating image. 8:38 So we have a comma there; we're going to skip down to the next line 8:45 and we're going to jump out of the style sheets directory into images, 8:52 into layout, and we called this image folder_noise.png. 8:57 Again, we'll say top center. 9:07 It doesn't really matter. 9:10 And we don't need to say repeat because it will repeat by default. 9:12 So we'll save that and when we switch back and refresh, 9:17 it looks like we have a SASS error, 9:22 so let's see what's going on here. 9:24 Now, it looks like SASS didn't like the fact that this line was indented so far 9:27 because using this SASS syntax, indentation is actually very important, 9:34 so we'll just skip the niceties and we won't put it on the next line 9:39 and we'll just have one somewhat long line of backgrounds here. 9:45 We'll save that out, switch back and refresh, and although nothing really looks different 9:50 than what we had before, rest assured, our noise image is somewhere down below. 9:56 Now, let's try to fix our logo so it's lined up with our background image. 10:03 What we need to do is put some margin on the top 10:09 so that we can move this logo down 10:12 and we need to get these registration links out of the way 10:15 because those are probably block-level elements. 10:20 So let's first switch back to Photoshop 10:24 and we'll grab our marquee tool 10:27 and we can probably figure out how much margin we need just by measuring 10:31 from the top here going to the info tab, 10:36 and it's saying a height of 18 pixels, so let's go ahead and try that out first. 10:40 So we'll switch over to TextMate 10:45 and on our h1, we'll just say margin-top: 18px and save that out, 10:48 and if we switch back to Google Chrome, that looks like it's just about perfect. 10:59 I think it's 1 pixel off, so we'll change that to 17 pixels, 11:03 and that looks like it's perfect. 11:10 And it turns out we didn't really need to move those authentication links after all, 11:13 although we do still need to move them to the upper right 11:18 because that's where we want to put them in our layout. 11:21 So we'll switch back to TextMate and let's go in our views directory here 11:24 and we'll open up our application layout. 11:34 You can see that we have an ID called user_bar 11:37 and that contains all of our authentication links. 11:42 So we can go ahead and use that ID in our CSS 11:47 to move it over to the right, so let's just try something really simple 11:51 like floating it. 11:56 So we'll select our user_bar and we'll just float it to the right 12:00 and see what happens. 12:05 So we'll switch back to the browser and refresh, 12:07 and that's almost what we want. 12:11 We actually just need to float the Easy Jobs! logo over to the left 12:13 and then we should be good, because remember, 12:17 this is an h1, which is a block-level element, 12:20 and it's actually extending all the way over to the right, 12:23 or blocking the content all the way over on the right, at the very least. 12:28 So we'll switch back 12:32 and we'll float our h1 to the left, 12:34 switch back and refresh, 12:39 and now we're getting into some issues where we need to actually clear the content, 12:42 but that's okay. 12:46 The general idea is there, where we have our registration links over on the right side 12:48 and our Easy Jobs! logo over on the left. 12:51 So I'd say so far this is looking pretty good, and I think now 12:56 we're ready to get into the content. 12:59
You need to sign up for Treehouse in order to download course files.Sign up