compass-flex-box 0.1

data/lib/compass-flex-box.rb

@@ -0,0 +1,6 @@
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('compass-flex-box', :path => extension_path)

data/stylesheets/_flex-box.scss

@@ -0,0 +1,288 @@
+@import "compass/css3/shared";
+
+// Enabling flexbox: setting an element to be a flex container
+@mixin display-flex() {
+    @include experimental-value(display, box, -moz, -webkit, not -o, not -ms, not -khtml, not official);
+    @include experimental-value(display, flexbox, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
+    @include experimental-value(display, flex, not -moz, -webkit, not -o, not -ms, not -khtml, official);
+}
+
+@mixin display-inline-flex() {
+    @include experimental-value(display, inline-box, -moz, -webkit, not -o, not -ms, not -khtml, not official);
+    @include experimental-value(display, inline-flexbox, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
+    @include experimental-value(display, inline-flex, not -moz, -webkit, not -o, not -ms, not -khtml, official);
+}
+
+// Axis alignment: specifying alignment of items along the main flexbox axis
+
+$default-justify-content: flex-start !default;
+
+@mixin justify-content(
+    $justification: $default-justify-content
+) {
+    @include flex-property(justify-content, $justification, flex-pack, box-pack);
+}
+
+// Cross-axis alignment: specifying alignment of items along the cross-axis
+
+$default-align-items: stretch !default;
+
+@mixin align-items(
+    $alignment: $default-align-items
+) {
+    @include flex-property(align-items, $alignment, flex-align, box-align);
+}
+
+// Individual cross-axis alignment: override to align individual items along the cross-axis
+
+$default-align-self: stretch !default;
+
+@mixin align-self(
+    $alignment: $default-align-self
+) {
+    @include flex-property(align-self, $alignment, flex-item-align, null);
+}
+
+// Flex line alignment: specifying alignment of flex lines along the cross-axis
+
+$default-align-content: stretch !default;
+
+@mixin align-content(
+    $alignment: $default-align-content
+) {
+    @include flex-property(align-items, $alignment, flex-line-pack, null);
+}
+
+// Display order: specifying the order of flex items
+
+$default-order: 1 !default;
+
+@mixin order(
+    $order: $default-order
+) {
+    @include flex-property(order, $order, flex-order, box-ordinal-group);
+}
+
+// Flexibility: specifying how the size of items flex
+
+$default-flex: 1 !default;
+
+@mixin flex(
+    $amount: $default-flex
+) {
+    @include flex-property(flex, $amount, flex, box-flex);
+}
+
+$default-flex-grow: $default-flex !default;
+
+@mixin flex-grow(
+    $amount: $default-flex-grow
+) {
+    @include flex-property(flex-grow, $amount);
+}
+
+$default-flex-shrink: $default-flex !default;
+
+@mixin flex-shrink(
+    $amount: $default-flex-shrink
+) {
+    @include flex-property(flex-shrink, $amount);
+}
+
+$default-flex-basis: $default-flex !default;
+
+@mixin flex-basis(
+    $amount: $default-flex-basis
+) {
+    @include flex-property(flex-basis, $amount);
+}
+
+// Direction: specifying the direction of the main flexbox axis
+
+$default-flex-direction: row !default;
+
+@mixin flex-direction(
+    $direction: $default-flex-direction
+) {
+    @include flex-property(flex-direction, $direction, flex-direction, box-orient);
+}
+
+// Wrapping: specifying if and how flex items wrap along the cross-axis
+
+$default-flex-wrap: nowrap !default;
+
+@mixin flex-wrap(
+    $wrap: $default-flex-wrap
+) {
+    @include flex-property(flex-wrap, $wrap, flex-wrap, box-lines);
+}
+
+// Shorthand for flex-direction & flex-wrap
+
+$default-flex-flow: $default-flex-direction $default-flex-wrap !default;
+
+@mixin flex-flow(
+    $flow: $default-flex-flow
+) {
+    @include flex-property(flex-flow, $flow, flex-flow, null);
+}
+
+@mixin flex-property($standard-property, $value, $mid-property: null, $old-property: null)  {
+    $standard-property: unquote($standard-property);
+    $mid-property: unquote($mid-property);
+    $old-property: unquote($old-property);
+    $value: unquote($value);
+    $standard-value: $value;
+    $mid-value: flex-value($standard-property, $value, mid);
+    $old-value: flex-value($standard-property, $value, old);
+
+    // Safari, Firefox (buggy), iOS, Android browser, older WebKit browsers
+    @if $old-property and $old-value {
+
+        @if $standard-property == flex-direction and ($value == row-reverse or $value == column-reverse) {
+            @include experimental(box-direction, reverse, -moz, -webkit, not -o, not -ms, not -khtml, not official);
+        }
+        @include experimental($old-property, $old-value, -moz, -webkit, not -o, not -ms, not -khtml, not official);
+    }
+    // IE 10
+    @if $mid-property and $mid-value {
+        @include experimental($mid-property, $mid-value, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
+    }
+    // Chrome 21+, Opera 12.1, Firefox 22+
+    @include experimental($standard-property, $standard-value, not -moz, -webkit, not -o, not -ms, not -khtml, official);
+}
+
+@function flex-value($property, $value, $syntax) {
+    $new-value: $value;
+    $warning: false;
+
+    @if $property == justify-content {
+        @if $value == flex-start {
+            @if $syntax == old or $syntax == mid {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == old or $syntax == mid {
+                $new-value: end;
+            }
+        }
+        @else if $value == space-between {
+            @if $syntax == old {
+                $warning: "\"#{$property}: #{$value}\" does not work in the old Firefox implementation";
+            }
+            @if $syntax == old or $syntax == mid {
+                $new-value: justify;
+            }
+        }
+        @else if $value == space-around {
+            @if $syntax == old {
+                $new-value: null;
+            } @else if $syntax == mid {
+                $new-value: distribute;
+            }
+        }
+    }
+
+    @if $property == align-items {
+        @if $value == flex-start {
+            @if $syntax == old or $syntax == mid {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == old or $syntax == mid {
+                $new-value: end;
+            }
+        }
+    }
+
+    @if $property == align-self {
+        @if $value == flex-start {
+            @if $syntax == mid {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == mid {
+                $new-value: end;
+            }
+        }
+    }
+
+    @if $property == align-content {
+        @if $value == flex-start {
+            @if $syntax == mid {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == mid {
+                $new-value: end;
+            }
+        }
+        @else if $value == space-between {
+            @if $syntax == mid {
+                $new-value: justify;
+            }
+        }
+        @else if $value == space-around {
+            @if $syntax == mid {
+                $new-value: distribute;
+            }
+        }
+    }
+
+    @if $property == order {
+        @if $syntax == old and $value < 1 {
+            $warning: "\"#{$property}\" must be a positive integer in the \"#{$syntax}\" syntax";
+            $new-value: null;
+        }
+    }
+
+    @if $property == flex {
+        @if $syntax == old and type_of($value) != number {
+            $warning: "\"#{$property}\" only accepts an integer in the \"#{$syntax}\" syntax";
+            $new-value: null;
+        }
+    }
+
+    @if $property == flex-direction {
+        @if $value == row or $value == row-reverse {
+            @if $syntax == old {
+                $new-value: horizontal;
+            }
+        }
+        @else if $value == column or $value == column-reverse {
+            @if $syntax == old {
+                $new-value: vertical;
+            }
+        }
+    }
+
+    @if $property == flex-wrap {
+        @if $value == nowrap {
+            @if $syntax == old {
+                $new-value: single;
+            }
+        }
+        @else if $value == wrap {
+            @if $syntax == old {
+                $new-value: multiple;
+            }
+        }
+        @else if $value == wrap-reverse {
+            @if $syntax == old {
+                $new-value: null;
+            }
+        }
+    }
+
+    @if $new-value == null or $warning {
+        @warn if($warning, $warning, "\"#{$property}: #{$value}\" not supported in the \"" + $syntax + "\" syntax");
+    }
+
+    @return $new-value;
+}
+
+

data/templates/example/manifest.rb

@@ -0,0 +1,2 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.scss', :media => 'screen, projection'

metadata

@@ -0,0 +1,96 @@
+--- !ruby/object:Gem::Specification 
+name: compass-flex-box
+version: !ruby/object:Gem::Version 
+  hash: 9
+  prerelease: 
+  segments: 
+  - 0
+  - 1
+  version: "0.1"
+platform: ruby
+authors: 
+- Tim Hettler
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2013-06-06 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3
+        segments: 
+        - 0
+        version: "0"
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3
+        segments: 
+        - 0
+        version: "0"
+  type: :runtime
+  version_requirements: *id002
+description: A compass extension that provides variables & mixins for the latest (and final) Flexible Box Layout (flex-box) specification
+email: 
+- me+github@timhettler.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- lib/compass-flex-box.rb
+- stylesheets/_flex-box.scss
+- templates/example/manifest.rb
+homepage: https://github.com/timhettler/compass-flex-box
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 23
+      segments: 
+      - 1
+      - 3
+      - 6
+      version: 1.3.6
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.25
+signing_key: 
+specification_version: 3
+summary: A compass extension that provides variables & mixins for the latest (and final) Flexible Box Layout (flex-box) specification
+test_files: []
+