6 background Background module

During site development, it’s often useful to have a background image that shows the columns of the grid. The "Background grid image" module for the Zen Grids system provides a mixin to set this background image.

Note: This module is not automatically loaded with @import "zen-grids";. Before using it, you must first import the module with:

@import "zen-grids/background";
Source: zen-grids/_background.scss, line 1

6.1 background.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 337

6.1.1 background.variables.display-zen-grid-background $display-zen-grid-background

Specifies whether the background grid image should be displayed.

Since the background grid image is only useful during development and during debugging, we need an easy way to turn off the background grid image without removing all the calls to zen-grid-background() from the code base. To turn off all background grid images, set $display-zen-grid-background to false.

$display-zen-grid-background: true !default;
Source: zen-grids/_variables.scss, line 380

6.1.2 background.variables.zen-grid-color $zen-grid-color

Specify the color used in the background grid image produced by the zen-grid-background() mixin.

$zen-grid-color: #ffdede !default;
Source: zen-grids/_variables.scss, line 345

6.1.3 background.variables.zen-grid-number-images $zen-grid-number-images

Specify the set of images used for the numbering of the columns in the background grid image.

The default value of the $zen-grid-number-images variable is a list of the numbers 1 through 25, each rendered as an image and encoded as a data URI. Users who are crazy enough to use a 26-column grid or larger are free to extend this set.

$zen-grid-number-images: (url('data:image/png;base64, …), …) !default;
Source: zen-grids/_variables.scss, line 367

6.1.4 background.variables.zen-grid-numbers $zen-grid-numbers

Specify how to place the column numbers in the background grid image. Normally, column numbers are displayed across the top of the background grid image and then displayed in reverse order along the bottom of the background grid image. Can be set to: both, top, or none.

$zen-grid-numbers: both !default;
Source: zen-grids/_variables.scss, line 356

6.2 background.zen-grid-background zen-grid-background()

Adds a background grid image to an element’s background.

Since the mixins of Zen Grids use the $column-position for placement of grid items, the background grid image produced by this mixin numbers all of the columns. The $grid-numbers parameter specifies how to place the column numbers in the background grid image. By default, column numbers are displayed across the top of the background grid image and then displayed in reverse order along the bottom of the background grid image. $grid-numbers can be set to: both (the default), top (don’t display the bottom numbers), bottom (don’t display the top numbers), or none (don’t display any column numbers.)

Note: when the $direction is set to right (for RTL languages), the column numbers are displayed right-to-left along the top and left-to-right along the bottom.

The easiest way to align this background grid image to the actual grid is to apply this mixin to the same element that zen-grid-container() is applied to.

.layout-container {
  @include zen-grid-background();
  @include zen-layout(m) {
    @include zen-grid-background();
  }
  @include zen-layout(l) {
    @include zen-grid-background();
  }
}

Common usage:

@include zen-grid-background();
Parameters:
  • $columns
    The number of columns for this background. See the docs for $zen-columns.
    Defaults to: $zen-columns
  • $gutters
    The width of the gutters for this background. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $gutter-method
    The gutter method to use for this background. See the docs for $zen-gutter-method.
    Defaults to: $zen-gutter-method
  • $grid-width
    The width of the entire grid for this background. See the docs for $zen-gutter-method.
    Defaults to: $zen-grid-width
  • $grid-color
    The column color to use for the background grid image.
    Defaults to: $zen-grid-color
  • $grid-numbers
    Specify the set of images used for the numbering of the columns in the background grid image.
    Defaults to: $zen-grid-numbers
  • $direction
    The direction to use for this background. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $switch-direction
    Whether to switch the default direction for this background. 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
Source: zen-grids/_background.scss, line 19