Q
Version: 1.1.alpha.0
Source on Github

Compass Columns

Provides a mixin for the CSS3 Multi-column layout module. See CSS3 spec: Multi-colum layout module.

This file can be imported using: @import "compass/css3/columns"

Examples

Columns
css3 mixin for css columns

Imports

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$critical-usage-threshold

The prefixed support threshold for columns. Defaults to the $critical-usage-threshold.

Mixins

view source 

=columns($width-and-count)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (columns: $width-and-count))

@mixin columns($width-and-count) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (columns: $width-and-count));
}

Specify the shorthand columns property.

Example:

@include columns(20em 2);
view source 

=column-count($count)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-count: $count))

@mixin column-count($count) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-count: $count));
}

Specify the number of columns

view source 

=column-gap($width)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-gap: $width))

@mixin column-gap($width) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-gap: $width));
}

Specify the gap between columns e.g. 20px

view source 

=column-width($width)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-width: $width))

@mixin column-width($width) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-width: $width));
}

Specify the width of columns e.g. 100px

view source 

=column-span($columns)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-span: $columns))

@mixin column-span($columns) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-span: $columns));
}

Specify how many columns an element should span across.

  • legal values are 1, all
view source 

=column-rule-width($width)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (rule-width: $width))

@mixin column-rule-width($width) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (rule-width: $width));
}

Specify the width of the rule between columns e.g. 1px

view source 

=column-rule-style($style)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (rule-style: $style))

@mixin column-rule-style($style) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (rule-style: $style));
}

Specify the style of the rule between columns e.g. dotted. This works like border-style.

view source 

=column-rule-color($color)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (rule-color: $color))

@mixin column-rule-color($color) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (rule-color: $color));
}

Specify the color of the rule between columns e.g. blue. This works like border-color.

view source 

=column-rule($width, $style: null, $color: null)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-rule: $width $style $color))

@mixin column-rule($width, $style: null, $color: null) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-rule: $width $style $color));
}

Mixin encompassing all column rule properties For example:

@include column-rule(1px, solid, #c00)

Or the values can be space separated:

@include column-rule(1px solid #c00)
view source 

=column-break($type: before, $value: auto)
  +with-each-prefix(multicolumn, $multicolumn-support-threshold)
    @if $current-prefix == -webkit
      // Webkit uses non-standard syntax
      -webkit-column-break-#{$type}: $value
    @else if $current-prefix == -moz
      // Moz uses a different non-standard syntax
      -moz-page-break-#{$type}: $value
    @else
      +prefix-prop(break-#{$type}, $value)

@mixin column-break($type: before, $value: auto) {
  @include with-each-prefix(multicolumn, $multicolumn-support-threshold) {
    @if $current-prefix == -webkit {
      // Webkit uses non-standard syntax
      -webkit-column-break-#{$type}: $value;
    }
    @else if $current-prefix == -moz {
      // Moz uses a different non-standard syntax
      -moz-page-break-#{$type}: $value;
    }
    @else {
      @include prefix-prop(break-#{$type}, $value);
    }
  }
}

All-purpose mixin for setting column breaks.

  • legal values for $type : before, after, inside
  • legal values for '$value' are dependent on $type
    • when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
    • when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
    • when $type = inside, legal values are auto, avoid, avoid-page, avoid-column

Examples: h2.before {@include column-break(before, always);} h2.after {@include column-break(after, always); } h2.inside {@include column-break(inside); }

Which generates: h2.before { -webkit-column-break-before: always; break-before: always;}

h2.after { -webkit-column-break-after: always; break-after: always; }

h2.inside { -webkit-column-break-inside: auto; break-inside: auto;}

view source 

=break-before($value: auto)
  +column-break(before, $value)

@mixin break-before($value: auto) {
  @include column-break(before, $value);
}

Mixin for setting break-before

  • legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column

Example: h2.before {@include break-before(always);}

Which generates:

h2.before { -webkit-column-break-before: always; break-before: always;}

view source 

=column-break-before($value: auto)
  +column-break(before, $value)
  @warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".'

@mixin column-break-before($value: auto) {
  @include column-break(before, $value);
  @warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".';
}
view source 

=break-after($value: auto)
  +column-break(after, $value)

@mixin break-after($value: auto) {
  @include column-break(after, $value);
}

Mixin for setting break-after

  • legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column

Example: h2.after {@include break-after(always); }

Which generates:

h2.after { -webkit-column-break-after: always; break-after: always; }

view source 

=column-break-after($value: auto)
  +column-break(after, $value)
  @warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".'

@mixin column-break-after($value: auto) {
  @include column-break(after, $value);
  @warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".';
}
view source 

=break-inside($value: auto)
  +column-break(inside, $value)

@mixin break-inside($value: auto) {
  @include column-break(inside, $value);
}

Mixin for setting break-inside

  • legal values are auto, avoid, avoid-page, avoid-column

Example: h2.inside {@include break-inside();}

Which generates:

h2.inside { -webkit-column-break-inside: auto; break-inside: auto;}

view source 

=column-break-inside($value: auto)
  +column-break(inside, $value)
  @warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".'

@mixin column-break-inside($value: auto) {
  @include column-break(inside, $value);
  @warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".';
}
view source 

=column-span($span: all)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-span: $span))

@mixin column-span($span: all) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-span: $span));
}

Mixin for setting column-span

  • legal values: none, all

Example: h2.span {@include column-span();}

view source 

=column-fill($fill: balance)
  +prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-fill: $fill))

@mixin column-fill($fill: balance) {
  @include prefixed-properties(multicolumn, $multicolumn-support-threshold, (column-fill: $fill));
}

Mixin for setting column-fill

  • legal values: auto, balance

Example: h2.fill {@include column-fill();}