|
// ---------------------------------------------------------------------------- |
|
// 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); |
|
} |
@tsi and @ericam
In my mind,
at
andpush
/pull
are two completely different things.at
— designates the location a column starts. Helps identify how wide an asymmetric column should be. If using the isolation method/grid layout/an output that supports location, the column can be written at that location.push/pull
— Useful with float output that does not support location. If there is not a structural column preceding the current column, this adds margin to put the column in the correct location.Because we don’t know anything about the HTML, I don’t see how we can get
at
andpush
/pull
to work the same way. We would need to know the markup in order to correctly floatspan(1 at 1)
next tospan(1 at 3)
. While this would work in isolation methods, symmetric floats would need to be writtenspan(1)
andspan(1 push 1)
. Asymmetric columns with floats like this:span(1 at 1)
next tospan(1 at 3 push 1)
.Not sure why we need both 3rd and at. I think triggering output modes should also be more explicit as we might want to support grid layout and other output modes other than just float and isolation in the future.
cc/ @Snugug as he has been in the thick of this stuff as well.
@tsi, lots of this thread has been refining what @ericam wrote and sanding off edge-cases. I think we can safely remove comas in favor of identifying variables with consistent prefixes like at, of, push and pull.