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

Interesting. So what if I say:

$total-columns: 5;
$column-width: 200px, 96px;

Do I get an error, or do we extrapolate out somehow?

My guess, if I tried to extrapolate, would be to mirror and fill, resulting in the same grid you defined.

Yes, I'm sure you could work up some extrapolation logic, similar to margin/padding sytax. Single value gets applied to all columns. Two values gets alternating columns. Even number of values the 2 center values get repeated, odd number and single center value is repeated. (so this could be written 200px, 96px, 200px)

Something like that. I think in most cases you'll either explicitly define each column, or give a single value for all columns.

Thinking about making it unit agnostic and counting the number of columns in the list.

$columns: 1, 1, 1, 1;

makes 4 equal columns

$columns: 2, 1;

makes two columns, one that is 2x the last one.

$columns: 200px, 100px;
$columns: 66%, 33%;

If a user is more comfortable with pixels or percents these both will yield the same result. With a 300px wrapper the px example will be pixel-perfect.

Could even have a multi-dimensional list for different padding on different columns.

$default-padding: 0;
$grid: column padding, column padding, column padding, column padding, …;
$grid: 1, 3 1em, 2;

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/