Grid Configuration6:49 with Guil Hernandez
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.
[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 up