|
// ---------------------------------------------------------------------------- |
|
// Settings |
|
|
|
// $grid : [<number> <settings> | <width> <complex-layout>] [inside | outside] [before | after | split]; |
|
// $direction : [left to right | right to left]; |
|
|
|
// Example: The current Susy default. |
|
$grid : 12 4em 1em 1em outside after; |
|
|
|
// Example: The current Singularity demo. |
|
$grid : (1 2 3 5 2 3) .25; |
|
|
|
// Example: The current Salsa default. |
|
$grid : 16 auto 20px inside split; |
|
|
|
// ---------------------------------------------------------------------------- |
|
// Grid Container |
|
// |
|
// @include grid($width...) |
|
// - $width : <breakpoint> [static] <arbitrary with | column math>; |
|
// : 12 4em 1.5em - Column math (explicit) |
|
// : 12 4em 1.5 - Identical to above... |
|
// : break(25em) 8 - Breakpoint + column math (default) |
|
// : 60em - Arbitrary width |
|
// : static 60em - Use 'width' instead of max-width |
|
|
|
// Example: 4 column default width, breaks at 8 columns |
|
.container { |
|
@include grid(4, break(8)); |
|
} |
|
|
|
// ---------------------------------------------------------------------------- |
|
// Grid-Spanning Element |
|
// |
|
// @include grid-span($width, $position) |
|
// - $column : [location | first, last <explicit>] [<width> | <columns-span> of <column-count> | <fraction>] [push <count> | pull <count>]; |
|
// : first - Remove 'outside before' gutters |
|
// : last - Remove 'outside after' gutters (and reverse?) |
|
// : 3rd - Explicit location |
|
// : 2 - Columns in context (root) |
|
// : 3 of 6 - Columns in context (explicit) |
|
// : 2/6 - Fraction |
|
// : push 3 - Push |
|
// : pull 3 - Pull |
|
// - $modifiers : [reverse] [in <context>] [gutter | <width>] [margin | <margin>]; |
|
// : reverse - Float the other direction |
|
// : in 960px - Modify column context |
|
// : in 75% - Modify column context |
|
// : gutter 2% - Modify gutter |
|
// : margin 10px - margins |
|
// : margin 6px 10px - irregular margins |
|
|
|
// Example: 4 of 10 Columns, pushed 3 |
|
.item { |
|
@include grid-span(4 of 12 push 3); |
|
} |
|
|
|
// Example: Same as above using a fraction |
|
.item { |
|
@include grid-span(4/12 push 3); |
|
} |
|
|
|
// Example: Write a column of an arbitrary width. |
|
.item { |
|
@include grid-span(30%); |
|
} |
|
|
|
// Example: second 3 of non-uniform Columns pushed 1, new gutter .2 |
|
.item { |
|
@include grid-span(2nd 3 of (2 1 5 1 3 3) push 1, gutter .2); |
|
} |
|
|
|
// Example: second 3 of non-uniform Columns pushed 1, new gutter 16px |
|
.item { |
|
@include grid-span(2nd 3 of (100px 60px auto 60px 140px 140px) push 1, in 960px gutter 16px); |
|
} |
|
|
|
// Example: Same as above, assuming global grid is OK. |
|
.item { |
|
@include grid-span(2nd 3 push 1); |
|
} |
|
|
|
// Example: span 5 columns assuming global grid, floats, and uniform columns |
|
.item { |
|
@include grid-span(5); |
|
} |
@ericam
3rd push 1
is the 3rd column floated next to an element that is the first column. Push just adds margins to compensate for the missing column.anything else?
I am thinking of this in the way we built Singularity. That may be an issue, but let me describe the math behind it and why we calculate columns this way.
cascading defaults
Grid values seem to compound on defaults with Susy meaning that context is a function of the global context. So the
of $columns
variable scales gutters and other things based on the relationship to the global$columns
.With Singularity, the the defaults cascade instead of compound. IF you write
of $columns
I am thinking this overrides the global var instead of being a sub-context of it.$gutter
s remain unchanged and because the math is built on the relationships between the columns and gutters, not between the gutters and overall context, the gutters scale just fine when the grid is subdivided.That said, I think the Singularity math can support the idea of traditional Susy context, but IMO we might want to switch to the Singularity math as it is incredibly simple.
the math
Easiest way to show this is by quick example.
Susy
100% / 12 = 12 column grid
This works great for any symmetrical grid logic. but lets nest that.
(100% / 12 * 3) : 100% = Three column context is a little more complex and percentages need to be compensated in gutters
2% gutters need to be expanded to fill appropriate new context.
Singularity
The basic language of Singularity only cares about ratios, not percentages, pixels, whatever. You can feed in
(200foo 200foo 100foo)
into a grid because units just don’t matter, it’s the relationship between them that counts.1:1:1:1:1:1:1:1:1:1:1:1 = 12 column grid
gutters are translated a ratio of that, say
.2
Now lets nest in a new context of 3
1:1:1 = exact same calculation as the full grid
So how does this work with gutters? again, the value cascades down and does not need to be recalculated in new contexts.
1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1 : .2 : 1
and when you nest, the length of the chain just gets smaller as we go down to 3.
1 : .2 : 1 : .2 : 1
It gets even better with asymmetric columns
12 : .2 : 38 : .2 : 12 : .2 : 23
Down to 2 columns
38 : .2 : 12
Would love to model the Susy 2.0 math on this. I think we can easily support anything on the fron-end with this, just involves a little different way of thinking.
partly why I overlooked the arbitrary context. I think we can work it out though. Maybe like this:
$context: ($new-context ($context - $new-context))
TL;DR
Calculating based on ratios between columns not outside-in context calculations might make some things easier and make some settings irrelevant. It might change the way settings cascade and how use cases work.