Letterform Shades

A little Sass library to work with the fantastic shadowing examples from Typekit Practice

Requirements

Letterform Shades requires a Sass compiler that includes the Sass 3.3 feature str-index, or a compatible implementation of said function.

Installation

Install either from Bower or RubyGems

bower install letterform-shades --save-dev

or

# Gemfile 
gem 'letterform-shades', '~>0.1'

Usage

Import into your stylesheet:

@import "letterform-shades";

Mixins

Close Shade

////////////////////////////// 
// - $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. 
////////////////////////////// 
@include close-shade($vertical, $horizontal, $from: 'top right', $distance: 10, $size: 0.005em){} 

Offset Shade

////////////////////////////// 
// - $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. 
////////////////////////////// 
@include offset-shade($background, $shade, $from: 'top right', $offset: .010em, $size: .030em) {}

Printer's Shade

////////////////////////////// 
// - $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. 
////////////////////////////// 
@include printers-shade($shade, $from: 'top right', $distance: 10, $size: 0.005em) {}

Split Shade

////////////////////////////// 
// Sandwich Split Shade 
// - $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. 
////////////////////////////// 
@include sandwich-shade($cookie, $flavor, $from: 'top right', $cookie-distance: 12, $flavor-distance: 29, $size: .005em) {}

////////////////////////////// 
// Reversing Split Shade 
// - $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. 
////////////////////////////// 
@include reverse-shade($depth, $shadow, $from: 'top right', $depth-distance: 25, $shadow-distance: 40, $size: .005em) {}

License

(c) Sam Richard, 2014

MIT