Preview
Video Player
00:00
00:00
Column Layout
7:28Let'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