bourbon 0.0.8 → 0.1.1

data/.gitignore

@@ -1,4 +1,5 @@
 *swp
 *gem
 .sass-cache/
-sass/
+bourbon/
+demo/

data/app/assets/stylesheets/_bourbon.css.scss

@@ -1,10 +1,11 @@
 // Custom Functions
-@import "functions/compact";
 @import "functions/golden-ratio";
 @import "functions/tint-shade";
+@import "functions/linear-gradient";
 
 // CSS3 Mixins
 @import "css3/animation";
+@import "css3/background-image";
 @import "css3/border-radius";
 @import "css3/box-shadow";
 @import "css3/box-sizing";

data/app/assets/stylesheets/css3/_background-image.css.scss

@@ -0,0 +1,119 @@
+// Background image property for support with adding multiple background images with a gradients.
+
+@mixin background-image(
+  $image-1       , $image-2: false,
+  $image-3: false, $image-4: false,
+  $image-5: false, $image-6: false,
+  $image-7: false, $image-8: false,
+  $image-9: false, $image-10: false
+) {
+  $images: compact($image-1, $image-2,
+           $image-3, $image-4,
+           $image-5, $image-6,
+           $image-7, $image-8,
+           $image-9, $image-10);
+
+  $assets:    false;
+  $gradients: false;
+  $count: 0;
+
+  //Find all asset images in list
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i));
+
+    @if $type == list {
+      $count: $count + 1;
+    }
+
+    @else if $type == string {
+      @if $assets == false {
+        $assets: nth($images, $i);
+      }
+
+      @else {
+        $assets: join($assets, nth($images, $i), comma);
+      }
+    }
+  }
+
+  // Find all gradients in list
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i));
+
+    @if $type == list {
+      @if $gradients == false {
+        $gradients: nth($images, $i);
+      }
+      @else {
+        $gradients: $gradients, nth($images, $i);
+      }
+    }
+  }
+
+  @function render-gradients($gradients, $vendor: false) {
+    @if $count == 1 {
+      $vendor-gradients: false;
+      @if $vendor {
+        $vendor-gradients: -#{$vendor}-linear-gradient($gradients);
+      }
+      @else if $vendor == false {
+        $vendor-gradients: linear-gradient($gradients);
+      }
+      @return $vendor-gradients;
+    }
+
+    @else if $count >= 2 {
+      $vendor-gradients: false;
+      @for $i from 1 through length($gradients) {
+        @if $vendor {
+          @if $vendor-gradients == false {
+            $vendor-gradients: -#{$vendor}-linear-gradient(nth($gradients, $i));
+          }
+          @else {
+            $vendor-gradients: $vendor-gradients, -#{$vendor}-linear-gradient(nth($gradients, $i));
+          }
+        }
+        @else if $vendor == false {
+          @if $vendor-gradients {
+            $vendor-gradients: "linear-gradient(#{nth($gradients, $i)})";
+            $vendor-gradients: unquote($vendor-gradients);
+          }
+          @else {
+            $vendor-gradients: $vendor-gradients, "linear-gradient( #{nth($gradients, $i)} )";
+            $vendor-gradients: unquote($vendor-gradients);
+          }
+        }
+      }
+      @return $vendor-gradients;
+    }
+  }
+
+
+  @if $assets {
+    @if $count >= 1 {
+      background-image: $assets, render-gradients($gradients, webkit);
+      background-image: $assets, render-gradients($gradients, moz);
+      background-image: $assets, render-gradients($gradients, ms);
+      background-image: $assets, render-gradients($gradients, o);
+      background-image: $assets, render-gradients($gradients);
+
+    }
+    @else {
+      background-image: $assets;
+    }
+  }
+  @else {
+    @if $count >= 1 {
+      background-image: render-gradients($gradients, webkit);
+      background-image: render-gradients($gradients, moz);
+      background-image: render-gradients($gradients, ms);
+      background-image: render-gradients($gradients, o);
+      background-image: render-gradients($gradients);
+    }
+  }
+
+}
+
+//Examples:
+   //@include background-image(url("/images/a.png"), linear-gradient(#ffff00, #999));
+   //@include background-image(url("/images/a.png"), url("/images/b.png"), url("/images/c.png"), linear-gradient(#ffff00 10%, #000 20%));

data/app/assets/stylesheets/css3/_flex-box.css.scss

@@ -1,5 +1,13 @@
 // CSS3 Flexible Box Model and property defaults
 
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+  @include display-box;
+  @include box-orient($orient);
+  @include box-pack($pack);
+  @include box-align($align);
+}
+
 @mixin display-box {
   display: -webkit-box;
   display: -moz-box;

data/app/assets/stylesheets/css3/_linear-gradient.css.scss

@@ -8,7 +8,7 @@
   $pos-type: type-of(nth($pos, 1));
 
   // If $pos is missing from mixin, reassign vars and add default position
-  @if $pos-type == color {
+  @if $pos-type == color or transparent {
     $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
      $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
     $pos: top; // Default position

data/app/assets/stylesheets/functions/_golden-ratio.css.scss

@@ -17,15 +17,15 @@
 }
 
 //  div {
-//                  Increment Up GR with positive value
-//    width:        golden-ratio(14px,  1);    // returns: 22.652px
+//                      Increment Up GR with positive value
+//    font-size:        golden-ratio(14px,  1);    // returns: 22.652px
 //
-//                  Increment Down GR with negative value
-//    width:        golden-ratio(14px, -1);    // returns: 8.653px
+//                      Increment Down GR with negative value
+//    font-size:        golden-ratio(14px, -1);    // returns: 8.653px
 //
-//                  Can be used with ceil(round up) or floor(round down)
-//    width: floor( golden-ratio(14px,  1) );  // returns: 22px
-//    width:  ceil( golden-ratio(14px,  1) );  // returns: 23px
+//                     Can be used with ceil(round up) or floor(round down)
+//    font-size: floor( golden-ratio(14px,  1) );  // returns: 22px
+//    font-size:  ceil( golden-ratio(14px,  1) );  // returns: 23px
 //  }
 //
 // modularscale.com

data/app/assets/stylesheets/functions/_linear-gradient.css.scss

@@ -0,0 +1,28 @@
+@function linear-gradient($pos: top, $G1: false, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false) {
+
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if $pos-type == color or transparent {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+    $pos: top; // Default position
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  //If position was included in the mixin/function
+  @if type-of(nth($full, 1)) != color or transparent {
+    @return $full;
+  }
+
+  //Else add the default position
+  @else {
+    @return join($pos, $full, comma);
+  }
+}

data/generate-bourbon.sh

@@ -0,0 +1,28 @@
+#!/bin/sh
+
+# README
+# This will generate a bourbon directory and convert all .css.scss to .scss extensions.
+# The bourbon directory is for 'sass --watch' use outside of rails.
+# Step 1: Make install executable by changing permission
+#     chmod a+x generate-sass.sh
+
+# Step 2: Generate Files
+#     ./generate-sass.sh
+
+echo Creating directory...
+mkdir -p $PWD/bourbon/lib
+
+echo Copying files...
+cp -a $PWD/app/assets/stylesheets/* $PWD/bourbon
+cp -a $PWD/lib/* $PWD/bourbon/lib
+rm -r $PWD/bourbon/lib/tasks
+rm -r $PWD/bourbon/lib/bourbon/engine.rb
+rm -r $PWD/bourbon/lib/bourbon/version.rb
+
+echo Renaming files...
+find $PWD/bourbon -name "*.css.scss" | while read i;
+  do mv "$i" "${i%.css.scss}.scss";
+done
+
+echo Done.
+

data/lib/bourbon.rb

@@ -1,13 +1,17 @@
 module Bourbon
-  class Engine < ::Rails::Engine
-    require 'bourbon/engine'
-  end
+  if defined?(Rails)
+    class Engine < ::Rails::Engine
+      require 'bourbon/engine'
+    end
 
-  module Rails
-    class Railtie < ::Rails::Railtie
-      rake_tasks do
-        load "tasks/install.rake"
+    module Rails
+      class Railtie < ::Rails::Railtie
+        rake_tasks do
+          load "tasks/install.rake"
+        end
       end
     end
   end
 end
+
+require "bourbon/sass_extensions"

data/lib/bourbon/version.rb

@@ -1,3 +1,3 @@
 module Bourbon
-  VERSION = "0.0.8"
+  VERSION = "0.1.1"
 end

data/readme.md

@@ -1,5 +1,5 @@
 #Bourbon Sass Mixins
-The purpose of Bourbon Sass Mixins is to provide a comprehensive framework of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
+The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
 Bourbon uses SCSS syntax.
 
 #Requirements
@@ -35,18 +35,24 @@ Import the mixins at the beginning of your stylesheet
 
 
 #Install without Rails
-The following script will generate a sass directory and convert all .css.scss to .scss extensions. The sass directory is for 'sass --watch' use outside of rails.  
-Preliminary step: clone the repo and cd into the directory.
+The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails.  
+Preliminary step: clone this repo and cd into the directory.
 
 **Step 1:** Make script executable by changing file permission
 
-    chmod a+x generate-sass.sh
+    chmod a+x generate-bourbon.sh
 
 **Step 2:** Generate files
 
-    ./generate-sass.sh
+    ./generate-bourbon.sh
 
-**Step 3:** Move the new *sass* directory to your project's stylesheets directory.
+**Step 3:** Move the new *bourbon* directory into your project's sass directory. *e.g. stylesheets/sass/*
+
+**Step 4:** Bourbon requires an additional sass extension to output properly. You must watch your sass files with the following flag appended:  
+*-r ./bourbon/lib/bourbon.rb*
+
+    # Example (project root directory)
+    sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
 
 
 #Using Bourbon Vanilla Mixins
@@ -64,6 +70,20 @@ The animation mixins support comma separated lists of values, which allows diffe
     @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
 
 
+###Background-image
+
+The background-image mixin is helpful for chaining multiple comma deliminated background images and/or linear-gradients into one background-image property.Background-image supports up to 10 background-images.
+
+    # Multiple image assets
+    @include background-image(url("/images/a.png"), url("images/b.png"));
+
+    # Image asset with a linear-gradient
+    @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
+
+    # Multiple linear-gradients;
+    @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) );
+
+
 ###Border Radius
 
 Border-radius will also take short-hand notation.
@@ -104,6 +124,11 @@ The flex-box mixin is based on the 2009 w3c spec. The mixin with change to the f
       @include box-flex(2);
     }
 
+    # Alternative custom shorthand mixin.
+    div.parent {
+      @include box($orient: horizontal, $pack: center, $align: stretch);
+    }
+
 
 ###Inline-block
 
@@ -175,20 +200,31 @@ The compact function will strip out any value from a list that is 'false'. Takes
 Returns the golden ratio of a given number. Must provide a Pixel or Em value for first argument. Also takes a required increment value that is not zero and an integer: ...-3, -2, -1, 1, 2, 3...
 
     div {
-                    Increment Up GR with positive value
-      width:        golden-ratio(14px,  1);    // returns: 22.652px
+                        Increment Up GR with positive value
+      font-size:        golden-ratio(14px,  1);    // returns: 22.652px
 
-                    Increment Down GR with negative value
-      width:        golden-ratio(14px, -1);    // returns: 8.653px
+                        Increment Down GR with negative value
+      font-size:        golden-ratio(14px, -1);    // returns: 8.653px
 
-                    Can be used with ceil(round up) or floor(round down)
-      width: floor( golden-ratio(14px,  1) );  // returns: 22px
-      width:  ceil( golden-ratio(14px,  1) );  // returns: 23px
+                        Can be used with ceil(round up) or floor(round down)
+      font-size: floor( golden-ratio(14px,  1) );  // returns: 22px
+      font-size:  ceil( golden-ratio(14px,  1) );  // returns: 23px
     }
 
 Resources: [modularscale.com](http://modularscale.com) & [goldenratiocalculator.com](http://goldenratiocalculator.com)
 
 
+###Linear-gradient
+
+Outputs a linear-gradient. Use in conjuntion with the background-image mixin. The function takes the same arguments as the linear-gradient mixin (See Mixins section of this README).
+
+    # Image asset with a linear-gradient
+    @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
+
+    # Multiple linear-gradients;
+    @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) );
+
+
 ###Grid-width
 
 Easily setup and follow a grid based design. Need help gridding? Check out [gridulator.com](http://gridulator.com/)
@@ -253,6 +289,7 @@ The real power of the mixin is revealed when you pass in the optional color argu
     --------------------------------
       compact(*args)
       golden-ratio(*args)
+      linear-gradient(*args)
       grid-width(*args)
       shade(*args)
       tint(*args)
@@ -271,10 +308,12 @@ The real power of the mixin is revealed when you pass in the optional color argu
         @ animation-play-state(*args)
         @ animation-timing-function(*args)
 
+      @ background-image(*args)
       @ border-radius(*args)
       @ box-sizing(*args)
 
       flex-box
+        @ box(*args)
         @ box-align(*args)
         @ box-direction(*args)
         @ box-flex(*args)

metadata

@@ -1,13 +1,12 @@
 --- !ruby/object:Gem::Specification 
 name: bourbon
 version: !ruby/object:Gem::Version 
-  hash: 15
-  prerelease: 
+  prerelease: false
   segments: 
   - 0
-  - 0
-  - 8
-  version: 0.0.8
+  - 1
+  - 1
+  version: 0.1.1
 platform: ruby
 authors: 
 - Phil LaPier
@@ -17,7 +16,8 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-07-11 00:00:00 Z
+date: 2011-07-18 00:00:00 -04:00
+default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -27,7 +27,6 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 5
         segments: 
         - 3
         - 1
@@ -59,6 +58,7 @@ files:
 - app/assets/stylesheets/addons/_button.css.scss
 - app/assets/stylesheets/addons/_position.css.scss
 - app/assets/stylesheets/css3/_animation.css.scss
+- app/assets/stylesheets/css3/_background-image.css.scss
 - app/assets/stylesheets/css3/_border-radius.css.scss
 - app/assets/stylesheets/css3/_box-shadow.css.scss
 - app/assets/stylesheets/css3/_box-sizing.css.scss
@@ -68,17 +68,21 @@ files:
 - app/assets/stylesheets/css3/_radial-gradient.css.scss
 - app/assets/stylesheets/css3/_transform.css.scss
 - app/assets/stylesheets/css3/_transition.css.scss
-- app/assets/stylesheets/functions/_compact.css.scss
 - app/assets/stylesheets/functions/_golden-ratio.css.scss
 - app/assets/stylesheets/functions/_grid-width.css.scss
+- app/assets/stylesheets/functions/_linear-gradient.css.scss
 - app/assets/stylesheets/functions/_tint-shade.css.scss
 - bourbon.gemspec
-- generate-sass.sh
+- generate-bourbon.sh
 - lib/bourbon.rb
 - lib/bourbon/engine.rb
+- lib/bourbon/sass_extensions.rb
+- lib/bourbon/sass_extensions/functions.rb
+- lib/bourbon/sass_extensions/functions/compact.rb
 - lib/bourbon/version.rb
 - lib/tasks/install.rake
 - readme.md
+has_rdoc: true
 homepage: https://github.com/thoughtbot/bourbon
 licenses: []
 
@@ -92,7 +96,6 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: 3
       segments: 
       - 0
       version: "0"
@@ -101,14 +104,13 @@ required_rubygems_version: !ruby/object:Gem::Requirement
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: 3
       segments: 
       - 0
       version: "0"
 requirements: []
 
 rubyforge_project: bourbon
-rubygems_version: 1.8.5
+rubygems_version: 1.3.7
 signing_key: 
 specification_version: 3
 summary: Bourbon Sass Mixins using SCSS syntax.

data/app/assets/stylesheets/functions/_compact.css.scss

@@ -1,16 +0,0 @@
-@function compact($var-1,        $var-2: false,
-                  $var-3: false, $var-4: false,
-                  $var-5: false, $var-6: false,
-                  $var-7: false, $var-8: false,
-                  $var-9: false, $var-10: false) {
-  $full: $var-1;
-  $vars: $var-2, $var-3, $var-4, $var-5,
-         $var-6, $var-7, $var-8, $var-9, $var-10;
-
-  @each $var in $vars {
-    @if $var {
-      $full: $full, $var;
-    }
-  }
-  @return $full;
-}

data/generate-sass.sh

@@ -1,23 +0,0 @@
-#!/bin/sh
-
-# README
-# This will generate a sass directory and convert all .css.scss to .scss extensions.
-# The sass directory is for 'sass --watch' use outside of rails.
-# Step 1: Make install executable by changing permission
-#     chmod a+x generate-sass.sh
-
-# Step 2: Generate Files
-#     ./generate-sass.sh
-
-echo Creating directory...
-mkdir -p $PWD/sass
-
-echo Copying files...
-cp -a $PWD/app/assets/stylesheets/* $PWD/sass
-
-echo Renaming files...
-find $PWD/sass -name "*.css.scss" | while read i;
-  do mv "$i" "${i%.css.scss}.scss";
-done
-echo Done.
-