Preview
Video Player
00:00
00:00
Generating Column Classes
3:39In this video, we'll finish writing the column loop by getting the values for $context and $target.
So now we need to get those values for the
target and the context.
0:00
So for starters, we can use the g-context
function we
0:05
wrote in the previous video to give us the
context value.
0:08
So right above the rule, we will write a
variable of context.
0:12
And for the value, let's use that
g-context function.
0:17
And inside the parentheses, we'll pass the
$g-column-width, $g-column-count and
0:24
$g-gutter-width variables as arguments.
0:28
So first, let's say $g-col-width, followed
by $g-col-count.
0:31
[BLANK_AUDIO]
0:37
And finally, $g-gutter-width.
0:39
[BLANK_AUDIO]
0:42
So this $context variable will give us the
total width of all columns and
0:45
gutters based on the column count.
0:50
Now, to get the target value, we'll go
ahead and
0:53
write a $target variable right below
$context.
0:57
Then we're gonna multiply the column width
by the iterator.
1:01
So we'll add a set of parentheses, and
we'll say, $g-col-width times i.
1:05
And then we'll add the gutter width times
the iteration number minus 1.
1:15
So, another set of parens, and then we'll
say, $g-gutter-width times,
1:21
a set of parentheses, and the iteration
variable minus 1.
1:28
[BLANK_AUDIO]
1:33
All right, so we'll go ahead and save, and
1:38
it looks like we have no errors in the
console, so we're good to go.
1:40
So again, each column number will get
passed through our
1:45
selector to return a different class.
1:48
And each column number will get passed
through this target equation here with
1:52
this iterator variable to return a value
that
1:56
then gets divided by the context down here
in the width value.
1:59
All right, so
2:03
let's go ahead and bring up our CSS output
to see what this function did.
2:05
[BLANK_AUDIO]
2:09
We'll scroll down and find our grid
classes.
2:11
And great, here we can see that it did
create the grid classes we need for
2:14
all twelve columns.
2:19
And, as we can see,
2:22
it also returned all the fluid width
calculations for each column.
2:23
So now we have a pretty flexible grid
system we can use in our layout.
2:27
And anything about the grid that needs to
be changed can be done in the config file.
2:32
So, for instance,
2:38
I'll bring up the config file and scroll
down to the grid variables.
2:39
And, if we now want to change our columns
to be wider, so let's say, 75 pixels.
2:45
And we want our gutters to be smaller, so
let's change it to 15 pixels.
2:53
When we save and compile our config file,
and take a look at our CSS output,
2:59
we can see how it outputs new width values
for all of our columns.
3:04
But let's just say we need more columns.
3:10
So, let me go ahead and undo those values
we just defined, and
3:12
let's change the column count to 15
instead of 12.
3:17
So now, when we take a look at our CSS
output,
3:23
we can see how it recalculates the width
values to accommodate 15 columns.
3:27
So, cool.
3:33
But, moving forward, we'll go ahead and
keep the column count at 12.
3:34