3d-ribbon 0.1.2 → 0.2.0

data/README.markdown

@@ -1,15 +1,13 @@
 #3D CSS Ribbons
 
 A extension (for [Compass](http://compass-style.org/)) to create 3D ribbons using only CSS. 
-**[Live example](http://jsfiddle.net/dzignus/LXJ7X/)**.
+**[Live example](http://codepen.io/dzignus/pen/yjLwD)**.
 
-![some nice example](http://static.tumblr.com/djfsbl4/N1qllypq4/ribbon_example.png) 
+![some nice example](http://i.imgur.com/O7o32NZ.png)
 
 The extension is inspired in [3D Ribbon Generator](http://www.css3d.net/ribbon-generator/).
 
 
-
-
 #Installation
 
 From the command line:
@@ -27,14 +25,9 @@ Installing into an existing project:
 	#import the extension into your scss/sass file
 	@import "3d-ribbon"
 
-Or create a new project:
-
-    compass create <project_name> -r 3d-ribbon --using 3d-ribbon 
-
-	#import the extension into your scss/sass file
-	@import "3d-ribbon"
-
+If you don't have/want use Compass, you can download the main sass file and import it:
 
+	@import "<path to the file>/_3d-ribbon.scss"
 
 
 #Intro
@@ -43,188 +36,171 @@ The extension offer a simple and flexible way to create 3D ribbons with CSS.
 
 Browser support:
 
-* IE7+
-* Firefox 3.5+
+* IE8+
+* Firefox
 * Google Chrome
 * Safari / Safari iOS
 
-Note: In IE7/8, box-shadows and border-radius only using [CSS3 Pie](http://compass-style.org/reference/compass/css3/pie/).
-
 ## First, in your HTML document:
 
-This is the basic structure to create a ribbon with two sides (left / right):
-
-	<div id="ribbon-example-foo">
+You only need a block element to apply the ribbon, for example:
 
-		<!--start ribbon-->
-		<div class="ribbon-wrapper">
-			<div class="ribbon-front">
-			
-				Here you can put some content (like "Lorem ipsum dolor sit amet...") or HTML elements
-				
-			</div>
-			<div class="ribbon-edge-left-top"></div>
-			<div class="ribbon-edge-right-top"></div>
-			<div class="ribbon-edge-left-bottom"></div>
-			<div class="ribbon-edge-right-bottom"></div>
-			<div class="ribbon-back-left"></div>
-			<div class="ribbon-back-right"></div>
-		</div>
-		<!--end ribbon -->
-
-	</div>
-
-
-If you need only one side in the ribbon, you can remove some `<div />`. For example, if you need a ribbon with only the right side, you can remove `<div class="ribbon-edge-left-top"></div>`, `<div class="ribbon-edge-left-bottom"></div>` and `<div class="ribbon-back-left"></div>`.
+	<h3 class="ribbon">This is my title</h3>
 
 
 ## Then, in your Sass document:
 
 **The simple way**:
 
-    #ribbon-example-foo{
-      @include ribbon($front-width: 400px);
+    .ribbon{
+      @include ribbon();
     }
 
 **The flexible way (with all options)**:
 
-    #ribbon-example-foo{
-      @include ribbon(
-              $front-width: 750px,
-              $sides: left-bottom,
-              $ribbon-height: 40px,
-              $front-color: #80B5AD, 
-              $edges-color: darken(#8ABD9A, 30%), 
-              $back-color: #8DBF96,
-              $back-width: 30px, 
-              $overlap-width: 35px, 
-              $overlap-height: 15px,
-              $border-radius: 7px,
-              $include-pie: true);
-    }
-
-
-
-#Settings:
-
-## $front-width: 
-
-The width of the ribbon content, in px. This is the only mandatory argument.
+    .ribbon{
+        @include ribbon(
+            // Set the background color of the ribbon
+            $background-color    : <color>,
 
+            // Set the position of the sides
+            $position            : <bottom> | <top>,
 
-## $sides:
+            // Set the sides of the ribbon
+            $sides               : <left> | <rigth> | <left right>,
 
-The sides of the ribbon (left / right) and position (top / bottom). Options availables:
+            // Set the width of the overlaps
+            $overlap-horizontal  : <width>,
 
-* `left-top`
-* `left-bottom`
-* `right-top`
-* `right-bottom`
+            // Set the height of the overlaps
+            $overlap-vertical    : <height>,
 
-For example, is you want a ribbon with only one side (right) and orientation top:
+            // Set the color of the edges
+            $overlap-color       : <color>
+        )
+    }
 
-      @include ribbon($front-width: 450px, $sides: right-top);
 
+#Settings:
 
-Default value: `left-bottom right-bottom`.
+## $background-color: 
 
+Set the background color of the ribbon. Default value: `#428bca`.
 
-## $ribbon-height:
 
-The height of the ribbon, in px. Default value: `40px`.
+## $position:
 
+Set the position of the sides. Default value: `top`.
 
-## $front-color:
 
-The color of the front of the ribbon. Default value: `#3A89CE`.
+## $sides:
 
+Set the sides of the ribbon. Default value: `left right`.
 
-## $edges-color:
 
-The color of the edges of the ribbon. Default value: `darken($front-color, 30%)`.
+## $overlap-horizontal:
 
+Set the width of the overlaps. Default value: `30px`.
 
-## $back-color:
 
-The color of the back part of the ribbon. Default value: `$front-color`.
+## $overlap-vertical:
 
+Set the height of the overlaps. Default value: `20px`.
 
-## $back-width:
 
-The width of the back part of the ribbon, in px. Default value: `40px`.
+## $overlap-color:
 
+Set the color of the edges. Default value: `darken(#428bca, 30%)`.
 
-## $overlap-width:
 
-The width of the overlap of the ribbon, in px. Default value: `30px`.
+#Adding the ribbon's back
 
+If you want the ribbon's back you need add some spans into your HTML:
 
-## $overlap-height:
 
-The height of the overlap of the ribbon, in px. Default value: `20px`.
+	<h3 class="ribbon">
+		This is my title
+		<span class="ribbon-left"></span>
+		<span class="ribbon-right"></span>
+	</h3>
 
+Later in your sass use the `ribbon-back` mixin:
 
-## $border-radius:
+    .ribbon-left{
+      @include ribbon-back($side: left);
+    }
 
-Border radius of the back part of the ribbon. Default value: `0`.
+    .ribbon-right{
+      @include ribbon-back($side: right);
+    }
 
+The mixin also have many setting for customization:
 
-## $include-pie:
+    .ribbon-back{
+        @include ribbon-back(
+            // The side to create. This is the only required param
+            $side,
 
-Support for CSS3 PIE (AKA: border-radius, box-shadow and others CSS3 styles for IE8/7/6). [More info](http://compass-style.org/reference/compass/css3/pie/). Remember set `$pie-behavior` with the path of the `PIE.htc` and deliver the file with the mime-type `Content-Type: text/x-component`.
+            // Set the background color of the ribbon's back
+            $background-color    : <color>,
 
-Default value: `false`.
+            // Set the position of the ribbon's back
+            $position            : <top> | <bottom>,
 
+            // Set the height of the ribbon's back
+            $height              : <height>,
 
+            // Set the width of the ribbon's back
+            $width               : <width>,
 
+            // Set the vertical distance of the ribbon's back
+            $horizontal-distance : <height>,
 
-#Examples
+            // Set the horizontal distance of the ribbon's back
+            $vertical-distance   : <width>,
 
-The examples in action can be found in `templates/project/3d-ribbon-examples.html`.
-    
-    #ribbon-example-1{
-      @include ribbon($front-width: 400px);
-    }
-    
-    #ribbon-example-2{
-      @include ribbon($front-width: 450px, $sides: left-top right-bottom); //Asimetric ribbon!
-    }
-    
-    #ribbon-example-3{
-      @include ribbon($front-width: 550px, $ribbon-height: 40px, $front-color: #8C46C3);
-    }
-    
-    #ribbon-example-4{
-      @include ribbon($front-width: 600px, $front-color: #8C46C3, $edges-color: darken(#9F4BBA, 10%), $back-color: #B952AE);
-    }
-    
-    #ribbon-example-5{
-      @include ribbon($front-width: 650px, $back-width: 20px, $overlap-width: 25px, $overlap-height: 10px);
-    }
-    
-    #ribbon-example-6{
-      @include ribbon($front-width: 650px, $back-width: 0);
-    }
-    
-    #ribbon-example-7{
-      @include ribbon($front-width: 700px, $border-radius: 5px);
-    }
-    
-    #ribbon-example-8{
-      @include ribbon(
-              $front-width: 750px,
-              $sides: left-bottom,
-              $ribbon-height: 40px,
-              $front-color: #80B5AD, 
-              $edges-color: darken(#8ABD9A, 30%), 
-              $back-color: #8DBF96,
-              $back-width: 30px, 
-              $overlap-width: 35px, 
-              $overlap-height: 15px,
-              $border-radius: 7px,
-              $include-pie: true);
+            // Set the color of the back's snip
+            $snip-color          : <color>
+        )
     }
 
+It's probably that the two mixins (`ribbon` and `ribbon-back`) share values, so, the best way is declare some variables to use with the mixins. For example:
 
+    $ribbon-background-color: #d9534f;
+    $ribbon-position: top;
+    $ribbon-sides: left right;
+    $ribbon-overlap-horizontal-distance: 20px;
+    $ribbon-overlap-vertical-distance: 15px;
+    $ribbon-back-width: 20px;
+    $ribbon-back-height: 30px;
 
-
+    .ribbon{
+      @include ribbon(
+        $background-color: $ribbon-background-color,
+        $position: $ribbon-position,
+        $sides: $ribbon-sides,
+        $overlap-horizontal: $ribbon-overlap-horizontal-distance,
+        $overlap-vertical: $ribbon-overlap-vertical-distance,
+        $overlap-color: darken($ribbon-background-color, 30%) 
+       );
+
+      @each $side in $ribbon-sides {
+
+        .ribbon-#{$side}{
+          @include ribbon-back(
+          $side: #{$side},
+          $background-color: $ribbon-background-color,
+          $position: $ribbon-position,
+          $width: $ribbon-back-width,
+          $height: $ribbon-back-height,
+          $horizontal-distance: $ribbon-overlap-horizontal-distance,
+          $vertical-distance: $ribbon-overlap-vertical-distance,
+          $snip-color: transparent
+          );
+        }
+
+      }
+      
+     }
+
+**[Live example](http://codepen.io/dzignus/pen/yjLwD)**

data/stylesheets/_3d-ribbon.scss

@@ -1,249 +1,175 @@
 // 3D CSS Ribbon ------------------------------------------------------------
-// Plugin by Leandro D'onofrio - http://dzign.us/
+// Plugin by Leandro D'Onofrio - http://dzign.us/
 
+//** Default variables for the ribbon **//
 
-// Imports --------------------------------------------------------------------
+$ribbon-3d-background-color: #428bca!default;
+$ribbon-3d-position: bottom!default;
+$ribbon-3d-sides: left right!default;
+$ribbon-3d-overlap-horizontal: 30px!default;
+$ribbon-3d-overlap-vertical: 20px!default;
+$ribbon-3d-overlap-color: darken($ribbon-3d-background-color, 30%)!default;
 
-@import "compass/css3/images";
-@import "compass/css3/box-shadow";
-@import "compass/css3/border-radius";
-@import "compass/css3/pie";
+//** 3D CSS Ribbon mixin **//
 
-//** 3D CSS Ribbon **//
-
-//The real name was "3d-ribbon" but mixins can't start with a number...
 @mixin ribbon(
 
-  // Set the sides of the ribbon
-  $sides             : left-bottom right-bottom,
-  
-  // Set the color of the ribbon
-  $front-color       : #3A89CE,
-  
-  // Set the color of the edges
-  $edges-color       : darken($front-color, 30%),
-  
-  // Set the color of the back sides
-  $back-color        : $front-color,
-  
-  // Set the width of the front
-  $front-width       : 0,
-  
-  // Set the height of the ribbon
-  $ribbon-height     : 40px,
-  
-  // Set the width of the back sides
-  $back-width        : 40px,
-  
-  // Set the width of the overlaps
-  $overlap-width     : 30px,
-  
-  // Set the height of the overlaps
-  $overlap-height    : 20px,
-  
-  // Set the distance of the overlaps
-  $overlap-distance  : 0,
-  
-  // Set the border radius of the back sides
-  $border-radius     : 0,
-  
-  //Support for CSS3 PIE - More info: http://compass-style.org/reference/compass/css3/pie/
-  $include-pie       : false
-  
-  ) {
-  
-  //If include CSS3 PIE, don't repeat position: relative
-  $pie-default-approach : none;
-  
-  //ribbon-wrapper
-  div.ribbon-wrapper {
-    height: ($ribbon-height + $overlap-height);
-    width: $front-width;
-    position: relative;
-    z-index: 3;
+    // Set the background color of the ribbon
+    $background-color    : $ribbon-3d-background-color,
     
-    //Shadow only for bottom sides
-    @if ($overlap-distance == 0) and ($sides == (left-bottom right-bottom)) or ($sides == (right-bottom left-bottom)) {
+    // Set the position of the sides
+    $position            : $ribbon-3d-position,
 
-      @include background(linear-gradient(#555 0px, rgba(255, 255, 255, 0) $overlap-height) 0 $ribbon-height);
-      
-    }
-    
-  }
-  
-  //ribbon-front
-  div.ribbon-front {
-    width: ($front-width + ($overlap-width*length($sides)) + ($overlap-distance*length($sides)));
-    height: $ribbon-height;
-    background-color: $front-color;
-    position: relative;
-    z-index: 2;
-    @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px);
-    
-    @if ($sides == right-top) or ($sides == right-bottom) {
-      
-      left: 0;
-      
-    } @else {
-      
-      left: -($overlap-width + $overlap-distance);
-    
-    }
-    
-    @if $include-pie == true {
+    // Set the sides of the ribbon
+    $sides               : $ribbon-3d-sides,
     
-      @include pie;
+    // Set the width of the overlaps
+    $overlap-horizontal  : $ribbon-3d-overlap-horizontal,
     
-    }
-    
-  }
-  
-  //for each side
-  @each $position in (left right) {
-    
-    //left side
-    @if ($position == left) and (($sides == left-top) or ($sides == left-bottom)) {
-    
-      div.ribbon-edge-left-top,
-      div.ribbon-edge-left-bottom {
-        @include _ribbon-edge(left, $overlap-width, $overlap-distance);
-      }
-      
-      div.ribbon-back-left {
-        @include _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, left, $overlap-distance, $include-pie);
-      }
-    
-    //right side
-    } @else if ($position == right) and (($sides == right-top) or ($sides == right-bottom)) {
-    
-      div.ribbon-edge-right-top,
-      div.ribbon-edge-right-bottom {
-        @include _ribbon-edge(right, $overlap-width, $overlap-distance);
-      }
-      
-       div.ribbon-back-right {
-        @include _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, right, $overlap-distance, $include-pie);
-      }
-    
-    //both sides
-    } @else if ($sides == (left-top right-top)) or ($sides == (left-bottom right-bottom)) or ($sides == (left-top right-bottom)) or ($sides == (left-bottom right-top)) or ($sides == (right-top left-top)) or ($sides == (right-bottom left-bottom)) or ($sides == (right-top left-bottom)) or ($sides == (right-bottom left-top)) {
-    
-      div.ribbon-edge-#{$position}-top,
-      div.ribbon-edge-#{$position}-bottom {
-        @include _ribbon-edge(#{$position}, $overlap-width, $overlap-distance);
+    // Set the height of the overlaps
+    $overlap-vertical    : $ribbon-3d-overlap-vertical,
+
+    // Set the color of the edges
+    $overlap-color       : $ribbon-3d-overlap-color
+
+  ) {
+
+    background-color: $background-color;
+    position: relative;
+    z-index: 6;
+
+    &:before, &:after{
+      content: "";
+      width: 0; 
+      height: 0;
+      position: absolute;
+      font-size: 0;
+      line-height: 0;
+      z-index: 5;
+
+      @if $position == "bottom" {
+        border-top: 0 solid transparent;
+        border-bottom: $overlap-vertical solid transparent;
+        bottom: -$overlap-vertical;
       }
-      
-      div.ribbon-back-#{$position} {
-        @include _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, #{$position}, $overlap-distance, $include-pie);
+
+      @if $position == "top" {
+        border-bottom: 0 solid transparent;
+        border-top: $overlap-vertical solid transparent;
+        top: -$overlap-vertical;
       }
-      
+
     }
-    
-  }
-  
-  //for each selected side
-  @each $side in $sides {
-    
-    //left-top side
-    @if $side ==  left-top {
-      
-      div.ribbon-edge-left-top {
-        bottom: ($ribbon-height + $overlap-height);
-        border-width: $overlap-height $overlap-width 0 0;
-        border-color: transparent $edges-color transparent transparent;
-      }
-      
-      div.ribbon-back-left {
-        top: -$overlap-height;
-      }
-    
-    //left-bottom side
-    } @else if $side ==  left-bottom {
-      
-      div.ribbon-edge-left-bottom {
-        top: $ribbon-height;
-        border-width: 0 $overlap-width $overlap-height 0;
-        border-color: transparent $edges-color transparent transparent;
-      }
-      
-      div.ribbon-back-left {
-        top: $overlap-height;
-      }
-    
-    //right-top side
-    } @else if $side ==  right-top {
-      
-      div.ribbon-edge-right-top {
-        bottom: ($ribbon-height + $overlap-height);
-        border-width: 0 $overlap-width $overlap-height 0;
-        border-color: transparent transparent $edges-color transparent;
-      }
-      
-      div.ribbon-back-right {
-        top: -$overlap-height;
-      }
-    
-    //right-bottom side
-    } @else if $side ==  right-bottom { 
-      
-      div.ribbon-edge-right-bottom {
-        top: $ribbon-height;
-        border-width: $overlap-height $overlap-width 0 0;
-        border-color: $edges-color transparent transparent transparent;
+
+    $sides-length: length($sides);
+
+    @if ($sides == right) or ($sides-length == 2) {
+
+      &:before{
+        border-left: $overlap-horizontal solid $overlap-color;
+        right: 0;
       }
-      
-      div.ribbon-back-right {
-        top: $overlap-height;
+
+    }
+
+    @if ($sides == left) or ($sides-length == 2) {
+
+      &:after{
+        border-right: $overlap-horizontal solid $overlap-color;
+        left: 0;
       }
-      
+
     }
-  
-  }
 
 }
 
-//private mixins
-@mixin _ribbon-edge($position, $overlap-width, $overlap-distance) {
+//** Default variables for the ribbon's back **//
 
-  height:0;
-  width:0;
-  position: absolute;
-  z-index: 1;
-  #{$position}: -($overlap-width + $overlap-distance);
-  border-style:solid;
-  
-}
+$ribbon-3d-back-background-color: $ribbon-3d-background-color!default;
+$ribbon-3d-back-position: $ribbon-3d-position!default;
+$ribbon-3d-back-height: 40px!default;
+$ribbon-3d-back-width: 60px!default;
+$ribbon-3d-back-horizontal-distance: $ribbon-3d-overlap-horizontal!default;
+$ribbon-3d-back-vertical-distance: $ribbon-3d-overlap-vertical!default;
+$ribbon-3d-back-snip-color: transparent!default;
+
+//** 3D CSS Ribbon mixin's back **//
+
+@mixin ribbon-back(
+
+    // The side to create
+    $side,
+
+    // Set the background color of the ribbon's back
+    $background-color    : $ribbon-3d-back-background-color,
+
+    // Set the position of the ribbon's back
+    $position            : $ribbon-3d-back-position,
+
+    // Set the height of the ribbon's back
+    $height              : $ribbon-3d-back-height,
+
+    // Set the width of the ribbon's back
+    $width               : $ribbon-3d-back-width,
+
+    // Set the vertical distance of the ribbon's back
+    $horizontal-distance : $ribbon-3d-back-horizontal-distance,
+
+    // Set the horizontal distance of the ribbon's back
+    $vertical-distance   : $ribbon-3d-back-vertical-distance,
 
-@mixin _ribbon-back($back-width, $ribbon-height, $back-color, $border-radius, $position, $overlap-distance, $include-pie) {
+    // Set the color of the back's snip
+    $snip-color          : $ribbon-3d-back-snip-color
 
-  width: $back-width;
-  height: $ribbon-height;
+  ){
+
+  display: block;
+  height: $height;
+  width: $width;
+  background-color: $background-color;
   position: absolute;
-  z-index: 0;
-  @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px);
-  
-  @if $border-radius != 0 {
-  
-    @if $position == left {
-    
-      @include border-left-radius($border-radius);
-      
-    } @else if $position == right {
-    
-      @include border-right-radius($border-radius);
-    
-    }
-      
+  z-index: -1;
+
+  @if $side == left {
+    left: - ($width - $horizontal-distance);
   }
-  
-  background-color: $back-color;
-  #{$position}: -($back-width + $overlap-distance);
-  
-  @if $include-pie == true {
-  
-    @include pie;
-  
+
+  @if $side == right {
+    right: - ($width - $horizontal-distance);
   }
 
-}
+  @if $position == bottom {
+    bottom: -$vertical-distance;
+  }
+
+  @if $position == top {
+    top: -$vertical-distance;
+  }
+
+  @if $snip-color != transparent {
+
+    &:before{
+      content: "";
+      width: 0; 
+      height: 0;
+      position: absolute;
+      font-size: 0;
+      line-height: 0;
+      border-bottom: $height / 2 solid transparent;
+      border-top: $height / 2 solid transparent;
+
+      @if $side == left {
+        border-left: ($height / 2) / 2 solid $snip-color;
+        left: 0;
+      }
+
+      @if $side == right {
+        border-right: ($height / 2) / 2 solid $snip-color;
+        right: 0;
+      }
+
+    }
+
+  }
 
+}