Skip to content

Instantly share code, notes, and snippets.

@micahgodbolt
Created June 15, 2012 14:36
Show Gist options
  • Save micahgodbolt/2936775 to your computer and use it in GitHub Desktop.
Save micahgodbolt/2936775 to your computer and use it in GitHub Desktop.
Proposed Susy syntax to create "The Fonmon" asymmetric grid layout
//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
@micahgodbolt
Copy link
Author

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.

@scottkellum
Copy link

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.

@scottkellum
Copy link

@scottkellum
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment