Q
Version: 1.1.alpha.0
Source on Github

Compass Box

This module is deprecated and will be removed in the next release. Please use the flexbox module instead.

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

Imports

  1. deprecated-support

Configurable Variables help

horizontal

Default box orientation, assuming that the user wants something less block-like

stretch

Default box-align

0

Default box flex

1

Default flex group

normal

Box direction default value

1

Default ordinal group

single

Default box lines

start

Default box pack

Mixins

view source 

=display-box
  +experimental-value(display, box, $legacy-box-support...)

@mixin display-box {
  @include experimental-value(display, box, $legacy-box-support...);
}

Apply 'display:box;' to an element. - must be used for any of the other flexbox mixins to work properly

view source 

=box-orient($orientation: $default-box-orient)
  $orientation: unquote($orientation)
  +experimental(box-orient, $orientation, $legacy-box-support...)

@mixin box-orient($orientation: $default-box-orient) {
  $orientation: unquote($orientation);
  @include experimental(box-orient, $orientation, $legacy-box-support...);
}

Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]

view source 

=box-align($alignment: $default-box-align)
  $alignment: unquote($alignment)
  +experimental(box-align, $alignment, $legacy-box-support...)

@mixin box-align($alignment: $default-box-align) {
  $alignment: unquote($alignment);
  @include experimental(box-align, $alignment, $legacy-box-support...);
}

Box align [ start | end | center | baseline | stretch ]

view source 

=box-flex($flex: $default-box-flex)
  +experimental(box-flex, $flex, $legacy-box-support...)

@mixin box-flex($flex: $default-box-flex) {
  @include experimental(box-flex, $flex, $legacy-box-support...);
}

Takes an int argument for box flex. Apply this to the children inside the box.

For example: "div.display-box > div.child-box" would get the box flex mixin.

view source 

=box-flex-group($group: $default-box-flex-group)
  +experimental(box-flex-group, $group, $legacy-box-support...)

@mixin box-flex-group($group: $default-box-flex-group) {
  @include experimental(box-flex-group, $group, $legacy-box-support...);
}

Takes an int argument for flexible grouping

view source 

=box-ordinal-group($group: $default-box-ordinal-group)
  +experimental(box-ordinal-group, $group, $legacy-box-support...)

@mixin box-ordinal-group($group: $default-box-ordinal-group) {
  @include experimental(box-ordinal-group, $group, $legacy-box-support...);
}

Takes an int argument for ordinal grouping and rearranging the order

view source 

=box-direction($direction: $default-box-direction)
  $direction: unquote($direction)
  +experimental(box-direction, $direction, $legacy-box-support...)

@mixin box-direction($direction: $default-box-direction) {
  $direction: unquote($direction);
  @include experimental(box-direction, $direction, $legacy-box-support...);
}

Box direction [ normal | reverse | inherit ]

view source 

=box-lines($lines: $default-box-lines)
  $lines: unquote($lines)
  +experimental(box-lines, $lines, $legacy-box-support...)

@mixin box-lines($lines: $default-box-lines) {
  $lines: unquote($lines);
  @include experimental(box-lines, $lines, $legacy-box-support...);
}

Box lines [ single | multiple ]

view source 

=box-pack($pack: $default-box-pack)
  $pack: unquote($pack)
  +experimental(box-pack, $pack, $legacy-box-support...)

@mixin box-pack($pack: $default-box-pack) {
  $pack: unquote($pack);
  @include experimental(box-pack, $pack, $legacy-box-support...);
}

Box pack [ start | end | center | justify ]