"Ruby on Rails 5 Basics" was retired on June 1, 2025.
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
We want to be able to manage the grid system (column count, gutters, max-width, etc.) from our config file. First, we'll define our grid configuration variables, then write a function for generating grid column classes.
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
[MUSIC]
0:00
In this stage,
0:04
we're gonna create a responsive grid
system to help lay out our modules.
0:05
We'll start by defining a few grid
configuration variables,
0:09
then let Sass handle the rest.
0:12
So what we're gonna do first is define a
few variables for our grid configuration,
0:15
because we'll wanna be able to control the
column and gutter width.
0:20
Also the column count and the max width of
our grid, all within our grid.scss file.
0:24
So, all the way at the bottom, right under
this comment for
0:31
Grid, let's define our grid configuration
variables.
0:35
So first, we'll want to define our column
width, so
0:39
we'll create a variable called
$g-col-width.
0:42
[BLANK_AUDIO]
0:45
And let's set the base value to 65 pixels.
0:47
[BLANK_AUDIO]
0:51
Right before that, let's create a variable
for our grid column gutters.
0:54
We'll call this one $g-gutter-width, and
0:57
we'll set the base gutter width to 20
pixels.
1:03
Next, we'll create a variable for the
column count.
1:07
We'll call this one $g-col-count.
1:11
And by default, let's set it to 12
columns.
1:16
[BLANK_AUDIO]
1:19
Finally, we're going to create a variable
for the grid container max width.
1:20
So we'll call this one $g-cont-max-w.
1:26
And let's set it to 1050 pixels.
1:32
[BLANK_AUDIO]
1:35
So now, we need to use these pixel values
to create our fluid width,
1:36
where the values will be percentage based.
1:41
So in our utilities directory, we'll bring
up our functions.scss partial.
1:44
And first, we're gonna write a function
that establishes a base context for
1:51
our fluid width.
1:57
So right below the comment I wrote here
for
1:59
set the context width for the grid, we'll
write our function.
2:02
And we're gonna call it g-context.
2:07
So we'll write @function, followed by
g-context.
2:09
[BLANK_AUDIO]
2:17
And our function is going to take three
arguments.
2:19
So the first one will be for the grid
column width.
2:23
So we'll say, $g-col-width.
2:27
And the next one will be for
2:30
the grid column count, so let's write the
$g-col-count variable.
2:31
And finally, the grid gutter width.
2:37
So let's write the $g-gutter-width
variable.
2:40
As you've probably noticed, these are some
of the variables
2:46
we just defined pixel values for in our
main config file.
2:49
And we're just gonna pass those as
arguments in our g-context function.
2:55
So, now, in our function,
3:00
we'll want to return a total width value
based on those values passed.
3:01
So let's create a context variable called
g-context.
3:07
[BLANK_AUDIO]
3:12
And now we'll write the equation that will
give us that width for context.
3:15
So first, we'll write a set of
parentheses.
3:20
And inside, we'll say $g-col-width times
3:23
the $g-col-count variable.
3:30
And then outside of the parentheses,
3:34
we'll add a plus sign then create a new
set of parens.
3:37
And inside, we'll say, $g-gutter-width
times,
3:40
a set of parentheses, $g-col-count minus
2.
3:46
[BLANK_AUDIO]
3:52
So now let's go over what this equation
actually does.
3:55
So here, we're multiplying the column
width value
3:59
by the total number of columns defined in
the column count variable we set.
4:03
Then we're adding the total gutter width
by multiplying the gutter width value
4:08
by the total number of columns, but we're
subtracting one gutter width,
4:15
since there's usually one less gutter than
the total number of columns in a grid.
4:20
So right below the $g-context variable,
4:26
we'll then say @return $g-context.
4:28
Okay, so now we're ready to use our
g-context function to create a loop
4:36
that iterate through each column based on
the column count value we define.
4:41
Then output a CSS class for
4:47
each of them, and calculate a fluid
percentage based width.
4:49
So we'll go over to our layout rules
directory and
4:54
bring up the grid-columns.scss partial
file.
4:58
And we're going to write our loop below
this comment.
5:02
So we'll say, for i from 1 through
$g-col-count.
5:05
[BLANK_AUDIO]
5:15
So here, i is a counter variable or
iterator for this particular loop.
5:20
Then we're saying, loop through each
column number defined in
5:26
the $g-col-count variable, starting from
1.
5:30
In our case from, 1 through 12,
5:34
since we defined 12 columns with this
$g-col-count variable.
5:36
So now, to generate each column class and
5:41
CSS rule from our loop, let's create a
selector inside this loop.
5:45
So, first, I'll go ahead and
5:51
create a comment that says, Generate
column modifier classes.
5:53
[BLANK_AUDIO]
5:57
And then we'll start by defining the class
grid__col, followed by two dashes.
6:03
Now, to output selectors for
6:11
the total number of columns, we're going
to use interpolation syntax to
6:13
pass the i iteration variable as the
modifier in the selector.
6:18
So each grid column will get a width, so
we'll write a width property.
6:25
And we'll use Sass's percentage function
to
6:30
return the result of $target divided by
$context.
6:34
[BLANK_AUDIO]
6:39
So now we need values for $target and
$context.
6:42
How do we get those?
6:46
Well, we'll do that next.
6:47
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