Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Last active November 17, 2015 17:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mirisuzanne/6a2caa70db9fc924aad2 to your computer and use it in GitHub Desktop.
Save mirisuzanne/6a2caa70db9fc924aad2 to your computer and use it in GitHub Desktop.
remove column-width setting in Susy v3?
// # Current Settings
// `columns` [integer | list] - the number, or asymmetric distribution of columns in a grid
// `gutters` [float] - the ratio of a gutter to a column
// `column-width` [null | length] - the width of a column, used for calculating static columns and gutters
$susy: (
'columns': 4,
'gutters': 0.25,
'column-width': null,
);
// # Issues
// - no way to have gutter widths defined apart from column-width (e.g. static gutters with fluid columns)
// - none of the given asymmetrical columns below will actually be the give column-width
$susy: (
'columns': 2 3 5 8 13,
'gutters': 0.25,
'column-width': 5em,
);
// # Proposal
// `columns` [integer | list] - the number (with or without length), or asymmetric distribution of column-widths in a grid
// `gutters` [float | length] - the ratio of a gutter to a column, or the explicit width of a gutter
// - defaults are the same
$susy: (
'columns': 4,
'gutters': 0.25,
);
// # Basic `column-width`
// - Requires new `$count x $width` syntax and parsing
// - Gutters can be described as either ratio or explicit width (`.25` == `30px` in example).
$susy: (
'columns': 4 x 120px,
'gutters': 0.25,
);
// # Asymetrical `column-width`
// - Widths can be applied directly to columns
// - What does a ratio gutter mean? Are the units implied? Is the following gutter `1/3em`?
$susy: (
'columns': 3em 5em 8em 13em,
'gutters': 1/3,
);
// # Mis-matched columns and gutters
// - This is a handy use-case (static gutters in a fluid grid)
// - The grid math becomes impossible, unless you remove the gutters from span calculations
// (since mis-matched gutters will have to be removed from the browser math as well, that may not be an issue)
$susy: (
'columns': 12,
'gutters': 1em,
);
// Symmetrical
$span: span(4);
$context: span(4 of 12);
$spread: span(4 wide of 12 narrow);
$static: span(4 x 120px);
$mixed: span(4 narrow x 120px);
// Asymmetrical
$asym: span(first 3);
$at: span(3 at 3);
$static: span(first 2 of (100px 300px 200px));
$all-static: span(all of (100px 300px 200px));
$mixed: span((1 3 4) of (2 4 6 8 10)); // your inner grid can be different and still related
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment