Rounding errors in gutter calculations.

[Snugug]

NOTE: Slight rounding errors happen in gutter calculations causing a slight offset to the overall column width. Different than browser rounding errors which almost every grid system has, these only effect gutters and the larger the gutters, the higher the probability the errors will be noticeable. — Scott

If I've got a setup as follows:

$columns: 8, 4, 3;

and I want something to span the whole width, I should be able to do something like this:

#foo {
  @include grid-span(3, 1)

which does give me it spanning the full 3 columns, but also adds in the $gutter to the side. I know this something that susy solves by having a full row be clear: both, but we either need to realize that should be full width and do it, or we need to explicitly define how to do a full width in the docs.

[scottkellum]

Singularity needs to be smarter than this. We know where on the grid people are so we can add appropriate code for them. Might also be a rounding bug within Singularity, gutters are a little screwy.

[scottkellum]

This issue is driving me nuts. I am probably missing some dumb little math thing that will fix it.

Note changing the column difference to - 2.5 fixes the issue here: https://github.com/scottkellum/Singularity/blob/master/stylesheets/singularitygs/_gutter.sass#L3

Note that is half of the total column count but it also results in the first gutter being too big.

[Snugug]

I'm on it.

I think one of the things that'll make our life happier, and make this somewhat more familiar to more users, is if we differentiate between gutter width (our current gutter) and grid padding (gutter at the far left and right side) like Susy does. While I'm looking into this, I'll write that as well.

[Snugug]

Also, thoughts on having Gutters written in the same syntax as columns (i.e. unitless ratios) instead of a percentage? This would effectively make them a fake column that we would include in the full percentage calculation. So, something like the following:

$columns: 1, 2, 3, 4;
$gutter: .25;

[Snugug]

I've found the issue and am in the process of rewriting it.

The issue is (the example is going to be an equal grid, but it's the same idea) is that with the following:

$columns: 12;
$gutter: .25;

$column-width: column-width(3);

In this, $column-width isn't 25% - the output of gutter-output (I'm not even 100% sure what that's looking to do), the width is actually $span + (($span -1) * $gutter), which in this case is 3.5 out of a total of 14.75, giving us an actual width of 23.7288136%. This new math should hopefully solve the rounding issue because it takes the gutter into account to begin with. I'm going to implement this in the rounding-errors branch that will be based off of the column-isolation branch to see if this is indeed working and solves the issue.

[scottkellum]

Also, thoughts on having Gutters written in the same syntax as columns (i.e. unitless ratios) instead of a percentage? This would effectively make them a fake column that we would include in the full percentage calculation. So, something like the following:

I’m ok with this! excited to see what you have written. Also any units can be strung in as long as they are consistent. %, px, whatever. Making gutters consistent with columns makes sense. If you use % then you need % gutters. If you use px then you need px gutters.

[scottkellum]

Was thinking about the gutter-context function and the ratio based gutters. Then realized it makes things a hell of a lot easier when using uniform columns.

$columns: 5;
$gutter: .1;

// The ratio gets factored into a string of 5
.foo { @include grid-span(3) }

// Within a context of 3
$columns: 3;
.foo { @include grid-span(2) }

// the gutters will be the same because the distribution of the ratio is understood. No need to redefine gutters in different contexts with this use case.

I have some reservations in terms of a new mental model for designers to deal with. Percents are just so easy to understand. However if a designer wanted they could use percent, px, and other stuff straight from their photoshop mock in this system as long as they keep things consistant.

[scottkellum]

Was messing with it, might take a re-write of the column and gutter system to make it elegant.

Thinking we might need a new grid context function to add up columns and gutters. Fixed columns are going to be an exception to the rules here because the ratio based gutters will be difficult for devs to understand. However we can have another function figure out what the ratio is for 2% of $columns: 5; => ratio of 1:2%:1:2%:1:2%:1:2%:1 … haven’t worked out the maths here yet.

Lots of changes to how we parse these lists and stuff. Again focus on modularizing these functions so we can re-use parts. If a single function gets too long or complex chances are it needs to be broken into a separate function. Think @Snugug ’s partial structure.

Didn’t have enough time to write any working code here but worked through some initial issues.

[Snugug]

Aloha! So I think I've done it! Check out my updates on that branch.

[scottkellum]

Sweeeet!!! Will pull and test quick in a bit

[scottkellum]

What branch? Any example file I should check out?

[Snugug]

I believe I called it rounding-errors. Check out zen-iso HTML/scss

~ Sam Richard http://snug.ug

On Monday, August 20, 2012 at 7:18 PM, Scott Kellum wrote:

What branch? Any example file I should check out?

— Reply to this email directly or view it on GitHub (https://github.com/scottkellum/Singularity/issues/23#issuecomment-7876394).

[scottkellum]

Ah, git was effing it up for me.

Dude, this is awesome! these columns are spot on!

Just tested nesting columns and it is so awesome to not have to redefine gutters.

[Snugug]

Awesome! I've been so happy w/how it came out and I had to wait until I got internet access IN ANOTHER COUNTRY to be able to push! I love it too!

Do you think it's something we can push to the gem? I've got my talk in 20 hours and damnit, I wanna show it off!

[scottkellum]

haha, yeah I think so. It’s still beta so if it causes any bugs we can blame it on that.

Check out nested columns with out having to redefine gutters: http://img.pgdn.us/nested-cols.png

[Snugug]

That's awesome, didn't even test that.

You want to roll or should I? And yes, beta ALL the things!