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. Shared Utilities

Mixins

view source 

=columns($width-and-count)
  +experimental(columns, $width-and-count, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin columns($width-and-count) {
  @include experimental(columns, $width-and-count, -moz, -webkit, -o, -ms, not -khtml, official);
}

Specify the shorthand columns property.

Example:

@include columns(20em 2)
view source 

=column-count($count)
  +experimental(column-count, $count, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-count($count) {
  @include experimental(column-count, $count, -moz, -webkit, -o, -ms, not -khtml, official);
}

Specify the number of columns

view source 

=column-gap($width)
  +experimental(column-gap, $width, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-gap($width) {
  @include experimental(column-gap, $width, -moz, -webkit, -o, -ms, not -khtml, official);
}

Specify the gap between columns e.g. 20px

view source 

=column-width($width)
  +experimental(column-width, $width, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-width($width) {
  @include experimental(column-width, $width, -moz, -webkit, -o, -ms, not -khtml, official);
}

Specify the width of columns e.g. 100px

view source 

=column-rule-width($width)
  +experimental(column-rule-width, $width, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-rule-width($width) {
  @include experimental(column-rule-width, $width, -moz, -webkit, -o, -ms, not -khtml, official);
}

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

view source 

=column-rule-style($style)
  +experimental(column-rule-style, unquote($style), -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-rule-style($style) {
  @include experimental(column-rule-style, unquote($style), -moz, -webkit, -o, -ms, not -khtml, official);
}

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

view source 

=column-rule-color($color)
  +experimental(column-rule-color, $color, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-rule-color($color) {
  @include experimental(column-rule-color, $color, -moz, -webkit, -o, -ms, not -khtml, official);
}

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

view source 

=column-rule($width, $style: false, $color: false)
  $full: -compass-space-list(compact($width, $style, $color))
  +experimental(column-rule, $full, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-rule($width, $style: false, $color: false) {
  $full: -compass-space-list(compact($width, $style, $color));
  @include experimental(column-rule, $full, -moz, -webkit, -o, -ms, not -khtml, official);
}

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-before($value: auto)
  +experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin column-break-before($value: auto) {
  @include experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

Mixin for setting column-break-before

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

Which generates:

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

view source 

=column-break-after($value: auto)
  +experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin column-break-after($value: auto) {
  @include experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

Mixin for setting column-break-after

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

Which generates:

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

view source 

=column-break-inside($value: auto)
  +experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin column-break-inside($value: auto) {
  @include experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

Mixin for setting column-break-inside

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

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

view source 

=column-break($type: before, $value: auto)
  +experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official)

@mixin column-break($type: before, $value: auto) {
  @include experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official);
}

All-purpose mixin for setting column breaks.

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; column-break-before: always;}

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

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