|
// ---------------------------------------------------------------------------- |
|
// 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); |
|
} |
This is starting to look really awesome, I think we should drop
3rd
and just useat 3
Keep things simple and consistent.Yeah, really like the idea of moving these around:
2 of 12 push 4 == 2 push 4 of 12
With asymmetric grids is a column-count sufficient context? — No, the idea here is that
12
completely re-writes the gird each time. This just resets the grid to a regular 12 column grid. If the context is$grid: (1 2 4 4 2 1);
and the nested mixin for the second two columns would be like thisgrid-span(1 of (2 4))
. If it was justgrid-span(1 of 2)
then it would result in two equal columns. Also this is super flexible and plays nice with the math.Why do we have column context here — Sometimes columns are nested or just written as something off the normal grid. If you want to configure a special context that is different from the default grid, this is where you can pass one in. Maybe you are nesting deeper than 3 layers in markup as well and need to define an explicit sub-context.
••What all else do we need to manage here•• — These modifiers just change global settings. We should have an override for ever global variable here. I think we can safely delay going too deep into these until we get our width/location and global vars working smoothly. Your list is a great start, lets run with that for now. Maybe change output settings (float, isolation, table) but we still need to get language parsers, math and partial structure going before we look into output API.