|//Proposed Susy syntax to create "The Fonmon" asymmetric grid layout. http://gridsetapp.com/specs/fonmon.php?gridset=show|
|$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|
|//with relative units gutter width needs a reference, like 30px at 960px...this needs work|
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.
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.
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