1 grids Grids module

The “grids” module contains most of the configurable variables and mixins you’ll need to create a layout.

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

1.1 grids.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 11

1.1.1 grids.variables.zen-columns $zen-columns

Specifies the number of columns in the grid. Defaults to 1 as a hat tip to mobile first designs. You should set this variable each time you want to use a different grid for a set of media queries.

$zen-columns: 1 !default;
Source: zen-grids/_variables.scss, line 19

1.1.2 grids.variables.zen-gutters $zen-gutters

Specifies the width of each gutter, the horizontal space between two adjacent grid items.

For a sense of aesthetics, we suggest this value could be proportional to your base font by setting $zen-gutters equal to a multiple of your base line height.

If the $zen-gutter-method is set to margin, the unit of measurement of the gutters should be the same as the unit of measurement of the $zen-grid-width, e.g. if $zen-grid-width: 100%, then $zen-gutters should also be measured in %.

$zen-gutters: 20px !default;
Source: zen-grids/_variables.scss, line 32

1.1.3 grids.variables.zen-gutter-method $zen-gutter-method

Specifies the type of gutters used for the grid, can be set to padding (the default) or margin. If the “padding” gutter method is chosen, half of the gutter will be placed on each side of a grid item (as padding). This means there will be a full gutter between the content of adjacent grid items and half of a gutter on each edge of the grid.

A grid item.

A grid item.

A grid item.

If the “margin” gutter method is chosen, a full gutter will be placed between each grid item (as margin), but no gutter will be placed on each edge of the grid.

A grid item.

A grid item.

A grid item.

Note: that the “margin” gutter method requires that the gutters and the width of the grid have the same unit of measurement, e.g. both be measured in % or both in px. This means that a fluid, responsive layout using the “margin” gutter method will have gutters that are %-based. This is why the default gutter method is “padding”; the grid can be %-based, while the gutters remain a fixed measurement (like 20px or 5 em) at all viewport sizes.

$zen-gutter-method: padding !default;
Source: zen-grids/_variables.scss, line 49

1.1.4 grids.variables.zen-auto-include-grid-item-base $zen-auto-include-grid-item-base

You can generate more efficient CSS if you set this to false and manually apply the zen-grid-item-base() mixin to all grid items (and flow items) from within a single ruleset.

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

1.1.5 grids.variables.zen-box-sizing $zen-box-sizing

Specify the CSS3 box-sizing method. The default, "border-box", is compatible with all modern browsers, including IE 8 and later.

Some developers use a universal selector to apply CSS’s “border-box” box sizing to all elements. Paul Irish describes this method in more detail in his blog post “* { Box-sizing: Border-box } FTW”. Since Zen Grids will automatically add box-sizing: border-box; to those elements that need it, you can prevent it from outputting redundant box-sizing properties by setting $zen-box-sizing to universal-border-box.

To add IE6 and IE7 support, you’ll need to set $support-for to (ie: 6) and then either use a polyfill (see $box-sizing-polyfill-path) or set $zen-box-sizing to "content-box".

Note: if $zen-box-sizing is set to "content-box", then $zen-gutters will need to use the same unit of measurement as the $zen-grid-width.

$zen-box-sizing: border-box !default;
Source: zen-grids/_variables.scss, line 106
Source: zen-grids/_variables.scss, line 130

1.1.6.1 grids.variables.fixed.zen-grid-width $zen-grid-width

Specify the width of the entire grid. Defaults to 100% for a fluid responsive design, but you can change this to any fixed value (using px or em, etc.) if you need a fixed grid.

$zen-grid-width: 100% !default;
Source: zen-grids/_variables.scss, line 136
Source: zen-grids/_variables.scss, line 152

1.1.7.1 grids.variables.rtl.zen-direction $zen-direction

Specify the default floating direction for zen grids’ mixins. If you are only building RTL layouts (and not LTR layouts), you should set this to right.

$zen-direction: left !default;
Source: zen-grids/_variables.scss, line 158

1.1.7.2 grids.variables.rtl.zen-rtl-selector $zen-rtl-selector

If you wish to output both LTR layouts and RTL layouts simultaneously, you can specify the parent selector that should be used to trigger an RTL override for any of Zen Grids' direction-specific CSS.

For example, setting this:

$zen-rtl-selector: '[dir="rtl"]';

After building a layout with Zen Grids' mixins, the CSS output will look similar to this:

.my-layout-column {
  margin-left: 20%;
  margin-right: -100%;
}
[dir="rtl"] .my-layout-column {
  margin-left: -100%;
  margin-right: 20%;
}
$zen-rtl-selector: false !default;
Source: zen-grids/_variables.scss, line 169

1.1.7.3 grids.variables.rtl.zen-switch-direction $zen-switch-direction

Reverse the floating direction in all of zen grids’ mixins.

If you are creating LTR and RTL layouts that are in separate style sheets, this helper variable can be used to automatically create one set of layouts based on the other set of layouts. For example:

$zen-switch-direction: true;
@import "an-LTR-layout";

In the above example, the existing LTR layout in the an-LTR-layout.scss file is used to create the corresponding RTL layout by first setting the $zen-switch-direction variable to true and then importing the LTR layout file.

$zen-switch-direction: false !default;
Source: zen-grids/_variables.scss, line 197

1.1.8 grids.variables.legacy Legacy IE support variables

IE 6 and 7 require special CSS properties in order for Zen Grids to work with such old browsers.

If you need IE 6/7 support, you will need to install:

  1. support-for Sass module
  2. box-sizing polyfill's boxsizing.htc
Source: zen-grids/_variables.scss, line 222

1.1.8.1 grids.variables.legacy.support-for $support-for

Specify the minimum browser versions that must be supported. Currently, Zen Grids only uses the ie value to determine if additional CSS properties are needed for IE 6 and IE 7 support. For example, to add support for IE 7, set $support-for: (ie: 7);

This variable is only used if the support-for module is loaded into your Sass style sheet. Otherwise, legacy IE support will not be included in your layouts. Zen Grids does not require support-for, but will use it if available.

$support-for: (
  chrome:  -4,
  edge:    -4,
  firefox: -4,
  ie:      9,
  opera:   -4,
  safari:  -4,
  '*':     -4,
) !default;
Source: zen-grids/_variables.scss, line 247

1.1.8.2 grids.variables.legacy.box-sizing-polyfill-path $box-sizing-polyfill-path

The box-sizing polyfill for IE 6/7 requires an absolute path to the boxsizing.htc file. See https://github.com/Schepp/box-sizing-polyfill

$box-sizing-polyfill-path: '' !default;
Source: zen-grids/_variables.scss, line 236

1.2 grids.zen-grid-container zen-grid-container()

Apply this to create a grid container element.

If this grid is nested inside another grid, the $context parameter can be used to align the nested grid with the parent grid. $context can be set to none (the default), grid-item, or flow.

If the nested grid’s container is a child element of the parent grid’s grid item, set $context: flow.

Otherwise, if the nested grid’s container is the same element as the parent grid’s grid item, set $context: grid-item and apply this mixin after the zen-grid-item() mixin is applied for the parent grid. This mixin removes any gutters on the container since the nested grid will have its own gutters.

Common usage:

@include zen-grid-container();

or:

@include 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/_grids.scss, line 41

1.3 grids.zen-grid-item zen-grid-item()

Apply this to each grid item. Set the $column-span to the number of columns that the grid item spans. And set the $column-position to the column number the grid item starts on.

To make the grid item float from the right, set the $direction to right; it defaults to left (the value of $zen-direction.) For grid items that are floated right, the $column-position is counted from the right instead of from the left.

Common usage:

// The grid item spans 2 columns starting from the 3rd column from the left,
// e.g. It spans columns 3 and 4 counting from the left.
@include zen-grid-item($column-span: 2, $column-position: 3);

or:

// The grid item spans 2 columns starting from the 3rd column from the right,
// e.g. It spans columns 3 and 4 counting from the right.
@include zen-grid-item(2, 3, right);
Parameters:
  • $column-span
    Required. The number of columns the grid item will span.
  • $column-position
    Required. The column number the grid item starts on.
  • $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 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/_grids.scss, line 138

1.4 grids.zen-new-row zen-new-row()

Apply this to a grid item so that it starts a new row.

Common usage:

@include zen-new-row();

or:

@include zen-new-row(right);
Parameters:
  • $clear
    The floating 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/_grids.scss, line 311

1.5 grids.zen-grid-item-base zen-grid-item-base()

Applies a standard set of properties for grid items in the layout.

See the documentation for the $zen-auto-include-grid-item-base and $zen-auto-include-flow-item-base variables for when to use this mixin.

Common usage:

@include 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
  • $direction
    The floating 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/_grids.scss, line 234

1.6 grids.zen-rtl zen-rtl()

Includes inline Right-To-Left language support if the $zen-rtl-selector variable is set to [dir="rtl"] or some other useful CSS selector.

Since $zen-rtl-selector defaults to false, inline Right-To-Left language support is off by default.

Parameters:
  • $selector
    The RTL selector for this grid item. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
Source: zen-grids/_grids.scss, line 14

1.7 grids.zen-apply-gutter-padding zen-apply-gutter-padding()

Applies the gutter to a grid item when using the padding gutter method.

Common usage:

@include zen-apply-gutter-padding();
Parameters:
  • $gutters
    The width of the gutters. See the docs for $zen-gutters.
    Defaults to: $zen-gutters
  • $direction
    The floating 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. See the docs for $zen-rtl-selector.
    Defaults to: $zen-rtl-selector
Source: zen-grids/_grids.scss, line 347