Q
Version: 0.12.1
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(rule-width, $width, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-rule-width($width) {
  @include experimental(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(rule-style, unquote($style), -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-rule-style($style) {
  @include experimental(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(rule-color, $color, -moz, -webkit, -o, -ms, not -khtml, official)

@mixin column-rule-color($color) {
  @include experimental(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)