-
Notifications
You must be signed in to change notification settings - Fork 109
Spanning The Grid
Singularity is what we like to call a semantic grid system, meaning that instead of grid classes being generated that you then apply to your HTML, the grid is stored entirely within your CSS and applied directly to the element you want to use it on. This makes working with responsive grids very easy as you don't need to swap classes using JavaScript or combine lots of assumptions into a single class. It also allows you to build and use grids that are not tied to specific sizes, allowing you to make more compelling and future friendly designs. The key to all of this is the grid-span mixin.
The key to spanning your grid is to use the grid-span mixin. The two inputs that are needed are $span and $location referring to how many columns you want to span, and what column you would like to start your calculation at. This combination of number of columns you are spanning and where you are starting your calculation from is your grid span. For symmetric grids, $location will not necessarily determine the total width of your grid span, but it is very important for asymmetric grids as the width of your grid span will change depending where on the grid you are. That being said, it is also important to know how your chosen output style will use both $span and $location. Let's take a look at a few examples:
// Singularity 1.0 Syntax
$grids: 1 2 3 4 5;
$gutters: 1/3;
$output: 'float';
// Singularity 1.2+ Syntax
@include add-grid(1 2 3 4 5);
@include add-gutter(1/3);
@include sgs-change('output', 'float');
// Span 1 column, starting at the 2nd column
.span-1-2 {
@include grid-span(1, 2);
}
// Span 3 columns, starting at the 5th column
.span-3-5 {
@include grid-span(3, 5);
}Finally, some Output Styles may have additional options that need to be taken into consideration. See the Output Styles documentation to see if an output has additional options it supports that should be passed in. If one does, simply pass the needed options in to the Grid Span mixin using the $options variable.
The Grid Span mixin also takes optional inputs to allow you to override the global contexts for grids, gutters, and output styles on an as-needed basis. The first optional parameter, $grid, overrides the global grid context, $gutter the global gutter context, and $output-style the global output style context. Some examples of overriding are presented below:
// Singularity 1.0 Syntax
$grids: 1 2 3 4 5;
$gutters: 1/3;
$output: 'isolation';
// Singularity 1.2+ Syntax
@include add-grid(1 2 3 4 5);
@include add-gutter(1/3);
@include sgs-change('output', 'isolation');
// Overrides the global Grid context provided by $grids with a 12 column symmetric grid
.override-grid-symmetric {
@include grid-span(1, 2, 12);
}
// Overrides the global Grid context provided by $grids with a 2 4 5 asymmetric grid
.override-grid-asymmetric {
@include grid-span(1, 2, (2 4 5));
}
// Overrides the global Gutter context provided by $gutters with a .25 gutter
.override-gutter {
@include grid-span(1, 2, $gutter: .25);
}
// Overrides the global Output Style context provided by $output the Isolation output style
.override-output-style {
@include grid-span(1, 2, $output-style: 'float');
}
// Overrides the global Grid context provided by $grids with a 12 column symmetric grid, the global Gutter context by $gutters with a .25 gutter, and the global Output Style context provided by $output with the Isolation output style
.override-all-the-things {
@include grid-span(1, 2, 12, .25, 'float');
}If you are going to be overriding contexts for multiple Grid Spans near each other, it may be easier to override them as a group. To accomplish this, there is a layout mixin that takes three parameters, $grid, $gutter, $output-style, and $gutter-style. Any of the parameters your pass in will replace their global context while inside the mixin, any you don't will inherit the global context. You can also nest layout mixins; the context will inherit up the chain. While inside of a layout mixin, if you override the context in your grid-span call, that will take precedence.
// Singularity 1.0 Syntax
$grids: 12;
$gutters: 1/3;
// Singularity 1.2+ Syntax
@include add-grid(12);
@include add-gutter(1/3);
#foo {
// Grid context: 12
// Gutter context: 1/3
// Output Style: Isolation
@include grid-span(3, 1);
@include layout(2 8 2) {
// Grid context: 2 8 2
// Gutter context: 1/3
// Output Style: Isolation
@include grid-span(1, 2);
@include layout($gutter: .25) {
// Grid context: 2 8 2
// Gutter context: .25
// Output Style: Float
@include grid-span(2, 2, $output-style: 'float');
}
}Singularity also provides the layout-at mixin, which works in a similar way to layout with the exception that it also takes a Breakpoint as an option, allowing one to specify a media query and layout to use all at once. The two arguments it takes are $layout and $breakpoint. The $layout argument can either be a grid definition, or it can be a map where the keys are the stringified versions of the layout mixin arguments (no $, dashes to spaces). The $breakpoint argument accepts any valid Breakpoint media query as that is what will be called.
@include add-grid(12);
@include add-gutter(1/3);
.foo {
@include layout-at(2 4 6, 500px) {
// Everything in here will be wrapped in a `min-width: 500px` media query
// and use a `2 4 6` grid with the Global Grid Context's `1/3` gutter
}
@include layout-at((
'grid': 1 3 5,
'gutter': .5
), 700px) {
// Everything in here will be wrapped in a `min-width: 700px` media query
// and use a `1 3 5` grid with `.5` gutter
}
}Output Styles may choose to optionally provide an output-specific span mixin to make working with their specific quirks easier. These mixins are all wrappers of grid-span with additional syntactical sugar and a fixed Output Style. Both of Singularity Core's Output Styles, Isolation and Float, provide output-specific span mixins to make using them easier. In all of the examples below, $output-style is included in the equivalent grid-span call to show what the full mixin call under the hood would look like. The global $output context could make this inclusion irrelevant in many cases.
isolation-span is nearly identical to grid-span, with the exception that the third argument is $clear instead of $grid, allowing for easier control over the clear direction. $grid and $gutter are also available for you to pass in as in the normal grid-span.
// Singularity 1.0 Syntax
$grids: 1 3 5 7 9;
$gutters: 1/3;
// Singularity 1.2+ Syntax
@include add-grid(1 3 5 7 9);
@include add-gutter(1/3);
// Simplifies use of $options for Isolation Output Style
#foo {
@include grid-span(2, 3, $output-style: 'isolation', $options: 'both');
}
#foo {
@include isolation-span(2, 3, 'both');
}
// You can also pass in $grid and $gutter
#bar {
@include grid-span(2, 3, (2 8 2 1), .25, 'isolation');
}
#bar {
@include isolation-span(2, 3, $grid: (2 8 2 1), $gutter: .25);
}
#baz {
@include grid-span(2, 3, (2 8 2 1), .25, 'right');
}
#baz {
@include isolation-span(2, 3, 'right', (2 8 2 1), .25);
}float-span is functionally identical to grid-span for asymmetric grids, but has some additions for symmetric grids. Because the common way to work with symmetric grids when using the Float output method is to walk along a row, and each column is the same width, when using float-span and a symmetric grid, $location is optional. Additionally, you can pass either 'last' or 'omega' in for $location in the call and float-span will make sure that item is the last in the row. You can also pass in either 'first' or 'alpha' to $location to force a new row to start.
// Singularity 1.0 Syntax
$grids: 12;
$gutters: 1/3;
// Singularity 1.2+ Syntax
@include add-grid(12);
@include add-gutter(1/3);
// Symmetric Grid, can call with only span!
.span {
@include grid-span(3, 1, $output-style: 'float');
}
.span {
@include float-span(3);
}
// Make an item the last in a row
.end-row {
@include grid-span(4, 9, $output-style: 'float');
}
.end-row {
@include float-span(4, 'last');
}
// Force a new row
.new-row {
@include grid-span(2, 1, $output-style: 'float');
clear: both;
}
.new-row {
@include float-span(2, 'first');
}
// You can also pass in $grid and $gutter
.float-all {
@include grid-span(3, 1, 5, .25, 'float');
}
.float-all {
@include float-span(3, $grid: 5, $gutter: .25);
}
// Singularity 1.0 Syntax
$grids: 2 8 2;
$gutters: 1/3;
// Singularity 1.2+ Syntax
@include add-grid(2 8 2);
@include add-gutter(1/3);
// Asymmetric grids need location included, making it nearly identical to grid-span
.asymmetric {
@include grid-span(2, 2, $output-style: 'float');
}
.asymmetric {
@include float-span(2, 2);
}