$zen-column-count #

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-column-count: 1 !default;

$zen-gutter-width #

Specifies the width of the gutters; half of the gutter will be placed on each side of a grid item (as padding).

For a proper sense of aesthetics, we recommend this value be proportional to your base font by setting $zen-gutter-width equal to your base line height, $base-line-height.

$zen-gutter-width: 20px !default;

$zen-auto-include-item-base
$zen-auto-include-flow-item-base #

You can generate more efficient CSS if you set these 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-item-base: true !default;
$zen-auto-include-flow-item-base: true !default;

$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;

$zen-box-sizing #

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

To add IE6 and IE7 support, you’ll need to set $legacy-support-for-ie7 and $legacy-support-for-ie6 to true 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-gutter-width will need to use the same unit of measurement as the $zen-grid-width.

$zen-box-sizing: border-box !default;

$box-sizing-polyfill-path #

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

$box-sizing-polyfill-path: "" !default;

$legacy-support-for-ie7
$legacy-support-for-ie6 #

Toggles IE6/7 support. Since we’re defaulting to box-sizing: border-box, these are off by default. If the $box-sizing-polyfill-path variable is set, it will override these variables by assuming they were meant to be true.

$legacy-support-for-ie7: false !default;
$legacy-support-for-ie6: false !default;

$zen-float-direction #

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

$zen-float-direction: left !default;

$zen-reverse-all-floats #

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

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

$zen-reverse-all-floats: 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-reverse-all-floats variable to true and then importing the LTR layout file.

$zen-reverse-all-floats: false !default;

$zen-grid-color #

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

$zen-grid-color: #ffdede !default;

$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;

$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;

zen-grid-container() #

Apply this to the grid container element.

zen-nested-container() #

Apply this to any grid item that is also a grid container element for a nested grid. It must be applied after the zen-grid-item() mixin is applied. This mixin ensures the container does not have a gutter since the nested grid items will have their own gutters.

zen-grid-item( $column-span, $column-position )
zen-grid-item( $column-span, $column-position, $float-direction ) #

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 $float-direction to right; it defaults to left (the value of $zen-float-direction.) For grid items that are floated right, the $column-position is counted from the right instead of from the left.

Additional optional parameters and their defaults:

• $column-count: $zen-column-count
• $gutter-width: $zen-gutter-width
• $grid-width: $zen-grid-width
• $box-sizing: $zen-box-sizing
• $reverse-all-floats: $zen-reverse-all-floats
• $auto-include-item-base: $zen-auto-include-item-base

zen-grid-item-base() #

Applies a standard set of properites to all grid items in the layout.

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

Optional parameters and their defaults:

• $gutter-width: $zen-gutter-width
• $box-sizing: $zen-box-sizing
• $flow-direction: $zen-float-direction
• $reverse-all-floats: $zen-reverse-all-floats

zen-clear() #

Apply this to grid items that need to be cleared below other grid items.

Optional parameters and their defaults:

• $float-direction: $zen-float-direction
• $reverse-all-floats: $zen-reverse-all-floats

zen-float() #

Apply this to flow items that need to be floated.

Optional parameters and their defaults:

• $float-direction: $zen-float-direction
• $reverse-all-floats: $zen-reverse-all-floats

zen-grid-flow-item( $column-span, $parent-column-count )
zen-grid-flow-item( $column-span, $parent-column-count, $alpha-gutter, $omega-gutter )
or for fixed length (em, px, etc.) layouts:
zen-grid-flow-item( $column-span )
zen-grid-flow-item( $column-span, $alpha-gutter: [value], $omega-gutter: [value] ) #

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-count 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 $flow-direction is set to right (for RTL languages), the alpha position is on the right and the omega position is on the left.

Additional optional parameters and their defaults:

• $flow-direction: $zen-float-direction
• $column-count: $zen-column-count
• $gutter-width: $zen-gutter-width
• $grid-width: $zen-grid-width
• $box-sizing: $zen-box-sizing
• $reverse-all-flows: $zen-reverse-all-floats
• $auto-include-flow-item-base: $zen-auto-include-flow-item-base

zen-grid-background()
zen-grid-background( $grid-color: [value], $grid-numbers: [value] ) #

To use this mixin, you must first import the background module with: @import "zen/background";

Add a background grid image to an element’s background. During site development, it’s often useful to have a background image that shows the columns of the grid.

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 numbrs), or none (don’t display any column numbers.)

Note: when the $float-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.

Additional optional parameters and their defaults:

• $columns: $zen-columns
• $gutter-width: $zen-gutter-width
• $grid-width: $zen-grid-width
• $float-direction: $zen-float-direction
• $reverse-all-floats: $zen-reverse-all-floats

zen-half-gutter()
zen-half-gutter( $gutter-side: [value] ) #

Returns a half gutter width. The $gutter-side defaults to $zen-float-direction.

If the gutter width is in pixels and is an odd number, then $gutter-side: left will return half of the gutter rounded down to a whole pixel; $gutter-side: right will return half of the gutter rounded up to a whole pixel.

Additional optional parameters and their defaults:

• $gutter-width: $zen-gutter-width
• $flow-direction: $zen-float-direction

zen-unit-width() #

Returns the unit width of a single column in the grid.

Additional optional parameters and their defaults:

• $column-count: $zen-column-count
• $grid-width: $zen-grid-width

zen-grid-item-width( $column-span ) #

Calculates the width of a grid item that spans the specified number of columns. The $column-count defaults to $zen-column-count and $grid-width defaults to $zen-grid-width.

Additional optional parameters and their defaults:

• $column-count: $zen-column-count
• $gutter-width: $zen-gutter-width
• $grid-width: $zen-grid-width
• $box-sizing: $zen-box-sizing

zen-direction-flip( $dir ) #

Returns the opposite direction, given "left" or "right".

Example 1 #

$zen-column-count: 7; // Set the total number of columns in the grid.
$zen-gutter-width: 10px;

.example-container {
  @include zen-grid-container; // Apply this mixin to the container.
}
.block-a {
  @include zen-grid-item(4, 1);
}
.block-b {
  @include zen-grid-item(3, 1, right);
}
.block-c {
  @include zen-clear(right);
  @include zen-grid-item(3, 1, right);
}

Example 2 #

$zen-column-count: 3; // Set the total number of columns in the grid.
$zen-gutter-width: 10px;

.example-container {
  @include zen-grid-container; // Apply this mixin to the container.
}
.block-a {
  @include zen-grid-item(2, 1);
}
.block-b {
  @include zen-grid-item(1, 1, right);
}
.block-c {
  @include zen-clear(right);
  @include zen-grid-item(1, 1, right);
}
.block-d {
  @include zen-clear(both);
  @include zen-grid-item(3, 1);
}

Example 3 #

$zen-column-count: 6; // Set the total number of columns in the grid.
$zen-gutter-width: 10px;

.example-container {
  @include zen-grid-container; // Apply this mixin to the container.
}
.block-a {
  @include zen-grid-item(3, 3);
}
.block-b {
  @include zen-grid-item(2, 1);
}
.block-c {
  @include zen-grid-item(1, 1, right);
}
.block-d {
  @include zen-clear(right);
  @include zen-grid-item(1, 1, right);
}

Example 4 #

$zen-column-count: 4; // Set the total number of columns in the grid.
$zen-gutter-width: 10px;

.example-container {
  @include zen-grid-container; // Apply this mixin to the container.
}
.block-a {
  @include zen-grid-item(2, 1, right);
}
.block-b {
  @include zen-grid-item(1, 1);
}
.block-c {
  @include zen-grid-item(1, 2);
}
.block-d {
  @include zen-clear(left);
  @include zen-grid-item(1, 1);
}
.block-e {
  @include zen-grid-item(1, 2);
}

Example 5 #

$zen-column-count: 7; // Set the total number of columns in the grid.
$zen-gutter-width: 10px;

.example-container {
  @include zen-grid-container; // Apply this mixin to the container.
}
.block-a {
  @include zen-grid-item(3, 3, right);
}
.block-b {
  @include zen-grid-item(2, 1);
}
.block-c {
  @include zen-grid-item(2, 6);
}
.block-d {
 @include zen-clear(left);
 @include zen-grid-item(2, 1);
}
.block-e {
  @include zen-grid-item(2, 6);
}