Getting Started with Fluid Grids20:36 with Nick Pettit
In this video, we'll set up some basic CSS and get started on the first column in our layout. We'll also start our fluid grid calculations.
[?music?] 0:00 [Master Class: Fluid Grids: CSS: Part 1] 0:02 [Nick Pettit] We're now at a point where we're ready to get started on our CSS. 0:05 However, before we start coding, there are a few things that we need to go over. 0:10 First, I'd like to point out that the work that we'll be doing in this Master Class 0:15 is dependent on the wireframes, Photoshop documents and images that we created 0:19 in the previous Master Class about designing for responsive layouts. 0:24 If you haven't already downloaded those files, you may want to do so now. 0:28 For your convenience, they're included with the code for this Master Class. 0:32 Now, even though we discussed fluid grids in the previous Master Class, 0:36 we should take a moment to review because we're about to perform 0:41 numerous fluid grid calculations. 0:45 Before Ethan Marcotte wrote his now famous article for A List Apart 0:48 about responsive web design, 0:51 He wrote an article called "Fluid Grids." 0:53 The basic idea is to create a layout where all of the elements 0:56 are based on carefully calculated percentage widths. 1:00 In the web design community, fluid layouts have not enjoyed the same popularity 1:03 as fixed width layouts. 1:09 In a fixed width layout, the entire page is a set width, 1:11 like 950 pixels, for example, 1:15 and then that layout is centered using margin-auto on the left and right sides. 1:17 In a fluid layout, most elements are based on the percentages 1:22 or relative values, rather than fixed pixel values. 1:26 Now, the actual calculations for fluid grids tend to create unusual-looking numbers, 1:31 but they're actually pretty simple to understand. 1:37 You take the pixel value of the element that you want to be fluid 1:40 and then divide it by its parent element. 1:43 Or in other words, you take the target element divided by the context. 1:46 Then you apply the resulting percentage value 1:51 to your target element. 1:54 When you do this for every width and margin on the page, 1:56 the entire layout will dynamically resize with the browser window. 1:59 This only works to a certain point, of course, 2:03 and that's where media queries come into the picture, 2:06 but for now, we'll just focus on fluid grids. 2:09 To generate these exact pixel values for the calculations, 2:12 it's best to use a high fidelity mockup so that you can measure everything 2:15 in a program like Photoshop. 2:20 We're just about ready to dive into CSS, but there's one more thing I should mention. 2:22 While we are going to use relative units for our fonts, 2:27 we're not actually going to make any fluid grid calculations for them. 2:30 This does go against the grain a bit because font sizes are typically a part 2:35 of a fluid grid layout and a part of responsive web design. 2:40 With responsive typefaces, you can get into some unusual situations 2:44 where fonts become bit too large or too small for a particular screen resolution. 2:48 However, by manually setting our fonts in the fluid grid and later on using media queries, 2:54 we gain tighter control over readability. 3:00 This is my own personal decision, so you should feel free to either go along with it 3:03 or to disagree and set your type with responsiveness in mind. 3:09 Now, let's finally dive into the CSS. 3:12 We're now at a point in our project where we're ready to start adding our CSS. 3:17 But just to review first, here's what our site looks like without any styling 3:22 and just HTML, so we can kind of scroll through here 3:28 and we have some very large images for our features 3:32 and for our actual HTML5 video 3:36 and for our site logo, and those will all be resized when we start adding in our CSS 3:40 and our fluid grid calculations. 3:45 So let's go ahead and first switch over to TextMate 3:48 and we're going to go ahead and create a folder 3:53 for our CSS, and of course, we will call this folder CSS. 3:57 And inside of that folder, we're going to create a file 4:01 called application.css, and the reason that we're calling this application.css 4:05 is because it will contain all of our CSS that is specific to the application. 4:12 So we'll go ahead and create that, and the first thing that we want to do inside of here 4:20 is go ahead and create a comment flag, so we'll go ahead and type out some stars **** 4:24 and then we'll close that out. 4:31 The first thing that we're going to put in our document here is some reset code. 4:34 I have some reset code that I like to use, 4:40 but you can use pretty much any reset code that you want. 4:43 The reset code that I'm using is from Eric Meyer 4:47 and it is specific to HTML5, so you'll see lots of HTML5 tags in here 4:52 that are being reset. 4:58 So let's go ahead and copy and paste this flag. 5:00 We'll create some room to work here, 5:06 and the next section I'm just going to call BASE 5:08 because these are going to be our base styles that apply to pretty much the entire site. 5:13 So we'll go ahead and scroll down here and the first thing that we'll style 5:19 is our HTML element. 5:23 And for that, we'll say height: 100%; 5:25 and that's just going to help out with any sort of scrollbar issues 5:32 where scrollbars might be appearing or disappearing. 5:35 And next, we'll go ahead and select the body element, 5:39 and here, we're actually going to apply a few CSS3 gradients, 5:43 so we'll use our background: property, and first we'll do a Mozilla linear gradient 5:49 so we'll use the -moz- vendor prefix linear-gradient();. 5:56 And inside of here, we'll start at the top with a white color #FFFFF at 0% 6:03 and then we'll go to a middle gray color #C5C5C5 at 30%. 6:15 We'll close out that gradient and we'll say no-repeat; 6:23 and then we want to do a very similar background, only this time for -webkit. 6:29 So we'll go ahead and say -webkit-gradient(linear; 6:34 we'll start at the left top, and work our way down to the left bottom. 6:41 We'll go ahead and type out our first color-stop here, 6:45 so we'll say color-stop(0% 6:50 and of course, that will be white, just like our previous gradient. 6:56 And then, we'll type out our next color-stop and that will be at 30%, 7:00 just like our previous gradient. 7:07 We'll use the same middle gray color, and then, of course, we want this no-repeat. 7:09 Next, just like on the HTML element, we'll set the height to 100%. 7:19 Again, this will just help out with any sort of scrollbar issues. 7:24 We'll set the background-color to that same middle gray color 7:28 and this is just for browsers that may not support CSS3 gradients. 7:35 We'll set the text color for the entire site to just above black at #222; 7:42 and we'll set the font-family to Helvetica, arial, serif, 7:50 and we will be bringing in other fonts later on, 8:01 but Helvetica will be our default font. 8:04 Next is the image element, and this is very important for fluid grids. 8:09 We want to set all of the images on our page to have a max-width of 100%, 8:14 and basically, this will just make it so that images will fill their parent container 8:21 so we don't have to worry about all of our images stretching out to fill our containers. 8:28 Next, we'll go ahead and select all of our paragraphs 8:34 and set them to a line-height of 1.2em;. 8:38 We will select our wrapper div 8:43 and we just want to center this like a normal fixed width layout, 8:48 so we'll go ahead and say margin: 0 8:52 and then auto on the sides. 8:54 And then, we want to set our wrapper to have a width of 70%. 8:58 Now, we're not doing any fluid grid calculations here yet. 9:05 The 70% is just sort of arbitrary. 9:09 Because all of the widths on our layout are going to be fluid, 9:13 we can actually set this width to be whatever we want. 9:16 If we set it to a larger number, say 90 or 95%, 9:20 we'll have less room on the left and right sides 9:25 and this will be good for smaller mobile layouts 9:28 where we actually don't want to give up so much space to the left and right. 9:32 We actually need space for just the content. 9:36 So next, we're going to go ahead and style our first and last columns. 9:39 And of course, we called those #header and #misc, 9:46 so that's the column that's on the left 9:50 and the column that's on the right. 9:53 Now, we can style these together because they're actually going to be the same width; 9:55 however, this is the point where we need to start doing our fluid grid calculations. 10:00 So we'll go ahead and say width 10:04 and then we're going to go ahead and actually switch over to Photoshop 10:08 because we need to measure out a few things here. 10:13 So using our marquee tool and using the Info panel here, 10:17 we'll go ahead and measure out the pixel widths 10:22 and then get percentage values from those. 10:25 Now remember, to calculate a fluid width, they need to take the target divided by the context. 10:28 So first, we'll just go ahead and get the context 10:35 by selecting everything on the page because the page is the context in this case, 10:39 so the width of the page is 950 pixels. 10:45 And then, we want to go ahead and measure one of these columns, 10:49 so using our marquee tool, we'll go ahead and measure across 10:54 and the width there is 230 pixels, so we can go ahead and do this calculation now. 10:58 We'll switch over to TextMate and as a CSS comment, 11:05 we'll go ahead and say 230 / 950 just so that we can remember 11:12 how we actually got these numbers. 11:19 Next, we're going to switch over to our calculator and we're going to calculate this out. 11:22 So 230 divided by 950 gives us a really huge number. 11:28 Now, you might be thinking that you can just go ahead and round this off to say 24%, 11:35 but that's actually not good enough. 11:40 We need this many significant figures so that when we increase our layout 11:43 to a much larger size or much smaller size, 11:48 it will maintain the look of pixel accuracy. 11:51 So we're going to go ahead and copy this number and switch over to TextMate 11:54 and just paste it in right here. 12:00 Remember, this has to be a percentage, so we need to move the decimal point over by two 12:03 and we'll remove the extra here, and then we'll go ahead and add in a percentage there. 12:08 The next part is pretty easy. 12:16 Because this is a column, we want to float it to the left 12:18 and then, we have the margin-left, which once again we need to do a fluid grid calculation. 12:22 Now, we already know the context in this case, 12:29 but the target is what's a mystery. 12:33 So of course the context is 950 pixels across, 12:38 but to get the target, we need to switch over to Photoshop, 12:43 use our marquee tool, and just do this measurement. 12:46 So we want to get the margin-left of one of these columns 12:51 and it looks like that's about 40 pixels. 12:55 We'll go ahead and switch over to TextMate and put in 40 here. 13:00 And then, we'll go ahead and switch over to our calculator 13:07 and we'll say 40 divided by 950 and copy that number, 13:10 go ahead and switch over to TextMate and paste in this number right here, 13:16 move the decimal point by two. 13:21 We'll go ahead and delete the extra here and add a percentage and save it out. 13:25 So let's go ahead and switch over to our HTML and add in our CSS document. 13:34 We want to, of course, do that in the head of our document 13:39 and we'll do that right after our title tag. 13:42 So we'll type <link href= 13:45 and we'll do a relative link to the CSS directory 13:49 and of course, we called our style sheet application.css. 13:52 We'll set the media type to "screen" 14:00 relations="stylesheet" 14:03 and of course, type="text/css". 14:07 We'll go ahead and save that out, switch over to the browser and refresh, 14:13 and as you can see, we now have our gradient, 14:17 we have some styling on our text with our Helvetica font, 14:20 and there's a few other light stylings going on, 14:25 but really not a whole lot yet. 14:30 We'll start to see more things when we actually do more of our fluid grid calculations. 14:32 But so far, so good. 14:37 We'll go ahead and switch back to TextMate and switch over to our application.css file. 14:40 Next, we're going to go ahead and style our main content div, 14:48 so let's go ahead and select that. 14:52 We'll float this to the left 14:57 because it's going to be containing lots of floated elements. 15:00 We'll set the width to 100% because we actually want this to expand 15:05 to whatever the wrapper is set to. 15:11 We'll just set a margin-bottom of about 5% and we are using a percentage here, 15:14 but that actually has nothing to do with the fluid grid. 15:21 We just want about 5% of margin on the bottom. 15:24 So let's go ahead and scroll down here, and next we want to create a new section 15:28 for our header, so let's actually go ahead and copy one of our comment flags 15:34 and paste that in, and we'll call it HEADER. 15:41 First, we want to go ahead and style our logo in this section, 15:48 so we'll set a top margin of 100%, a right margin of 0, a bottom margin of 30px, 15:54 and a left margin of 0. 16:06 Then, on the first level headline that's inside of our logo, 16:10 we're going to set a text-indent of -20000px;. 16:15 Now, this is a neat little trick--let's actually go ahead and switch over to our HTML 16:23 so that we can see what's going on here. 16:27 Here, we have our logo and inside of that, we have our first level headline, 16:30 and right after that, we have an image. 16:35 Now, this image is the actual logo that is going to be rendered on the page, 16:39 so if we switch over to the browser, we can see that right here. 16:44 Now, just before that, we have that first level headline, 16:47 which is visible in plain text right now. 16:51 If we go ahead and switch back to TextMate, we can see 16:54 we have that first level headline followed by the image. 16:58 Now, by setting a text indent of -20000 to our first level headline, 17:01 it will actually hide that text, but the image will still be visible. 17:08 The reason why we want to include that text in addition to the image 17:13 is because we want the text to be there for accessibility reasons 17:18 and for search engine indexing. 17:22 We'll go ahead and switch back to our CSS 17:24 and we've set a negative text indent, so that would actually push that first level headline 17:29 to the left and we've set it to -20000 pixels, so that will push it to the left by 20000 pixels. 17:35 So it's actually still there; it's just so far over that it's unlikely 17:44 anyone will ever see it on a huge monitor. 17:50 So we'll go ahead and continue here, and we'll style our second level headline, 17:54 and this is sort of the tagline that comes right after the logo. 17:59 We'll set the text-align: right; because we want our tagline to be over to the right. 18:03 We'll set a margin-top of -5% 18:10 and that -5% margin will actually push that tagline up against the logo, 18:16 so it's kind of just like adjusting line height. 18:22 We'll set a font-size of 1.2em, 18:25 and then we're going to put a text-shadow on this. 18:29 Now, we'll go ahead and set the x offset to 0px, the y offset to 1px, 18:33 the blur radius to 1, and then we'll use the rgba function 18:39 and set this text shadow to white. 18:45 And then, we'll dial down the opacity to 90%. 18:50 This text-shadow actually won't look like a shadow at all; 18:54 rather, it will look like a highlight on the lip of the text 18:58 so that the text will look like it's actually pressed into the page, 19:02 as if it were letter-pressed. 19:06 So next, we'll go ahead and style the paragraphs inside of our header, 19:09 and if we just switch over to Photoshop so we can see what's going on here, 19:15 these paragraphs are actually right here, 19:20 and they just sort of give a brief blurb describing the application. 19:23 We'll go ahead and switch back to TextMate and on those, 19:28 we'll set a font-size of about 1.2em; 19:31 a margin-bottom of 24px; 19:35 and we'll set it to a middle gray color: #555;. 19:39 So let's go ahead and switch over to Google Chrome 19:43 and refresh the page, and here you can see we have our column 19:46 that's over on the left-hand side. 19:52 We have our logo with our subheader there, right below it. 19:55 We have our fonts, which are a little bit more styled now. 20:00 And if we scroll down, we can see that we don't have much else going on at this point, 20:03 but that's okay. 20:10 So let's go ahead and switch back to TextMate, and next, 20:11 we're going to actually work on the HTML5 video container. 20:16 So let's go ahead and grab one of these CSS flags and paste that in there, 20:21 and we're going to call this one VIDEO CONTAINER. 20:29
You need to sign up for Treehouse in order to download course files.Sign up