"Ruby Foundations" was retired on September 23, 2015. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
Let's give our columns a few base styles for float layout, margins, and padding.
Quick Reference
Related Videos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up