5 functions Helper functions module

Helper functions for the Zen Grids mixins.

This module contains many Sass functions that you may find useful in your style sheet. These functions are also used internally by all of the mixins in Zen Grids.

Source: zen-grids/_functions.scss, line 1

5.1 functions.zen-half-gutter zen-half-gutter()

Returns a half gutter width.

If the gutter width is in pixels and is an odd number, then $gutter-side: left will return half of the gutter rounded down to a whole pixel; $gutter-side: right will return half of the gutter rounded up to a whole pixel. The $gutter-side defaults to $zen-direction.

Common usage:

.ex {
  property: zen-half-gutter();
  // or:
  property: zen-half-gutter($gutter-side: [left or right]);
}
Parameters:
  • $gutters
    The width of the gutters. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $gutter-side
    The side of the grid item the gutter is needed for.
    Defaults to: $zen-direction
  • $direction
    The direction to use. See the docs for $zen-direction.
    Defaults to: $zen-direction
Source: zen-grids/_functions.scss, line 15

5.2 functions.zen-unit-width zen-unit-width()

Returns the unit width of a single column in the grid.

Common usage:

.ex {
  property: zen-unit-width();
}
Parameters:
  • $columns
    The number of columns in the grid. See the docs for $zen-columns.
    Defaults to: $zen-columns
  • $gutters
    The width of the gutters. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $gutter-method
    The gutter method to use. See the docs for $zen-gutter-method.
    Defaults to: $zen-gutter-method
  • $grid-width
    The width of the entire grid. See the docs for $zen-gutter-method.
    Defaults to: $zen-grid-width
Source: zen-grids/_functions.scss, line 74

5.3 functions.zen-grid-item-width zen-grid-item-width()

Calculates the width of a grid item that spans the specified number of columns.

Common usage:

.ex {
  property: zen-grid-item-width([number]);
}
Parameters:
  • $column-span
    Required. The number of columns to calculate the width of.
  • $columns
    The number of columns in the grid. See the docs for $zen-columns.
    Defaults to: $zen-columns
  • $gutters
    The width of the gutters. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $gutter-method
    The gutter method to use. See the docs for $zen-gutter-method.
    Defaults to: $zen-gutter-method
  • $grid-width
    The width of the entire grid. See the docs for $zen-gutter-method.
    Defaults to: $zen-grid-width
  • $box-sizing
    The box sizing to use. See the docs for $zen-box-sizing.
    Defaults to: $zen-box-sizing
Source: zen-grids/_functions.scss, line 119

5.4 functions.zen-direction-switch zen-direction-switch()

Returns the opposite direction, given "left" or "right".

Common usage:

.ex {
  property: zen-direction-switch([left or right]);
}
Parameters:
  • $direction
    Required. The direction you want to switch.
Source: zen-grids/_functions.scss, line 160