/**
* @namespace Grid
*/
/**
* @namespace Grid:grid-container
*/
/**
* Renders the basic properties of a grid container, which is the bracket element for elements, which are
* to be placed in a grid, thereby making the container, more or less, "the grid itself".
*
* The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.
*
* @memberof Grid:grid-container
* @function
* @name grid-container
* @alias grid-container
*
* @see grid-item
*
* @example
* grid-container()
*/
grid-container()
display grid
grid-auto-flow row
grid-template-columns repeat($jig---grid-config.columns, 1fr)
attributes-for-breakpoints({
'grid-column-gap' : hash-get-deep($jig---grid-config, 'gutters', 'horizontal'),
'grid-row-gap' : hash-get-deep($jig---grid-config, 'gutters', 'vertical')
})
/**
* @namespace Grid:grid-item
*/
/**
* Renders the basic properties of a grid item, which is an item inside a grid, being placed according to
* pre-defined columns.
*
* The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are
* several means of definition. Either just giving it a column-based width, aligning it at the end of other,
* already existing items, or defining a specific area it should cover, by explicitly defining a start and end column
* or a combination of both.
*
* Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to
* our concepts.
*
* @memberof Grid:grid-item
* @function
* @name grid-item
* @alias grid-item
*
* @param {?Number} [$span=null] - the width of the item in columns
* @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span
* @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span
* @param {?Number} [$row-span=null] - the height of the item in rows
* @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span
* @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span
*
* @see grid-container
* @see grid-item-align
*
* @example
* grid-item(12)
* grid-item(6, 6)
* grid-item(null, 2, 2)
* grid-item(6, null, null, 2)
* grid-item(6, null, null, null, 0, 5)
*/
grid-item(
$span=null,
$start=null,
$end=null,
$row-span=null,
$row-start=null,
$row-end=null
)
if ($span == null) and ($start == null)
grid-column-end span $jig---grid-config.columns
else
if $span != null
grid-column-end span $span
if $start != null
grid-column-start ($start + 1)
if ($end != null) and ($span == null)
grid-column-end ($end + 1)
if ($row-span != null) or ($row-start != null)
if $row-span != null
grid-row-end span $row-span
if $row-start != null
grid-row-start ($row-start + 1)
if ($row-end != null) and ($row-span == null)
grid-row-end ($row-end + 1)
/**
* @namespace Grid:grid-item-align
*/
/**
* Renders properties of a grid item, to define the item's alignment inside the area defined for the item using
* the grid-item mixin. The usage of this only make sense for grid items.
*
* @memberof Grid:grid-item-align
* @function
* @name grid-item-align
* @alias grid-item-align
*
* @param {String} [$horizontal=null] - "left"/"start", "right"/"end", "middle"/"center" or "full"/"stretch"
* @param {String} [$vertical=null] - "top"/"start", "bottom"/"end", "middle"/"center" or "full"/"stretch"
*
* @see grid-item
*
* @example
* grid-item-align('left')
* grid-item-align(center, center)
* grid-item-align(null, 'full')
*/
grid-item-align($horizontal=null, $vertical=null)
if $horizontal == 'left'
$horizontal = 'start'
else if $horizontal == 'right'
$horizontal = 'end'
else if $horizontal == 'middle'
$horizontal = 'center'
else if $horizontal == 'full'
$horizontal = 'stretch'
if $vertical == 'top'
$vertical = 'start'
else if $vertical == 'bottom'
$vertical = 'end'
else if $vertical == 'middle'
$vertical = 'center'
else if $vertical == 'full'
$vertical = 'stretch'
if $horizontal != null
justify-self unquote($horizontal)
if $vertical != null
align-self unquote($vertical)
/**
* @namespace Grid:gutter-value
*/
/**
* Returns the value of the defined distance between two columns/rows for a breakpoint.
*
* The main usage for this is, to define a property value based on the current gutter.
* This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint
* using auto-breakpoint detection, primarily rather working with the value itself. For other cases:
* Remember, that that you can simply use named parameters.
*
* @memberof Grid:gutter-value
* @function
* @name gutter-value
* @alias gutter-value
*
* @param {Number} [$factor=1.0] - factor to apply to the finally evaluated gutter value, most helpful to get half a gutter for example
* @param {Number} [$add=0] - value to add to the finally evaluated gutter value, may also be negative to subtract
* @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
* @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
* @returns {Number} the determined gutter value with applied factor and/or addition
* @throws error if no gutter value could be determined, based on given breakpoint and/or direction
*
* @example
* +breakpoint(medium)
* padding-left gutter-value(0.5)
* margin-top gutter-value($direction:'vertical', $breakpoint:'small')
*/
gutter-value(
$factor=1.0,
$add=0,
$direction='horizontal',
$breakpoint='auto'
)
$direction = to-str($direction)
$breakpoint = to-str($breakpoint)
$gutter = hash-get-deep($jig---grid-config, 'gutters', $direction)
$res = null
if $gutter != null
if type($gutter) == 'object'
$res = breakpoint-value($gutter, $breakpoint)
else
$res = $gutter
if $res == null
error('jig:gutter-value | could not resolve gutter, check direction and/or breakpoint')
return ($res * $factor) + $add