Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.