Support for the experimental display: box model.

doc-src/Gemfile

@@ -1,7 +1,7 @@
 source :gemcutter
 
 # We can switch nanoc to a normal gem when 3.1.3 is released.
-gem 'nanoc3', :require => false, :git => "git@github.com:chriseppstein/nanoc.git", :branch => "3.1.x"
+gem 'nanoc3', :require => false, :git => "git://github.com/chriseppstein/nanoc.git", :branch => "3.1.x"
 gem 'rdiscount'
 gem 'thor'
 gem 'rack'

doc-src/Gemfile.lock

@@ -68,8 +68,7 @@ specs:
 - coderay: 
     version: 0.9.3
 - haml: 
-    version: 3.0.0.beta.3
+    version: 3.0.0.rc.1
-    source: 0
 - compass: 
     version: 0.10.0.rc3
     source: 0
@@ -79,7 +78,6 @@ specs:
     version: 1.0.1
 - css-slideshow: 
     version: 0.2.0
-    source: 0
 - fssm: 
     version: 0.1.4
 - mime-types: 
@@ -92,20 +90,20 @@ specs:
 - rack: 
     version: 1.1.0
 - rdiscount: 
-    version: 1.6.3
+    version: 1.6.3.1
 - serve: 
     version: 0.10.0
 - thor: 
     version: 0.13.4
-hash: c67f2ebb37154944e05b728b70c2e3322d370d59
+hash: 09bc9dccbf40f91aa0fa543d0f77ef9bb3951559
 sources: 
 - Path: 
     path: !ruby/object:Pathname 
-      path: /Users/chris/Projects/compass/doc-src/../..
+      path: /Users/ltackett/github/compass/doc-src/../..
 - Git: 
-    uri: git@github.com:chriseppstein/nanoc.git
+    uri: git://github.com/chriseppstein/nanoc.git
     branch: 3.1.x
-    git: git@github.com:chriseppstein/nanoc.git
+    git: git://github.com/chriseppstein/nanoc.git
     require: false
     ref: 398294262623dac9bb15dcbbfc0ba33c04f8125e
 - Rubygems: 

doc-src/content/examples/compass/css3/box.haml

@@ -0,0 +1,8 @@
+---
+title: CSS3 Flexible Box
+description: mixins for the CSS3 flexible box
+framework: compass
+stylesheet: compass/css3/_box.scss
+example: true
+---
+= render "partials/example"

doc-src/content/examples/compass/css3/box/markup.haml

@@ -0,0 +1,4 @@
+.example
+  .content Some great content
+  .sidebar A sidebar
+  

doc-src/content/examples/compass/css3/box/stylesheet.sass

@@ -0,0 +1,18 @@
+@import compass/css3
+
+.example
+  +display-box
+  +box-orient(horizontal)
+  +box-align(stretch)
+  +box-direction(reverse)
+  height: 200px
+  width: 100%
+  .content, .sidebar
+    padding: 20px
+  .content
+    +box-flex(4)
+    background-color: #C5C1B4
+  .sidebar
+    +box-flex(1)
+    background-color: #375F99
+    margin-right: 1px

doc-src/content/reference/compass/css3/box.haml

@@ -0,0 +1,13 @@
+--- 
+title: Compass Box
+crumb: Box
+framework: compass
+stylesheet: compass/css3/_box.scss
+meta_description: This module provides mixins that pertain to the CSS3 Flexible Box.
+layout: core
+classnames:
+  - reference
+---
+- render 'reference' do
+  %p
+    This module provides mixins that pertain to the CSS3 Flexible Box.

frameworks/compass/stylesheets/compass/_css3.scss

@@ -5,6 +5,7 @@
 @import "css3/text-shadow";
 @import "css3/columns";
 @import "css3/box-sizing";
+@import "css3/box";
 @import "css3/gradient";
 @import "css3/background-clip";
 @import "css3/background-origin";

frameworks/compass/stylesheets/compass/css3/_box.scss

@@ -0,0 +1,89 @@
+@import "shared";
+
+// display:box; must be used for any of the other flexbox mixins to work properly
+@mixin display-box {
+  @include experimental-value(display,box);
+}
+
+// Default box orientation, assuming that the user wants something less block-like
+$default-box-orient: horizontal !default;
+
+// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
+@mixin box-orient(
+  $orientation: $default-box-orient
+) {
+  @include experimental(box-orient, $orientation);
+}
+
+// Default box-align
+$default-box-align: stretch !default;
+
+// Box align [ start | end | center | baseline | stretch ]
+@mixin box-align(
+  $alignment: $default-box-align
+) {
+  @include experimental(box-align, $alignment);
+}
+
+// Default box flex
+$default-box-flex: 0 !default;
+
+// mixin which 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.
+@mixin box-flex(
+  $flex: $default-box-flex
+) {
+  @include experimental(box-flex, $flex);
+  display: block;
+}
+
+// Default flex group
+$default-box-flex-group: 1 !default;
+
+// mixin which takes an int argument for flexible grouping
+@mixin box-flex-group(
+  $group: $default-box-flex-group
+) {
+  @include experimental(box-flex-group, $group);
+}
+
+// default for ordinal group
+$default-box-ordinal-group: 1 !default;
+
+// mixin which takes an int argument for ordinal grouping and rearranging the order
+@mixin box-ordinal-group(
+  $group: $default-ordinal-flex-group
+) {
+  @include experimental(box-ordinal-group, $group);
+}
+
+// Box direction default value
+$default-box-direction: normal !default;
+
+// mixin for box-direction [ normal | reverse | inherit ]
+@mixin box-direction(
+  $direction: $default-box-direction
+) {
+  @include experimental(box-direction, $direction);
+}
+
+// default for box lines
+$default-box-lines: single !default;
+
+// mixin for box lines [ single | multiple ]
+@mixin box-lines(
+  $lines: $default-box-lines
+) {
+  @include experimental(box-lines, $lines);
+}
+
+// default for box pack
+$default-box-pack: start !default;
+
+// mixin for box pack [ start | end | center | justify ]
+@mixin box-pack(
+  $pack: $default-box-pack
+) {
+  @include experimental(box-pack, $pack);
+}

frameworks/compass/stylesheets/compass/css3/_shared.scss

@@ -27,4 +27,21 @@ $experimental-support-for-khtml     : false !default;
   @if $ms       {     -ms-#{$property} : $value; }
   @if $khtml    {  -khtml-#{$property} : $value; }
   @if $official {         #{$property} : $value; }
+}
+
+// Same as experimental(), but for cases when the property is the same and the value is vendorized
+@mixin experimental-value($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $moz      { #{$property} :    -moz-#{$value}; }
+  @if $webkit   { #{$property} : -webkit-#{$value}; }
+  @if $o        { #{$property} :      -o-#{$value}; }
+  @if $ms       { #{$property} :     -ms-#{$value}; }
+  @if $khtml    { #{$property} :  -khtml-#{$value}; }
+  @if $official { #{$property} :         #{$value}; }
 }

test/compass_test.rb

@@ -42,7 +42,7 @@ class CompassTest < Test::Unit::TestCase
       each_css_file(proj.css_path) do |css_file|
         assert_no_errors css_file, 'compass'
       end
-      assert_renders_correctly :reset, :layout, :utilities, :gradients, :image_size
+      assert_renders_correctly :reset, :layout, :utilities, :gradients, :image_size, :box
     end
   end
 

test/fixtures/stylesheets/compass/css/box.css

@@ -0,0 +1,90 @@
+.hbox {
+  display: -moz-box;
+  display: -webkit-box;
+  display: box;
+  -moz-box-orient: horizontal;
+  -webkit-box-orient: horizontal;
+  box-orient: horizontal;
+  -moz-box-align: stretch;
+  -webkit-box-align: stretch;
+  box-align: stretch; }
+  .hbox > * {
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    box-flex: 0;
+    display: block; }
+
+.vbox {
+  display: -moz-box;
+  display: -webkit-box;
+  display: box;
+  -moz-box-orient: vertical;
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -moz-box-align: stretch;
+  -webkit-box-align: stretch;
+  box-align: stretch; }
+  .vbox > * {
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    box-flex: 0;
+    display: block; }
+
+.spacer {
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+  box-flex: 1;
+  display: block; }
+
+.reverse {
+  -moz-box-direction: reverse;
+  -webkit-box-direction: reverse;
+  box-direction: reverse; }
+
+.box-flex-0 {
+  -moz-box-flex: 0;
+  -webkit-box-flex: 0;
+  box-flex: 0;
+  display: block; }
+
+.box-flex-1 {
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+  box-flex: 1;
+  display: block; }
+
+.box-flex-2 {
+  -moz-box-flex: 2;
+  -webkit-box-flex: 2;
+  box-flex: 2;
+  display: block; }
+
+.box-flex-group-0 {
+  -moz-box-flex-group: 0;
+  -webkit-box-flex-group: 0;
+  box-flex-group: 0; }
+
+.box-flex-group-1 {
+  -moz-box-flex-group: 1;
+  -webkit-box-flex-group: 1;
+  box-flex-group: 1; }
+
+.box-flex-group-2 {
+  -moz-box-flex-group: 2;
+  -webkit-box-flex-group: 2;
+  box-flex-group: 2; }
+
+.start {
+  -moz-box-pack: start;
+  -webkit-box-pack: start;
+  box-pack: start; }
+
+.end {
+  -moz-box-pack: end;
+  -webkit-box-pack: end;
+  box-pack: end; }
+
+.center {
+  -moz-box-pack: center;
+  -webkit-box-pack: center;
+  box-pack: center; }

test/fixtures/stylesheets/compass/sass/box.sass

@@ -0,0 +1,50 @@
+@import compass/css3
+
+.hbox
+  +display-box
+  +box-orient
+  +box-align
+  
+  & > *
+    +box-flex
+
+.vbox
+  +display-box
+  +box-orient(vertical)
+  +box-align
+  
+  & > *
+    +box-flex
+
+.spacer
+  +box-flex(1)
+
+.reverse
+  +box-direction(reverse)
+
+.box-flex-0
+  +box-flex(0)
+
+.box-flex-1
+  +box-flex(1)
+
+.box-flex-2
+  +box-flex(2)
+
+.box-flex-group-0
+  +box-flex-group(0)
+
+.box-flex-group-1
+  +box-flex-group(1)
+
+.box-flex-group-2
+  +box-flex-group(2)
+
+.start
+  +box-pack(start)
+
+.end
+  +box-pack(end)
+
+.center
+  +box-pack(center)