letterform-shades 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b82aac9997cedecc4d8abb77271b6348495affce
+  data.tar.gz: a6673d3baa70618a831f7bcedfcfb5fe8cc89540
+SHA512:
+  metadata.gz: dbfadfc32c0581e9d827133fccfb05e4a8e900578659362efcae4466efb2ab2046720349a491af9f109534762f9b2faaf92c134683765bb2b353c6e6736c2016
+  data.tar.gz: 8ccce47565f42df6416333dc300ec59e9618f23d827ca6721624d47796ea6ff1ab28b832f49bcec8c17b6f519d80ae9f4b292d8a3cdc435b72ca74e5989f796f

data/lib/letterform-shades.rb

@@ -0,0 +1,11 @@
+if (defined? Compass)
+  Compass::Frameworks.register(
+    "toolkit",
+    :path => "#{File.dirname(__FILE__)}/.."
+  )
+end
+
+module LetterformShades
+  VERSION = "0.1.0"
+  DATE = "2014-05-06"
+end

data/stylesheets/_letterform-shades.scss

@@ -0,0 +1,5 @@
+@import "letterform-shades/close-shade";
+@import "letterform-shades/offset-shade";
+@import "letterform-shades/printers-shade";
+@import "letterform-shades/sandwich-shade";
+@import "letterform-shades/reverse-shade";

data/stylesheets/letterform-shades/_close-shade.scss

@@ -0,0 +1,58 @@
+//////////////////////////////
+// Close-Shade Mixin, inspired by http://practice.typekit.com/lesson/using-shades/
+// - $vertical: The color for the vertical shade (consider a lowercase `r`)
+// - $horizontal: The color for the horizontal shade (consider the lowercase `r`)
+// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`
+// - $distance: The distance you want the shadow to extend. Must be a positive integer
+// - $size: The size you want each slice.
+//////////////////////////////
+@mixin close-shade($vertical, $horizontal, $from: 'top right', $distance: 10, $size: 0.005em) {
+  $holder: ();
+
+  $vbs1: 0;
+  $vbs2: $size;
+  $vs1: $size * -1;
+  $vs2: 0;
+
+  @if type-of($from == 'list') {
+    $from: '#{$from}';
+  }
+
+  @for $i from 0 to $distance {
+    $offset: $size * $i;
+    $value-bottom: ();
+    $value: ();
+
+    @if (str-index($from, 'right')) {
+      $value-bottom: $vbs1 - $offset;
+      $value: $vs1 - $offset;
+    }
+    @else if (str-index($from, 'left')) {
+      $value-bottom: $vbs1 + $offset;
+      $value: -1 * $vs1 + $offset;
+    }
+    @else {
+      $value-bottom: 0;
+      $value: 0;
+    }
+
+    @if (str-index($from, 'top')) {
+      $value-bottom: join($value-bottom, ($vbs2 + $offset));
+      $value: join($value, ($vs2 + $offset));
+    }
+     @else if (str-index($from, 'bottom')) {
+      $value-bottom: join($value-bottom, (-1 * $vbs2 - $offset));
+      $value: join($value, (-1 * $vs2 - $offset));
+    }
+    @else {
+      $value-bottom: join($value-bottom, 0);
+      $value: join($value, 0);
+    }
+
+    $value-bottom: join($value-bottom, $horizontal);
+    $value: join($value, $vertical);
+    $holder: append($holder, $value-bottom, comma);
+    $holder: append($holder, $value, comma);
+  }
+  text-shadow: $holder;
+}

data/stylesheets/letterform-shades/_offset-shade.scss

@@ -0,0 +1,55 @@
+//////////////////////////////
+// Offset-Shade Mixin, inspired by http://practice.typekit.com/lesson/using-shades/
+// - $background: The color of the background the text is on
+// - $shade: The color of the shadow
+// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`
+// - $offset: The distance you want the shade to be offset
+// - $size: The size you want the shade to be.
+//////////////////////////////
+@mixin offset-shade($background, $shade, $from: 'top right', $offset: .010em, $size: .030em) {
+
+  $size: $offset + $size;
+
+  $offsetShadow: '';
+  $shadeShadow: '';
+
+  @if type-of($from == 'list') {
+    $from: '#{$from}';
+  }
+
+  //////////////////////////////
+  // Left/Right
+  //////////////////////////////
+  @if str-index($from, 'right') {
+    $offsetShadow: $offset * -1;
+    $shadeShadow: $size * -1;
+  }
+  @else if str-index($from, 'left') {
+    $offsetShadow: $offset;
+    $shadeShadow: $size;
+  }
+  @else {
+    $offsetShadow: 0;
+    $shadeShadow: 0;
+  }
+
+  //////////////////////////////
+  // Top/Bottom
+  //////////////////////////////
+  @if str-index($from, 'top') {
+    $offsetShadow: append($offsetShadow, $offset, space);
+    $shadeShadow: append($shadeShadow, $size, space);
+  }
+  @else if str-index($from, 'bottom') {
+    $offsetShadow: append($offsetShadow, $offset * -1, space);
+    $shadeShadow: append($shadeShadow, $size * -1, space);
+  }
+
+  //////////////////////////////
+  // Colors and Shadow
+  //////////////////////////////
+  $offsetShadow: append($offsetShadow, $background, space);
+  $shadeShadow: append($shadeShadow, $shade, space);
+
+  text-shadow: $offsetShadow, $shadeShadow;
+}

data/stylesheets/letterform-shades/_printers-shade.scss

@@ -0,0 +1,11 @@
+//////////////////////////////
+// Printers-Shade Mixin, inspired by http://practice.typekit.com/lesson/using-shades/
+// - $shade: The color for the shade
+// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`
+// - $distance: The distance you want the shadow to extend. Must be a positive integer
+// - $size: The size you want each slice.
+//////////////////////////////
+@mixin printers-shade($shade, $from: 'top right', $distance: 10, $size: 0.005em) {
+
+  @include close-shade($shade, $shade, $from, $distance, $size);
+}

data/stylesheets/letterform-shades/_reverse-shade.scss

@@ -0,0 +1,82 @@
+//////////////////////////////
+// Reverse-Shade Mixin, inspired by http://practice.typekit.com/lesson/using-shades/
+// - $depth: The color for the depth shade
+// - $shadow: The color for the shadow
+// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`
+// - $depth-distance: The distance you want the depth to extend. Must be a positive integer
+// - $shadow-distance: The distance you want the shadow to extend. Must be a positive integer
+// - $size: The size you want each slice.
+//////////////////////////////
+@mixin reverse-shade($depth, $shadow, $from: 'top right', $depth-distance: 25, $shadow-distance: 40, $size: .005em) {
+  $holder: ();
+
+  $Left: 0;
+  $Top: 0;
+
+  $LeftAdd: 0;
+  $TopAdd: 0;
+
+  @if type-of($from == 'list') {
+    $from: '#{$from}';
+  }
+
+  //////////////////////////////
+  // Left/Right
+  //////////////////////////////
+  @if str-index($from, 'right') {
+    $Left: $size * -1;
+    $LeftAdd: $size * -1;
+  }
+  @if str-index($from, 'left') {
+    $Left: $size;
+    $LeftAdd: $size;
+  }
+
+  //////////////////////////////
+  // Top/Bottom
+  //////////////////////////////
+  @if str-index($from, 'top') {
+    $Top: $size * 2;
+    $TopAdd: $size;
+  }
+  @else if str-index($from, 'bottom') {
+    $Top: $size * -2;
+    $TopAdd: $size * -1;
+  }
+
+  //////////////////////////////
+  // Shading
+  //////////////////////////////
+  @for $i from 1 through $depth-distance + $shadow-distance {
+    @if $i != 1 {
+      @if $i % 2 == 0 {
+        @if ($i <= $depth-distance) {
+          $Left: $Left + $LeftAdd;
+        }
+        @else {
+          $Left: $Left - $LeftAdd;
+        }
+
+        $Top: $Top - $TopAdd;
+      }
+      @else if $i % 2 == 1 {
+        $Top: $Top + ($TopAdd * 2);
+
+      }
+    }
+
+    $shadowHolder: ();
+
+    $shadowHolder: append($shadowHolder, $Left, space);
+    $shadowHolder: append($shadowHolder, $Top, space);
+    @if $i <= $depth-distance {
+      $shadowHolder: append($shadowHolder, $depth, space);
+    }
+    @else {
+      $shadowHolder: append($shadowHolder, $shadow, space);
+    }
+
+    $holder: append($holder, $shadowHolder, comma);
+  }
+  text-shadow: $holder;
+}

data/stylesheets/letterform-shades/_sandwich-shade.scss

@@ -0,0 +1,79 @@
+//////////////////////////////
+// Sandwich-Shade Mixin, inspired by http://practice.typekit.com/lesson/using-shades/
+// - $cookie: The color for the "cookie"
+// - $flavor: The color for the "ice cream"
+// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`
+// - $cookie-distance: The distance you want the cookie to extend. Must be a positive integer
+// - $flavor-distance: The distance you want the flavor to extend. Must be a positive integer
+// - $size: The size you want each slice.
+//////////////////////////////
+@mixin sandwich-shade($cookie, $flavor, $from: 'top right', $cookie-distance: 12, $flavor-distance: 29, $size: .005em) {
+  $holder: ();
+
+  $Left: 0;
+  $Top: 0;
+
+  $LeftAdd: 0;
+  $TopAdd: 0;
+
+  @if type-of($from == 'list') {
+    $from: '#{$from}';
+  }
+
+  //////////////////////////////
+  // Left/Right
+  //////////////////////////////
+  @if str-index($from, 'right') {
+    $Left: $size * -1;
+    $LeftAdd: $size * -1;
+  }
+  @if str-index($from, 'left') {
+    $Left: $size;
+    $LeftAdd: $size;
+  }
+
+  //////////////////////////////
+  // Top/Bottom
+  //////////////////////////////
+  @if str-index($from, 'top') {
+    $Top: $size * 2;
+    $TopAdd: $size;
+  }
+  @else if str-index($from, 'bottom') {
+    $Top: $size * -2;
+    $TopAdd: $size * -1;
+  }
+
+  //////////////////////////////
+  // Top Cookie
+  //////////////////////////////
+  @for $i from 1 through $cookie-distance * 2 + $flavor-distance {
+    @if $i != 1 {
+      @if $i % 2 == 0 {
+        $Left: $Left + $LeftAdd;
+        $Top: $Top - $TopAdd;
+      }
+      @else if $i % 2 == 1 {
+        $Top: $Top + ($TopAdd * 2);
+
+      }
+    }
+
+
+    $shadow: ();
+
+    $shadow: append($shadow, $Left, space);
+    $shadow: append($shadow, $Top, space);
+    @if $i > $cookie-distance and $i < $cookie-distance + $flavor-distance {
+      $shadow: append($shadow, $flavor, space);
+    }
+    @else {
+      $shadow: append($shadow, $cookie, space);
+    }
+
+    $holder: append($holder, $shadow, comma);
+  }
+
+  color: $cookie;
+  text-shadow: $holder;
+}

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: letterform-shades
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Sam Richard
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-05-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.3.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.3.0
+description: Awesome letterform shade mixins based on Typekit Practice's Using Shades
+  lesson (http://practice.typekit.com/lesson/using-shades/)
+email:
+- sam@snug.ug
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/letterform-shades.rb
+- stylesheets/_letterform-shades.scss
+- stylesheets/letterform-shades/_close-shade.scss
+- stylesheets/letterform-shades/_offset-shade.scss
+- stylesheets/letterform-shades/_printers-shade.scss
+- stylesheets/letterform-shades/_reverse-shade.scss
+- stylesheets/letterform-shades/_sandwich-shade.scss
+homepage: https://github.com/snugug/letterform-shades
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '1.2'
+requirements: []
+rubyforge_project: letterform-shades
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Traditional Letterform Shades in Sass
+test_files: []