|
// ---------------------------------------------------------------------------- |
|
// 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); |
|
} |
Cascading math: Oh, that is clever. I think you are right that your math should support either api.
4em : 1em
is a ratio just the same as1 : 0.25
.Arbitrary widths: I also think in terms of columns, but I am curious about this working as a gridless layout system. If I'm given a grid-free design comp to translate, I could still take advantage of the layout mechanisms, while supplying my own widths. Once a user is off-the-grid, though, I don't think we need to track how columns fit within that context.
3rd push 1: Aha. I was thinking "3rd" as in "isolated at column 3", in which case the isolation-placement and the pushing would both utilize the left margin, to accomplish basically the same task. But you are using "3rd" to establish which column-size to use in an asymmetric grid. In that case, we possibly use "push/pull 3" to move an item from it's floated location - or "at 3" to isolate it's location relative to a container.