compass-flexbox 1.0

data/lib/compass-flexbox.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-flexbox', :path => extension_path)

data/stylesheets/_flexbox.scss

@@ -0,0 +1,298 @@
+@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);
+}
+
+// Internal functions; not intended to be called directly
+
+@mixin _flex-property($standard-property, $value, $ie-property: null, $legacy-property: null)  {
+    $standard-property: unquote($standard-property);
+    $ie-property: unquote($ie-property);
+    $legacy-property: unquote($legacy-property);
+    $value: unquote($value);
+    $standard-value: $value;
+    $ie-value: _flex-value($standard-property, $value, ie);
+    $legacy-value: _flex-value($standard-property, $value, legacy);
+
+    // Safari, Firefox (buggy), iOS, Android browser, older WebKit browsers
+    @if $legacy-property {
+        @if $legacy-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($legacy-property, $legacy-value, -moz, -webkit, not -o, not -ms, not -khtml, not official);
+        }
+    } @else {
+        @warn _support-warning($standard-property, "legacy");
+    }
+
+    // IE 10
+    @if $ie-property and $ie-value {
+        @include experimental($ie-property, $ie-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 == legacy or $syntax == ie {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == legacy or $syntax == ie {
+                $new-value: end;
+            }
+        }
+        @else if $value == space-between {
+            @if $syntax == legacy {
+                $warning: "\"#{$property}: #{$value}\" does not work in the legacy Firefox implementation";
+            }
+            @if $syntax == legacy or $syntax == ie {
+                $new-value: justify;
+            }
+        }
+        @else if $value == space-around {
+            @if $syntax == legacy {
+                $new-value: null;
+            } @else if $syntax == ie {
+                $new-value: distribute;
+            }
+        }
+    }
+
+    @if $property == align-items {
+        @if $value == flex-start {
+            @if $syntax == legacy or $syntax == ie {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == legacy or $syntax == ie {
+                $new-value: end;
+            }
+        }
+    }
+
+    @if $property == align-self {
+        @if $value == flex-start {
+            @if $syntax == ie {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == ie {
+                $new-value: end;
+            }
+        }
+    }
+
+    @if $property == align-content {
+        @if $value == flex-start {
+            @if $syntax == ie {
+                $new-value: start;
+            }
+        }
+        @else if $value == flex-end {
+            @if $syntax == ie {
+                $new-value: end;
+            }
+        }
+        @else if $value == space-between {
+            @if $syntax == ie {
+                $new-value: justify;
+            }
+        }
+        @else if $value == space-around {
+            @if $syntax == ie {
+                $new-value: distribute;
+            }
+        }
+    }
+
+    @if $property == order {
+        @if $syntax == legacy and $value < 1 {
+            $warning: "\"#{$property}\" must be a positive integer in the \"#{$syntax}\" syntax";
+            $new-value: null;
+        }
+    }
+
+    @if $property == flex {
+        @if $syntax == legacy 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 == legacy {
+                $new-value: horizontal;
+            }
+        }
+        @else if $value == column or $value == column-reverse {
+            @if $syntax == legacy {
+                $new-value: vertical;
+            }
+        }
+    }
+
+    @if $property == flex-wrap {
+        @if $value == nowrap {
+            @if $syntax == legacy {
+                $new-value: single;
+            }
+        }
+        @else if $value == wrap {
+            @if $syntax == legacy {
+                @warn "\"#{$property}: #{$value}\" is not supported consistently in the \"#{$syntax}\" syntax";
+                $new-value: multiple;
+            }
+        }
+        @else if $value == wrap-reverse {
+            @if $syntax == legacy {
+                $new-value: null;
+            }
+        }
+    }
+
+    @if $new-value == null or $warning {
+        @warn if($warning, $warning, _support-warning("#{$property}: #{$value}", $syntax));
+    }
+
+    @return $new-value;
+}
+
+@function _support-warning($value, $syntax) {
+    @return "\"#{$value}\" not supported in the #{$syntax} syntax"
+}

data/templates/example/compass-flexbox.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>Flex Box</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width">
+        <link rel="stylesheet" href="stylesheets/compass-flexbox.css">
+    </head>
+    <body>
+        <h1>Compass Flexbox</h1>
+        <p></p>
+        <h2>Horizontally &amp; Vertically Centered Box</h2>
+        <p>Justify-content, the CSS property that launched a thousand blog posts</p>
+        <div class="centered-box-container">
+            <div class="centered-box">HOLY SHIT</div>
+        </div>
+        <h2>Nav</h2>
+        <p>One child item can be set up "fill" all remaining space in a container</p>
+        <div class="flex-nav">
+            <div class="flex-nav-item">Home</div>
+            <div class="flex-nav-item">Shop</div>
+            <div class="flex-nav-item">Sports</div>
+            <div class="flex-nav-item--search"><label><input type="search" placeholder="Search"></label></div>
+            <div class="flex-nav-item">Help</div>
+            <div class="flex-nav-item">Cart</div>
+            <div class="flex-nav-item">Join</div>
+        </div>
+        <h2>Holy Grail Layout</h2>
+        <p>Flexbox finally gives use source-order independence</p>
+        <h3>Desktop</h3>
+        <div class="holy-grail">
+            <header>Header</header>
+            <main class="holy-grail-body">
+                <article>Main</article>
+                <nav>Nav</nav>
+                <aside>Sidebar</aside>
+            </main>
+            <footer>Footer</footer>
+        </div>
+        <h3>Mobile (Same Markup)</h3>
+        <div class="holy-grail is-mobile">
+            <header>Header</header>
+            <main class="holy-grail-body">
+                <article>Main</article>
+                <nav>Nav</nav>
+                <aside>Sidebar</aside>
+            </main>
+            <footer>Footer</footer>
+        </div>
+        <aside>
+            <a href="https://github.com/timhettler/compass-flexbox"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
+        </aside>
+        <script src="javascripts/libs/prism.js"></script>
+    </body>
+</html>

data/templates/example/compass-flexbox.scss

@@ -0,0 +1,180 @@
+@import "flexbox";
+@import "compass/css3/box-sizing";
+@import "compass/css3/transition";
+
+@import "libs/prism";
+
+body {
+  font-family: Helvetica;
+}
+
+%flex-container {
+  background-color: rgba(skyblue, 0.2);
+  @include display-flex();
+  min-height: 250px;
+  width: 100%;
+}
+
+$flex-item-dimension: 220px;
+
+.flex-item {
+  @include display-flex();
+  @include justify-content(center);
+  @include align-items(center);
+  background-color: hotpink;
+  color: white;
+  height: $flex-item-dimension;
+  text-align: center;
+  width: $flex-item-dimension;
+}
+
+.code-comparison {
+  @include display-flex();
+  margin: 1.5em 0;
+  width: 100%;
+}
+
+  .code-comparison--child {
+    @include flex(1);
+    min-height: 100px;
+
+    &:nth-child(1) {
+      margin-right: 5px;
+    }
+
+    &:nth-child(2) {
+      margin-left: 5px;
+    }
+  }
+
+// Centered Box
+
+.centered-box-container {
+  @extend %flex-container;
+  @include justify-content(center);
+  @include align-items(center);
+  height: 500px;
+}
+
+  .centered-box {
+    @extend .flex-item;
+    @include single-transition();
+
+    &:hover {
+      height: 400px;
+      width: 500px;
+    }
+  }
+
+// Holy Grail
+
+$holy-grail-margin: 5px;
+
+%holy-grail-item {
+  padding: 10px;
+
+  .is-mobile & {
+    @include flex(1);
+    @include order(1);
+  }
+}
+
+.holy-grail {
+  @include display-flex();
+  @include flex-direction(column);
+  margin: 0 auto;
+  text-align: center;
+  width: 100%;
+
+  &.is-mobile {
+    max-width: 320px;
+  }
+
+  > header, > footer {
+    @extend %holy-grail-item;
+    background-color: Moccasin;
+  }
+}
+
+  .holy-grail-body {
+    @include display-flex();
+    @include flex-direction(row);
+    margin: $holy-grail-margin 0;
+    width: 100%;
+
+    .is-mobile & {
+      @include flex-direction(column);
+      margin: 0;
+    }
+
+    article {
+      @extend %holy-grail-item;
+      @include flex(3);
+      @include order(2);
+      background-color: PaleTurquoise;
+      margin: 0 $holy-grail-margin;
+      min-height: 100px;
+
+      .is-mobile & {
+        margin: 0;
+      }
+    }
+
+    nav {
+      @extend %holy-grail-item;
+      @include flex(1);
+      @include order(1);
+      background-color: hotpink;
+    }
+
+    aside {
+      @extend %holy-grail-item;
+      @include flex(1);
+      @include order(3);
+      background-color: Thistle;
+    }
+  }
+
+// Nav
+
+.flex-nav {
+  @include display-flex();
+  width: 100%;
+}
+
+  %flex-nav-item {
+    @include align-items(center);
+    @include display-flex();
+    @include justify-content(center);
+    background-color: #ccc;
+    border: {
+      left: 1px solid #999;
+    };
+    padding: 5px 10px;
+  }
+
+  .flex-nav-item {
+    @extend %flex-nav-item;
+
+    &:hover {
+      background-color: #aaa;
+    }
+  }
+
+  .flex-nav-item--search {
+    @extend %flex-nav-item;
+    @include flex(1);
+
+    label {
+      display: block;
+      margin: 0 auto;
+      max-width: 500px;
+      width: 100%;
+    }
+
+    input {
+      @include box-sizing(border-box);
+      display: block;
+      width: 100%;
+    }
+  }

data/templates/example/manifest.rb

@@ -0,0 +1 @@
+discover :all

metadata

@@ -0,0 +1,98 @@
+--- !ruby/object:Gem::Specification 
+name: compass-flexbox
+version: !ruby/object:Gem::Version 
+  hash: 15
+  prerelease: 
+  segments: 
+  - 1
+  - 0
+  version: "1.0"
+platform: ruby
+authors: 
+- Tim Hettler
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2013-06-10 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 Flexible Box Layout (flexbox) specification
+email: 
+- me+github@timhettler.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- lib/compass-flexbox.rb
+- stylesheets/_flexbox.scss
+- templates/example/compass-flexbox.html
+- templates/example/compass-flexbox.scss
+- templates/example/manifest.rb
+homepage: https://github.com/timhettler/compass-flexbox
+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 Flexible Box Layout (flexbox) specification
+test_files: []
+