twigkit/semantic.gs — Issue #16: Fluid grid calculation off
Author: taivu
Created: 2011-10-11 19:06:05+00:00
State: open

While using Semantic.gs, I found what i believe to be a bug, or a miscalculation in Grid.less. these were the settings i used:

@column-width: 54;
@gutter-width: 30;
@columns: 12;

this gave me 978. i then set @total-width: 100% for a fluid layout. it was a few pixels off from my design, but ok when i switched back to px.

Heres where i found the problem:
@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

i did the math: (54*12) + (30*12) = 1008px.

i took 1008 - 978 = 30 (which is the gutter size!)

so i fixed the formula for my usage:
@_gridsystem-width: (((@column-width*@columns) + (@gutter-width*@columns)) - @gutter-width ) * 1px;

and everything came out great in the fluid grid. I never really contributed to the web community before, but i hope this helps anyone who runs into a similar problem :D I really dig the semantic grid system