|
// ---------------------------------------------------------------------------- |
|
// 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); |
|
} |
at 3
to be location, not isolation. Float and isolation are output types, not relating to this syntax. Location is needed to calculate the grid width in asymmetric columns so we should be focusing on that alone for this area of syntax. Location is irrelevant for uniform columns and the syntax should . I think we need to make the output distinction in the modifiers but that can wait until we have all the math working properly. We can use floats for everything, including asymmetric columns, for now. We can also add smart triggers to switch to isolation or another output mode if the column is written in such a way that implies the user wants to use it.span(2 of 30%); is the special context? A little confused by sub-dividing special contexts. I was designating
inas the grid context and
ofas the division of that grid context when thinking about this. So
of 12 in 960px, gutter 20pxwhere we have a context, how it is divided, and we can calculate 20px gutters appropriately for this given context. Does
span(2 of 960px)` change only the grid context and is this still a 12 column grid? or is this 2 of what in the context of 960 in some larger number?