Reference documentation

This documentation is for the new 2.0 version of Zen Grids. Pardon our dust while we get the docs up-to-date.

For the previous Zen Grids 1.x documentation, see v1.zengrids.com.

Overview #

The Zen Grids system is organized into a handful of modules that can be imported as needed. The basic functionality is contained in the “grids” and “helper functions” module. Optional functionality can be found in the “background” and “flow” modules.

The “grids” module #

This is one of the default modules imported using:

@import "zen-grids";

The grids module contains all the configurable variables and mixins you’ll need to create a layout. It will also automatically import the “helper functions” module so that you have access to the functions you’ll need when creating a layout.

The “helper functions” module #

This is one of the default modules imported using:

@import "zen-grids";

When combined with the grids module, you will have access to all the configurable variables, mixins, and functions you’ll need to create a layout.

@import "zen-grids/functions";

The “background” module #

During development, it is often useful for the layout designer to see the grid columns as the grid items are arranged on the page. The “background” module can provide a background image for use during grid development. It can be imported using:

@import "zen-grids/background";

The “flow” module #

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.

Often, a layout designer will 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 grid item container. 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.

The “flow” module contains helper mixins to help align normal flow items within a grid item. It can be imported using:

@import "zen-grids/flow";