2 flow Flow module

The "Flow" module for the Zen Grids system allows an item in the normal flow of a document to be aligned to the grid, e.g. an image can be aligned to the grid.

To understand this module, it is important to understand the CSS definition of “normal flow”. According to CSS, all content is part of the normal flow by default. For example, paragraph text and images are part of the normal flow.

Positioned elements (floats, absolute positioning, etc.) are not part of the normal flow.

Zen Grid’s grid items are also positioned elements and, therefore, are no longer part of the normal flow.

For example, a layout designer will often make one of Zen Grid’s grid items span multiple columns. The elements within that grid item are part of the normal flow and span the same number of columns as their containing grid item. The layout designer may wish to have an element in the normal flow align to one or more of the columns within the grid item. For example, if a grid item spans 3 columns, the layout designer may want to have all of the images within it to align to the first column inside that grid item and have other flow items wrap around those images.

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

2.1 flow.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 275

2.1.1 flow.variables.zen-auto-include-flow-item-base $zen-auto-include-flow-item-base

This variable works the same as $zen-auto-include-grid-item-base, except it is used for flow items instead of grid items. You can generate more efficient CSS if you set this to false and manually apply the zen-grid-item-base() mixin to all flow items from within a single ruleset.

$zen-auto-include-flow-item-base: true !default;
Source: zen-grids/_variables.scss, line 283

2.2 flow.zen-float zen-float()

Apply this to flow items that need to be floated.

Using this mixin is longer than just typing float: left;. However, this mixin integrates with the RTL variables and mixins so that the direction of floating can be changed automatically.

Common usage:

@include zen-float();

or:

@include zen-float(right);
Parameters:
  • $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
Source: zen-grids/_flow.scss, line 267

2.3 flow.zen-flow-item-base zen-flow-item-base()

Applies a standard set of properties to flow items that are aligned to the grid.

Common usage:

@include zen-flow-item-base();
Parameters:
  • $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
  • $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
Source: zen-grids/_flow.scss, line 233

2.4 flow.zen-flow-item-width zen-flow-item-width()

Apply this to an HTML item that is in the normal flow of a document to help align it to the grid. Set the $column-span to the number of columns that the HTML element should span. For responsive layouts with a percentage-based grid width, set the $parent-column-span to the number of columns that the parent element spans; fixed-unit layouts using px, em, etc. do not need to specify this.

Unlike the zen-grid-item() mixin, this mixin does not float the HTML item; see the related zen-float() mixin. This mixin also does not have a half-gutter on each side. By default, it has no gutter in the "alpha position" (the left side) and a full gutter in the "omega position" (the right side.) You can turn on or off the alpha and omega gutters by setting the $alpha-gutter and $omega-gutter parameters to true or false.

Note: when the $direction is set to right (for RTL languages), the alpha position is on the right and the omega position is on the left.

Common usage:

@include zen-flow-item-width(
  [column-span],
  $parent-column-span: [integer]
);

or:

@include zen-flow-item-width(
  [column-span],
  $parent-column-span: [integer],
  $alpha-gutter: [boolean],
  $omega-gutter: [boolean]
);

or for fixed length (em, px, etc.) layouts:

@include zen-flow-item-width(
  [column-span]
);

or:

@include zen-flow-item-width(
  [column-span],
  $alpha-gutter: [boolean],
  $omega-gutter: [boolean]
);
Parameters:
  • $column-span
    Required. The number of columns the flow item will span.
  • $parent-column-span
    Required for %-based layouts, but not for fixed-width layouts. The number of columns the parent grid item spans.
    Defaults to: false
  • $alpha-gutter
    Whether the flow item should have a gutter on its left (or, for RTL layouts, on its right.)
    Defaults to: false
  • $omega-gutter
    Whether the flow item should have a gutter on its right (or, for RTL layouts, on its left.)
    Defaults to: true
  • $direction
    The direction to use. See the docs for $zen-direction.
    Defaults to: $zen-direction
  • $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
  • $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
  • $include-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
Source: zen-grids/_flow.scss, line 20