Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Fixing calculation of flex-gutter and flex-grid functions #154

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
4 participants
Contributor

Emerson commented Dec 18, 2012

After trying to use the flex-gutter() and flex-grid() functions, I found that the width calculations were wrong. If you take the example in the comments of the _flex-grid.scss file and run the numbers manually through the flex-gutter() and flex-grid() functions, you'll see that the result is incorrect (too big).

To confirm this problem:

  • start a new rails app
  • install bourbon
  • create a basic 4-column flex layout, using the defaults from the docs or comments in the _flex-grid.scss file
  • Notice that the columns don't work (they are too big).
Contributor

plapier commented Dec 21, 2012

@kylefiedler and @kaishin: Can one of you take a look at this?

Owner

kylefiedler commented Dec 21, 2012

@Emerson I think your thinking of the grid is different than the way I am. This function is built for grids that are 'column – gutter – column – gutter – column – gutter – column' so there is one less gutter than total columns. That accounts for the '- 1' that you took out. That thinking is also built in to our grid framework, Neat.

The way you are changing it would mean that we would have an extra gutter space at the end or we would have to split the gutter so it would be half on each side (I'm assuming you're doing this).

Contributor

Emerson commented Dec 21, 2012

Hmmm - I'll look deeper into this tonight when I have some more time. I do seem to remember punching in the exact numbers listed in the ReadMe and getting incorrect widths.

I'll investigate and get back to you...

kaishin commented Dec 28, 2012

@Emerson As @kylefiedler pointed out, we need to take one gutter out to get the right numbers. We're using this function in Neat (http://neat.bourbon.io) and we haven't got any problems with it so far.

@kaishin kaishin closed this Dec 28, 2012

Contributor

Emerson commented Dec 28, 2012

Just manually ran through the math in the readme and I'm almost certain it's wrong. I understand what you guys are saying about the missing last gutter, but the readme needs to be updated. Here is what is currently in the readme:

@function flex-grid($columns, $container-columns: $fg-max-columns) {
  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  @return percentage($width / $container-width);
}

@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  @return percentage($gutter / $container-width);
}

//  $fg-column: 60px;             // Column Width
//  $fg-gutter: 25px;             // Gutter Width
//  $fg-max-columns: 12;          // Total Columns For Main Container
//
//  div {
//    width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
//    margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
//  }

If you actually do the math, you end up with different numbers. Here is what I've found:

//  $fg-column: 60px;             // Column Width
//  $fg-gutter: 25px;             // Gutter Width
//  $fg-max-columns: 12;          // Total Columns For Main Container
//
// 
//  div {
//    width: flex-grid(4);        // returns (315px / 995px) = 31.65829%;
//    margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
//  }

I'll update the readme and send a pull-request soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment