Source on Github

Compass Grid Backgrounds

The grid-background mixins allow you to generate fixed, fluid and elastic grid-images on-the-fly using css3 gradients. These can be used for testing both horizontal and vertical grids.

This file can be imported using: @import "compass/layout/grid-background"

Imports

  1. Background Size – Specify the background size for all browsers.
  2. Images – Specify linear gradients and radial gradients for many browsers.

Configurable Variables help

rgba(100, 100, 225, 0.25)

Set the color of your columns

rgba(0, 0, 0, 0)

Set the color of your gutters

24

Set the total number of columns in your grid

30px

Set the width of your columns

10px

Set the width of your gutters

0px

Set the offset, if your columns are padded in from the container edge

rgba(0, 0, 0, 0.5)

Set the color of your baseline

1.5em

Set the height of your baseline grid

true

toggle your columns grids on and off

true

toggle your vertical grids on and off

true

toggle all your grids on and off

false

optionally force your grid-image to remain fluid no matter what units you used to declared your grid.

Functions

view source 

@function get-baseline-gradient($color: $grid-background-baseline-color)
  $gradient: linear-gradient(bottom, $color 5%, rgba($color, 0) 5%)
  @return $gradient

@function get-baseline-gradient($color: $grid-background-baseline-color) {
  $gradient: linear-gradient(bottom, $color 5%, rgba($color, 0) 5%);
  @return $gradient;
}

Create the gradient needed for baseline grids

view source 

@function build-grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color)
  $grid: compact()
  $grid: append($grid, $gutter-color $offset, comma)
  @for $i from 0 to $total
    // $a represents the start of this column, initially equal to the offset
    $a: $offset
    @if $i > 0
      $a: $a + ($column + $gutter) * $i
    // $g represents the start of this gutter, equal to $a plus one column-width
    $g: $a + $column
    // $z represents the end of a gutter, equal to $g plus one gutter-width
    $z: $g + $gutter
    @if unit($a) == "%" and $i == $total - 1
      $z: 100%
    // and we add this column/gutter pair to our grid
    $grid: join($grid, $column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z)
  @return $grid

@function build-grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color) {
  $grid: compact();
  $grid: append($grid, $gutter-color $offset, comma);
  @for $i from 0 to $total {
    // $a represents the start of this column, initially equal to the offset
    $a: $offset;
    @if $i > 0 {
      $a: $a + ($column + $gutter) * $i;
    }
    // $g represents the start of this gutter, equal to $a plus one column-width
    $g: $a + $column;
    // $z represents the end of a gutter, equal to $g plus one gutter-width
    $z: $g + $gutter;
    @if unit($a) == "%" and $i == $total - 1 {
      $z: 100%;
    }
    // and we add this column/gutter pair to our grid
    $grid: join($grid, $column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z);
  }
  @return $grid;
}

Create the color-stops needed for horizontal grids

view source 

@function get-column-gradient($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $force-fluid: $grid-background-force-fluid)
  $grid: unquote("")
  // don't force fluid grids when they are already fluid.
  @if unit($column) == "%"
    $force-fluid: false
  @if $force-fluid
    $grid: get-column-fluid-grid($total, $column, $gutter, $offset, $column-color, $gutter-color)
  @else
    $grid: build-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color)
  // return the horizontal grid as a gradient
  $gradient: linear-gradient(left, $grid)
  @return $gradient

@function get-column-gradient($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $force-fluid: $grid-background-force-fluid) {
  $grid: unquote("");
  // don't force fluid grids when they are already fluid.
  @if unit($column) == "%" {
    $force-fluid: false;
  }
  @if $force-fluid {
    $grid: get-column-fluid-grid($total, $column, $gutter, $offset, $column-color, $gutter-color);
  }
  @else {
    $grid: build-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color);
  }
  // return the horizontal grid as a gradient
  $gradient: linear-gradient(left, $grid);
  @return $gradient;
}

Return the gradient needed for horizontal grids

view source 

@function get-column-fluid-grid($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color)
  $context: $column * $total + $gutter * ($total - 1) + $offset * 2
  $offset: $offset / $context * 100%
  $column: $column / $context * 100%
  $gutter: $gutter / $context * 100%
  // return the horizontal grid as a set of color-stops
  $grid: build-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color)
  @return $grid

@function get-column-fluid-grid($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color) {
  $context: $column * $total + $gutter * ($total - 1) + $offset * 2;
  $offset: $offset / $context * 100%;
  $column: $column / $context * 100%;
  $gutter: $gutter / $context * 100%;
  // return the horizontal grid as a set of color-stops
  $grid: build-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color);
  @return $grid;
}

Convert a grid from fixed units into percentages.

Mixins

view source 

=baseline-grid-background($baseline: $grid-background-baseline-height, $color: $grid-background-baseline-color)
  @if $show-grid-backgrounds and $show-baseline-grid-backgrounds
    +background-image(get-baseline-gradient($color))
    +background-size(100% $baseline)
    background-position: left top

@mixin baseline-grid-background($baseline: $grid-background-baseline-height, $color: $grid-background-baseline-color) {
  @if $show-grid-backgrounds and $show-baseline-grid-backgrounds {
    @include background-image(get-baseline-gradient($color));
    @include background-size(100% $baseline);
    background-position: left top;
  }
}

Add just the baseline grid to an element's background

view source 

=column-grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $force-fluid: $grid-background-force-fluid)
  @if $show-grid-backgrounds and $show-column-grid-backgrounds
    +background-image(get-column-gradient($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid))
    background-position: left top

@mixin column-grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $force-fluid: $grid-background-force-fluid) {
  @if $show-grid-backgrounds and $show-column-grid-backgrounds {
    @include background-image(get-column-gradient($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid));
    background-position: left top;
  }
}

Add just the horizontal grid to an element's background

view source 

=grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $baseline: $grid-background-baseline-height, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $baseline-color: $grid-background-baseline-color, $force-fluid: $grid-background-force-fluid)
  @if $show-grid-backgrounds
    @if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds
      +background-image(get-baseline-gradient($baseline-color), get-column-gradient($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid))
      +background-size(100% $baseline, auto)
      background-position: left top
    @else
      +baseline-grid-background($baseline, $baseline-color)
      +column-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid)

@mixin grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $baseline: $grid-background-baseline-height, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $baseline-color: $grid-background-baseline-color, $force-fluid: $grid-background-force-fluid) {
  @if $show-grid-backgrounds {
    @if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds {
      @include background-image(get-baseline-gradient($baseline-color), get-column-gradient($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid));
      @include background-size(100% $baseline, auto);
      background-position: left top;
    }
    @else {
      @include baseline-grid-background($baseline, $baseline-color);
      @include column-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid);
    }
  }
}

Add both horizontal and baseline grids to an element's background