Proposed Susy syntax to create "The Fonmon" asymmetric grid layout

gistfile1.scss

//Proposed Susy syntax to create "The Fonmon" asymmetric grid layout. http://gridsetapp.com/specs/fonmon.php?gridset=show

$total-columns: 5; 

$column-width: 200px, 96px, 96px, 96px, 200px; 
// could use relative units: 1, 1 would be 50/50%. 1, 2 would be 33/66%, 1, 1, 1 would be 33/33/33% 

$columns: column padding, column padding, column padding, column padding, …; //suggested multi dimensional syntax

$gutter-width: 30px;
//with relative units gutter width needs a reference, like 30px at 960px...this needs work

Are gutters typically part of the column width, or in addition to the column width?

If the container width is 1000px and it's 5 equal columns with 20px margin, do we describe it as 200px , 20px margin? Or do we say 180px with 20px margin. Wow, I can see now why getting these grid layouts ironed out can be quite a challenge.

Wish there was a like button for that multi-dimensional list idea. I was wondering what would happen if each grid column needed a different gutter.

Yeah, variable width gutters are super problematic. Cool idea if it can be pulled off tho.

If the container width is 1000px and it's 5 equal columns with 20px margin, do we describe it as 200px , 20px margin?

I was thinking about making the value independent for padding. Gutters would need to speak the same language as columns though.

Wrote some initial logic to figure this out here: https://github.com/scottkellum/Singularity/blob/grid-refactor/stylesheets/singularity/_grid.sass

To keep this thread updated: http://singularity.gs/