public
Created

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

  • Download Gist
gistfile1.scss
Sass
1 2 3 4 5 6 7 8 9 10 11
//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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.