4 undo Undo module

The undo module for the Zen Grids system.

With responsive design, it is not uncommon to have wrapping elements that are have grid styling at some breakpoints, but not at other breakpoints. The undo module provides a set of mixins that allow you to undo the CSS of other Zen Grids mixins.

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

4.1 undo.undo-zen-grid-container undo-zen-grid-container()

Apply this to undo the grid container styling applied with zen-grid-container().

NOTE: if $context is flow, the zen-grid-container() set the left and right padding to 0 to prevent it from messing up the alignment of the nested grid. Since Zen Grids doesn't know what you previously used for this element's padding, there is no way to undo that automatically; you will need to manually reset the padding.

Common usage:

@include undo-zen-grid-container();

or:

@include undo-zen-grid-container(grid-item);
Parameters:
  • $context
    If this grid is nested inside another grid, the $context parameter can be used to align the nested grid with the parent grid. It can be set to none, grid-item, or flow.
    Defaults to: none
  • $gutters
    The width of the gutters for this container. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $gutter-method
    The gutter method to use for this container. See the docs for $zen-gutter-method.
    Defaults to: $zen-gutter-method
  • $direction
    The direction to use for this container. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $switch-direction
    Whether to switch the default direction for this container. See the docs for $zen-switch-direction.
    Defaults to: $zen-switch-direction
  • $rtl-selector
    The RTL selector for this container. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
Source: zen-grids/_undo.scss, line 12

4.2 undo.undo-zen-grid-item undo-zen-grid-item()

Apply this to undo the grid item styling applied with zen-grid-item().

Common usage:

@include undo-zen-grid-item();
Parameters:
  • $direction
    The floating direction to use for this grid item. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $gutters
    The width of the gutters for this grid item. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $gutter-method
    The gutter method to use for this grid item. See the docs for $zen-gutter-method.
    Defaults to: $zen-gutter-method
  • $box-sizing
    The box sizing to use for this grid item. See the docs for $zen-box-sizing.
    Defaults to: $zen-box-sizing
  • $switch-direction
    Whether to switch the default direction for this grid item. See the docs for $zen-switch-direction.
    Defaults to: $zen-switch-direction
  • $rtl-selector
    The RTL selector for this grid item. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
  • $include-base
    Whether to auto-include the undo-zen-grid-item-base() mixin. See the docs for $zen-auto-include-grid-item-base.
    Defaults to: $zen-auto-include-grid-item-base
Source: zen-grids/_undo.scss, line 104

4.3 undo.undo-zen-new-row undo-zen-new-row()

Apply this to prevent a grid item from starting a new row by undoing the styling applied with zen-new-row().

Common usage:

@include undo-zen-new-row();

or:

@include undo-zen-new-row(right);
Parameters:
  • $clear
    The clearing direction to use for this grid item. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $rtl-selector
    The RTL selector for this grid item. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
Source: zen-grids/_undo.scss, line 203

4.4 undo.undo-zen-grid-item-base undo-zen-grid-item-base()

Undoes the standard set of properites for grid items in the layout. Apply this to undo the styling applied with zen-grid-item-base().

NOTE: if $box-sizing is content-box, the zen-grid-item-base() will add left and right borders and padding of 0 !important since non-zero values would break the layout. There is no way to undo that automatically. You'll have to manually set the borders and padding to their original values.

Common usage:

@include undo-zen-grid-item-base();
Parameters:
  • $gutters
    The width of the gutters for this grid item. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $gutter-method
    The gutter method to use for this grid item. See the docs for $zen-gutter-method.
    Defaults to: $zen-gutter-method
  • $box-sizing
    The box sizing to use for this grid item. See the docs for $zen-box-sizing.
    Defaults to: $zen-box-sizing
  • $switch-direction
    Whether to switch the default direction for this grid item. See the docs for $zen-switch-direction.
    Defaults to: $zen-switch-direction
  • $rtl-selector
    The RTL selector for this grid item. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
Source: zen-grids/_undo.scss, line 150

4.5 undo.undo-zen-apply-gutter-padding undo-zen-apply-gutter-padding()

Undoes the gutter on a grid item when using the padding gutter method. Apply this to undo the gutter padding styles applied with zen-apply-gutter-padding().

Common usage:

@include undo-zen-apply-gutter-padding();
Parameters:
  • $gutters
    The width of the gutters for this grid item. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $direction
    The direction to use for this grid item. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $switch-direction
    Whether to switch the default direction for this grid item. See the docs for $zen-switch-direction.
    Defaults to: $zen-switch-direction
  • $rtl-selector
    The RTL selector for this grid item. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
Source: zen-grids/_undo.scss, line 233