Grid Helpers

There are a handful of functions available to you to get straight to the math behind Singularity. Use them anywhere you need to get math or context related to the grid.

Find Functions

It's dead easy to find the current Grid or Gutter Context. There are both find-grid and find-gutter functions that will return the current grid or gutter global context. Both functions accept an input; if that input does not equal false, the functions will return that input allowing for dynamic user input or use of the global context programmatically.

Span Functions

Span functions return a percentage related to what they are looking for. The output of these functions can be very useful for setting margins, paddings, or transforming into other units. These functions are the building blocks of Singularity, its Output Styles, and any Custom Output Styles.

Column Span

The column-span function will return a percentage equal to a span at a given location on the supplied grid. A span of one column will be the percentage of that stand-alone column, whereas a span of more than one column will include all of the gutters that the span crosses. Grid and gutter are optional parameters; if none are passed in it will use the current global context. The function is defined as follows:

@function column-span($span, $location, $grid: false, $gutter: false){}

Gutter Span

The gutter-span function will return a percentage equal to one gutter. The function's parameters are $gutter and $grid, both of which are optional; if none are passed in it will use the current global context. The function is defined as follows:

@function gutter-span($gutter: false, $grid: false){}

Grid Span

The grid-span function will return a percentage equal to the column-span at a given span and location plus a gutter-span. Grid and gutter are optional parameters; if none are passed in it will use the current global context. The function is defined as follows:

@function grid-span($span, $location, $grid: false, $gutter: false){}