Column Layout7:28 with Guil Hernandez
Let's give our columns a few base styles for float layout, margins, and padding.
So next, let's give our columns a few base styles for 0:00 float layout, margins, and padding. 0:03 Now, one of the ways we can do this is by creating a placeholder for 0:06 our base styles. 0:11 So, as an example, I'll past this col placeholder at the top of our file. 0:12 And then we can extend the placeholder from this dynamic grid column rule. 0:19 So right beneath the width property we'll say extend col. 0:24 So let's take a look at our output CSS. 0:30 So as we can see, this is a pretty good solution even though 0:34 it's grouping all the column selectors into one rule. 0:38 And that's okay, because we need these base styles in our columns. 0:41 But, the problem we'll run into here is that since we're 0:46 building the grid with a mobile first approach. 0:49 We only want our column widths and 0:52 floats to kick in at a specific media query break point. 0:54 So if you go back to our grid commas file and 1:00 if we place the loop and grid column rule inside a media query. 1:03 So let's create one really quick. 1:08 We'll say @media. 1:10 And then let's define the media feature as min width 769. 1:17 So when we do this, sas yells at us, and 1:23 tells us that we're not allowed to extend a selector from within a media query. 1:29 Now, there is a work around for this issue. 1:35 So, if I wrap the same media query 1:37 around the properties inside this col placeholder, it'll work. 1:40 And it'll also work if we write the placeholder inside the media query scope. 1:45 Now, since we're working with a dynamic number of column classes, here. 1:51 And I'd like to avoid repeating that large selector group as much as possible in 1:56 our CSS output. 2:00 I'm gonna take advantage of the CSS begins with attributes selector to target 2:02 all column classes that begin with grid col. 2:07 So before we do that I'll just go ahead and delete this column place holder. 2:12 And, let's clean up our media query rule, here. 2:18 [SOUND] So, right beneath our media query, 2:21 let's create some new column styles. 2:27 So, I will add a comment, or column styles. 2:33 Just give it a little more space here. 2:39 And like I said, we're gonna use a substring matching attribute selector to 2:41 target all column classes that begin with grid column width. 2:46 So we're using the caret character to target all 2:52 column classes that begin with grid col and the two dashes. 2:55 Now, these are not the prettiest selectors, but 3:00 they're quite useful when targeting specific selector types. 3:03 So inside this new rule, let's create a new media query. 3:07 So we'll say media min width one pixel. 3:12 And max width 768. 3:18 [BLANK_AUDIO] 3:23 So, when our view port, or device is in the range of 1 pixel, and 768 pixels. 3:29 We'll want the margin top to be equivalent to 12 pixels in ems, 3:37 and we'll want the bottom margin equivalent to 12 pixels as well. 3:44 So next, inside the same rule. 3:52 We're gonna write another meta query to float our columns at 769 pixels, and up. 3:55 So we'll write, @media. 4:02 And the media feature will be min width, 769 pixels. 4:06 [SOUND] And like I said, we'll want to float our columns. 4:11 So let's say, float left. 4:16 And lets add a min height property with the value one pixel. 4:21 Lets also give it some left and right padding. 4:27 So for padding left we'll just add a pixel value of ten pixels. 4:29 And padding right we'll do ten pixels. 4:34 So finally we'll want to make it so that the last column in a row. 4:39 Will float right. 4:43 That way it's always flush with the right margin of the page. 4:45 So in our media query rule, 4:49 let's create a last of type selector that references the parent selector. 4:51 So we'll say &:last-of-type. 4:56 And then we'll just write float right. 5:05 Finally, we'll want to give our columns a left margin or 5:10 gutter, but we don't want the first column to have one. 5:13 Otherwise, it affects our grid layout. 5:17 So I wrote a simple mixin. 5:20 In our mixins.scss file called doubly. 5:23 That uses what I call the double ampersand selector to apply a left 5:28 margin to all but the first of adjacent siblings. 5:33 With the adjacent sibling selector here. 5:37 And you can read all about it in the teacher's note links. 5:41 I've included a blog post I wrote on this. 5:43 So in our second media query here, to create a row where all but 5:48 the first column have a left gutter. 5:53 We'll include the doubly mixin, and 5:56 then we'll pass that left margin value with a percentage function. 6:00 Where we'll divide the gutter width by the context. 6:07 We'll say g-gutter-width divided by the context variable. 6:10 Now currently, the context variable is scoped within our loop here. 6:19 But if we give it the global flag, 6:26 we'll be able to reference it in our percentage function. 6:29 So right at the end, we'll add the global flag. 6:32 So now that we've added this global flag, 6:36 we're now able to divide the gutter width by the context. 6:39 And now the first column in a row will always remain flush with 6:44 the left margin of the page, while the others get a left gutter. 6:48 So if we save and compile our SASS we shouldn't get any errors. 6:53 Oh, it looks like we still have that extend in our grid column rule, 6:57 from that old col placeholder rule. 7:01 So once we delete that, it looks like we're good to go. 7:04 And now when we take a look at our CSS output, 7:08 there we have all the media query rules we created earlier. 7:11 As you can see that doubly mixin outputs this rule here, 7:15 which gives us a margin-left of 20 pixels. 7:18 All right. So it looks like our 7:22 column classes are good to go. 7:23 And we'll see how it all works in the next video 7:25
You need to sign up for Treehouse in order to download course files.Sign up