Preview
Video Player
00:00
00:00
Grid Configuration
6:49We 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.
[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