3 layout Layout module

The "Layout" module for the Zen Grids system.

When building a grid system for your site, properties (like number of columns or gutter size) will need different values at different viewport widths. In previous versions of Zen Grids, this meant changing the Zen Grids' global variables each time you wanted to build a layout at a different viewport size. With the layout module, you can instead set grid system properties that override your default global variables within the scope of the layout mixin.

For example:

$zen-columns: 1; // Default to one column for mobile layout.
@include zen-layout($columns: 3) {
  // $zen-columns is set to 3 inside this block and can be used to build a
  // layout for the following breakpoint.
  @media screen and (min-width: 777px) {
    .sidebar {
      // The sidebar will span the first column of the 3 columns defined.
      @include zen-grid-item(1, 1);
    }
  }
}
// $zen-columns is back to 1 after the zen-layout() block.
Source: zen-grids/_layout.scss, line 1

3.1 layout.variables Configurable variables

Zen Grids comes with several configuration variables that affect what CSS its mixins and functions output. The default values of these variables are all set using the “guarded assignment” flag, !default. So you can safely set those values before you @import Zen Grids and your values will be respected.

Source: zen-grids/_variables.scss, line 300

3.1.1 layout.variables.zen-layouts $zen-layouts

A map of layout names and their corresponding properties. Any zen grids variable name can be used as a property of a named layout, but the zen- prefix should be removed.

For example:

$zen-layouts: (
  medium: (
    columns: 3,    // Equivalent of $zen-columns for this layout.
    gutters: 15px, // Equivalent of $zen-gutters for this layout.
  ),
);

When a named layout is given to the $layout parameter of one of the layout module's mixins that layout's properties will be used instead of any global variables for the entirety of the mixin's @content.

$zen-layouts: () !default;
Source: zen-grids/_variables.scss, line 308

3.2 layout.zen-layout zen-layout(...)

Should be used to add a wrapping block where its parameters will override the corresponding global $zen-* variables within it.

Common usage:

@include zen-layout(m) {
  // Use other Zen Grids mixins and layouts without changing global vars.
}

or:

@include zen-layout($gutters: 0) {
  // The code in this block will see `$zen-gutters: 0`, but code after this
  // block will see the usual value of that global variable.
}
Parameters:
  • $layout
    Optionally specify the name of the layout from $zen-layouts to use. See the docs for $zen-layouts.
    Defaults to: null
  • $columns
    The number of columns. 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
  • $direction
    The direction to use. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $switch-direction
    Whether to switch the default direction. See the docs for $zen-switch-direction.
    Defaults to: $zen-switch-direction
  • $rtl-selector
    The RTL selector for this background. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
  • $auto-include-grid-item-base
    Whether to auto-include the zen-grid-item-base() mixin. See the docs for $zen-auto-include-grid-item-base.
    Defaults to: $zen-auto-include-grid-item-base
  • $auto-include-flow-item-base
    Whether to auto-include the zen-flow-item-base() mixin. See the docs for $zen-auto-include-flow-item-base.
    Defaults to: $zen-auto-include-flow-item-base
  • $grid-color
    The column color to use for the background grid image. See the docs for $zen-grid-color.
    Defaults to: $zen-grid-color
  • $grid-numbers
    Specify the set of images used for the numbering of the columns in the background grid image. See the docs for $zen-grid-numbers.
    Defaults to: $zen-grid-numbers
Source: zen-grids/_layout.scss, line 29

3.3 layout.zen-breakpoint zen-breakpoint(...)

Combines zen-layout() with the Breakpoint module's breakpoint() mixin.

Instead of nesting zen-layout() with breakpoint() like this:

@include zen-layout($layout: 'm') {
  @include breakpoint($medium) {
    // Do something.
  }
}

You can use the zen-breakpoint() mixin like this:

@include zen-breakpoint($medium, $layout: 'm') {
  // Do something.
}
Parameters:
  • $query
    Required. This parameter is passed on to the breakpoint() mixin.
  • $no-query
    This parameter is passed on to the breakpoint() mixin.
    Defaults to: false
  • $layout
    Optionally specify the name of the layout from $zen-layouts to use. See the docs for $zen-layouts.
    Defaults to: null
  • $columns
    The number of columns. 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
  • $direction
    The direction to use. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $switch-direction
    Whether to switch the default direction. See the docs for $zen-switch-direction.
    Defaults to: $zen-switch-direction
  • $rtl-selector
    The RTL selector for this background. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
  • $auto-include-grid-item-base
    Whether to auto-include the zen-grid-item-base() mixin. See the docs for $zen-auto-include-grid-item-base.
    Defaults to: $zen-auto-include-grid-item-base
  • $auto-include-flow-item-base
    Whether to auto-include the zen-flow-item-base() mixin. See the docs for $zen-auto-include-flow-item-base.
    Defaults to: $zen-auto-include-flow-item-base
  • $grid-color
    The column color to use for the background grid image. See the docs for $zen-grid-color.
    Defaults to: $zen-grid-color
  • $grid-numbers
    Specify the set of images used for the numbering of the columns in the background grid image. See the docs for $zen-grid-numbers.
    Defaults to: $zen-grid-numbers
Source: zen-grids/_layout.scss, line 173
Source: zen-grids/_layout.scss, line 253

3.5 layout.zen-respond-to zen-respond-to(...)

Combines zen-layout() with the Breakpoint module's respond-to() mixin.

Instead of nesting zen-layout() with respond-to() like this:

@include zen-layout($layout: 'm') {
  @include respond-to('m') {
    // Do something.
  }
}

You can use the zen-respond-to() mixin like this:

@include zen-respond-to('m') {
  // Do something.
}

Note that the 'm' in the above example uses the same name in the $breakpoints map as is used in the $zen-layouts map.

You can use a differently-named layout by explicitly specifying the $layout parameter like this:

@include zen-respond-to('m', $layout: 'medium') {
  // Do something.
}
Parameters:
  • $context
    Required. This parameter is passed on to the respond-to() mixin.
  • $no-query
    This parameter is passed on to the respond-to() mixin.
    Defaults to: false
  • $layout
    Optionally specify the name of the layout from $zen-layouts to use. See the docs for $zen-layouts.
    Defaults to: null
  • $columns
    The number of columns. 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
  • $direction
    The direction to use. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $switch-direction
    Whether to switch the default direction. See the docs for $zen-switch-direction.
    Defaults to: $zen-switch-direction
  • $rtl-selector
    The RTL selector for this background. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
  • $auto-include-grid-item-base
    Whether to auto-include the zen-grid-item-base() mixin. See the docs for $zen-auto-include-grid-item-base.
    Defaults to: $zen-auto-include-grid-item-base
  • $auto-include-flow-item-base
    Whether to auto-include the zen-flow-item-base() mixin. See the docs for $zen-auto-include-flow-item-base.
    Defaults to: $zen-auto-include-flow-item-base
  • $grid-color
    The column color to use for the background grid image. See the docs for $zen-grid-color.
    Defaults to: $zen-grid-color
  • $grid-numbers
    Specify the set of images used for the numbering of the columns in the background grid image. See the docs for $zen-grid-numbers.
    Defaults to: $zen-grid-numbers
Source: zen-grids/_layout.scss, line 301