Generating Column Classes3:39 with Guil Hernandez
In 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
You need to sign up for Treehouse in order to download course files.Sign up