Basic One and Two Column Layouts

Hey again and welcome back. 0:00 We just styled the header of our CSS Zen Garden. 0:02 And now we want to jump into typesetting some of our body text in a one and 0:05 two-column layout. 0:09 We've got our line height, vertical rhythm and 0:10 sizes down, so this shouldn't be too much of a chore. 0:13 From our concept sketches, I want our preamble, benefits, and 0:16 requirements sections to be one column. 0:20 And our explanation and participation sections to be two column. 0:23 We see our benefits are set up as a small aside for larger size screens. 0:27 But we want to style them in our basic format for smaller sizes. 0:31 Then, through media queries, adjust it for larger. 0:35 [BLANK_AUDIO] 0:37 We'll start by setting up our one column layouts. 0:39 Using Trent Walton's technique, 0:42 I've placed asterisks at the 45th and 75th characters into our HTML. 0:43 Remember, we'll be removing these later, so 0:49 that's okay to put them in now as these are gonna help us determine our measure. 0:52 Our line should break somewhere between the two. 0:56 For these sections, 0:58 I'm gonna wanna set em apart through different background changes. 1:00 So, lets head over to our CSS. 1:04 So for our preamble and 1:06 requirements, I want to set our background to be that navy tone we've been using. 1:07 [BLANK_AUDIO] 1:11 And I'll also wanna give it some padding of 4M for the top and bottom and 6% for 1:14 the left and right, as this is gonna give our content good space within the block. 1:18 For our benefits, I wanna do a similar set up, but 1:23 I wanna give it an even darker shade of our navy for the background. 1:26 [BLANK_AUDIO] 1:29 So I'll save and let's go check that out. 1:36 Great. So 1:39 our backgrounds are definitely setting apart these sections, but 1:39 our type inside them now needs some help. 1:43 We can't even see our body copy. 1:45 So let's go in and 1:47 set that at a sandy tone of white and let's also setup our measure. 1:48 So I head over here. 1:52 And notice how I'm selecting the H3's and P's of our preamble and requirements. 1:54 Because our HTML cannot change and we can't add another div or class into 1:59 the mix, we'll need to use these classes and elements to set our measure. 2:03 I felt like a max width of 34 rim felt like a good reading measure and 2:08 is just at the cusp of the 75th character mark. 2:12 We'll also need to set our margins to 0 auto to keep our content block in 2:15 the middle of the page. 2:19 And for our H3, we'll give it a bottom margin of .62m to keep it in line with 2:21 the rhythm that we set up. 2:25 Now, I'll copy this and paste it into our P tags. 2:26 And remove that .62m of bottom margin as it's no longer necessary. 2:30 And then I'll also set it's color to be our white. 2:35 Let's save and check out how that's looking. 2:39 All right. 2:42 That's much better. 2:42 Our measure is in a much more readable place. 2:43 And notice the two asterisks are on two different lines. 2:46 So that's good. 2:49 And our benefits down here still need some help. 2:50 So let's go style those out. 2:53 We'll want to set our H3s up in a similar way. 2:55 So I'll grab that copy and paste it down here for our benefits H3. 2:58 But let's change the color of it to be our lighter shade of gray. 3:03 [BLANK_AUDIO] 3:06 Let's set our paragraphs of our benefits section to be the same as these. 3:08 But we're gonna want to change the color. 3:13 So I'll paste that in there. 3:15 And then our color will be a tad darker shade of that gray. 3:16 So we'll do 606f81. 3:20 This'll make our H3 stand out just a bit more. 3:23 So let's check that out. 3:26 Great. That's much better, and 3:28 it has a nice feel and contrast with the background. 3:29 Now in our requirements section, 3:33 things are styled in a similar way to our preamble. 3:34 But notice now, our links need some tender loving care. 3:37 So let's fix those. 3:40 So for our requirements class link style, I'll set the color to be the same white as 3:42 the copy and give it a border bottom of one pixel solid with the same color. 3:47 [SOUND] When these are hovered over, I want them to turn green. 3:51 So on our hover selector, we'll set a color of green and border of green. 3:59 [SOUND] 4:03 Let's save and refresh. 4:05 So great. 4:14 That's much better. 4:15 They actually look like links because they have a border bottom here, and 4:16 they're hover state is nice. 4:19 And notice how building a good foundation in the first video made this 4:21 process a whole lot easier for our one column layouts. 4:25 Now, we'll be getting into the two column layout area of our design. 4:29 After our preamble, 4:33 we see from our sketch that we want our content to split into two columns. 4:34 It would be great here if our backgrounds also differed, 4:38 which would further distinguish each content block. 4:41 Again, our vertical rhythm, margins, and line height are already set, so 4:44 this should be pretty straightforward. 4:49 These content blocks are similar lengths. 4:52 So it can work well to place them side by side. 4:54 If they were longer pieces of content or if just one was longer, 4:58 then it wouldn't make sense as the reader would have to scroll through one, 5:02 then scroll back up to read the other. 5:05 Notice how asterisks have been placed at the 40th and 5:08 50th characters to help us with our measure for a multiple column layout. 5:12 To style these out, let's head over to our CSS and we'll target our explanation and 5:17 participation classes. 5:21 We'll set a width of 50%, so that each class takes up half of the browser. 5:23 And I'll set our box-sizing to border-box, so 5:27 that when we adjust padding, it won't adjust our width past the 100% mark. 5:30 On my explanation class, I'll give it a float of left. 5:36 And padding of 4m for the top. 5:42 10% for the right. 5:44 4m for the bottom. 5:45 And 8% for the left. 5:47 This will float or position our content block to the left and 5:49 space our content well within the block through our padding. 5:52 Notice how our top and bottom padding are consistent with our other sections of 4m. 5:56 For this explanation section, I'll keep the background and 6:00 text the same colors as our body 6:04 [BLANK_AUDIO] 6:06 We're gonna wanna change that to be white. 6:35 So I'll go up here and grab a sample of our white, and 6:37 head down to our participation H3 and paste that in. 6:41 [BLANK_AUDIO] 6:45 Let's save and refresh. 7:01 [BLANK_AUDIO] 7:03 All right. 7:05 Things are looking really nice here. 7:06 So the div's, they're aligning well. 7:07 And our measure is good because the asterisks are falling on two 7:09 different lines. 7:12 These asterisks are here to help us make decisions, not make decisions for us. 7:14 If we felt like the measure needed to be adjusted, then we should adjust it. 7:18 Lastly, notice our links and 7:23 our participation section could use some nice styling. 7:25 So let's go help them out. 7:28 [BLANK_AUDIO] 7:29 Now let's check it out. 8:05 Great. That's looking a whole lot better and 8:07 jives more with the content. 8:09 Lastly, notice this HTML and CSS are still in all caps, 8:12 because they're set in links and they don't have ABBR tags around them. 8:16 We can actually use some code to target those two links and 8:21 change them to be small caps. 8:24 So let's check out how. 8:26 I'm gonna grab our small-caps copy up here. 8:28 And then down here for our links, 8:32 notice I'm using these pseudo-selectors to select our last paragraph. 8:34 And then our first link in the last paragraph. 8:38 And our second link in the last paragraph. 8:41 These correspond to the HTML and CSS links in that last paragraph. 8:44 So I'll set these to be small caps with a text transform of lower case. 8:48 Let's save and check it out now. 8:53 Great. So now those links are styled in 8:55 our small caps. 8:57 This was just a minor touch. 8:58 But I think it really helps style the content. 8:59 Great. Our content is really starting to 9:02 flow well. 9:04 And through color and arrangement, we're clearly presenting these 9:05 different blocks of text in one and two column layouts. 9:08 Next, we're gonna take a look at our footer. 9:12