Last active
November 17, 2015 17:26
-
-
Save mirisuzanne/6a2caa70db9fc924aad2 to your computer and use it in GitHub Desktop.
remove column-width setting in Susy v3?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// # 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, | |
); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// # 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, | |
); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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