survivalkit 0.1

data/CHANGELOG.markdown

@@ -0,0 +1,4 @@
+# Changelog
+
+## 0.1 - November 19, 2011
+* convert previous version of the Kit to a Ruby Gem. 

data/README.markdown

@@ -0,0 +1,81 @@
+# The Coding Designer's Survival Kit (http://thecodingdesigner.com)
+
+## Overview
+
+This is a collection of Design-in-Browser tools and some great default markup. The idea here is that when you're designing in the browser you need something to design, and some great helpers to get your ideas onto the screen with as little friction as possible. I'm starting with the excellent HTML5 Boilerplate for the default markup. I've forked the css slightly but plan to mostly stay in sync with that project as it applies to the motive here. I'm also including some html files with common markup that needs to be designed for.
+
+- __index.html__ is empty and contains no content
+- __elements.html__ includes a collection of standard html elements
+- You'll find many other, including basic forms, content pages, sidebars, footers, etc
+
+This also includes a Sass / Compass folder that starts with some very clean defaults. I can't include those projects in this one, so you'll need to install Sass and Compass to get started with these, and I encourage you to install Susy and other projects like Fancy Buttons as well.
+
+## Getting Started
+
+I've created an intro [screencast](http://thecodingdesigner.com/tutorials/please-allow-me-introduce-myself) and a video podcast about using the Kit while designing in the browser at [The Coding Designer](http://thecodingdesigner.com/)
+
+## Requirements
+
+- [Sass](http://sass-lang.com/)
+- [Compass](http://compass-style.org/)
+
+### Helpful
+
+- [Susy](http://susy.oddbird.net/)
+- [Sassy Modular Scale](https://github.com/scottkellum/modular-scale)
+- [Color Schemer](https://github.com/scottkellum/color-schemer)
+- [Fancy Buttons](https://github.com/imathis/fancy-buttons)
+- [Livereload](http://livereload.com/)
+
+
+## Acknowledgements, Installation, & Documentation
+
+- [HTML5 Boilerplate](http://html5boilerplate.com)
+- [Sass](http://sass-lang.com/)
+- [Compass](http://compass-style.org/)
+- [Susy](http://susy.oddbird.net/)
+- [Fancy Buttons](https://github.com/imathis/fancy-buttons)
+- [Modernizr](http://modernizr.com/)
+- [Selectivizr](http://selectivizr.com/)
+- [Modularscale](http://modularscale.com/)
+- more, more, more
+- [Screencast](http://thecodingdesigner.com/)
+
+
+
+
+
+## License
+
+Licensed under MIT/GPL.
+
+GPL license:
+http://www.gnu.org/licenses/gpl.html
+
+MIT license:
+http://www.opensource.org/licenses/mit-license.php
+
+
+Except included open source projects:
+* BigText: MIT/GPL
+* Dynamic-Carousel: MIT
+* flexie: MIT
+* flickrbomb: MIT
+* formalize: MIT/GPL
+* FitText: WTFPL license
+* Geared-Scrolling: MIT
+* Lettering.js: WTFPL license
+* PaintbrushJS: MIT
+* Respond: MIT/GPLv2
+* Sticky-Footer-jQuery-Plugin: MIT
+* html5-boilerplate: public domain
+* iSwipe-jQuery-Plugin: MIT
+* infinite-scroll: MIT
+* jquery-lightbox: BSD
+* jquery-ui: MIT/GPL
+* modernizr: BSD/MIT
+* pie: Apache/GPL
+* scrollability: Apache
+
+
+

data/VERSION

@@ -0,0 +1 @@
+0.1

data/lib/survivalkit.rb

@@ -0,0 +1,9 @@
+require 'compass'
+Compass::Frameworks.register("survivalkit", :path => "#{File.dirname(__FILE__)}/..")
+
+module SurvivalKit
+
+  VERSION = "0.1"
+  DATE = "2011-11-19"
+
+end

data/stylesheets/survivalkit/extend/_all.sass

@@ -0,0 +1 @@
+@import helpers

data/stylesheets/survivalkit/extend/_helpers.sass

@@ -0,0 +1,20 @@
+.hidden
+  +hidden
+
+.visuallyhidden
+  +visuallyhidden
+
+.visuallyhidden.focusable
+  +visuallyhidden(true)
+
+.invisible
+  +invisible
+
+.italic
+  font-style: italic
+
+.bold
+  font-weight: bold
+
+.wireframe
+  outline: 1px dashed $red

data/stylesheets/survivalkit/functions/_all.sass

@@ -0,0 +1,3 @@
+@import calculations
+@import modular-scale
+@import color

data/stylesheets/survivalkit/functions/_calculations.sass

@@ -0,0 +1,19 @@
+// Generic function to calculate a percentage based on pixel values
+  (independent of any specific grid system)
+@function calc-percent($target, $container)
+  @return ($target / $container) * 100%
+
+@function calc-em($target, $container)
+  @return ($target / $container) * 1em
+
+// shortcut name
+@function cp($target, $container)
+  @return calc-percent($target, $container)
+
+@function ce($target, $container)
+  @return calc-em($target, $container)
+
+// return the width of an arbitrary number of columns in a css grid system
+@function calc-col-width($number-of-cols)
+  $calc-width: ($kit-col-width * $number-of-cols) + ($kit-gutter-width * ($number-of-cols - 1))
+  @return $calc-width

data/stylesheets/survivalkit/functions/_color.sass

@@ -0,0 +1,7 @@
+// Add percentage of white to a color
+@function tint($color, $percent)
+  @return mix(white, $color, $percent)
+
+// Add percentage of black to a color
+@function shade($color, $percent)
+  @return mix(black, $color, $percent)

data/stylesheets/survivalkit/functions/_modular-scale.sass

@@ -0,0 +1,142 @@
+// Based on: https://github.com/scottkellum/modular-scale
+
+// Ratios
+$golden: 1.618
+$octave: (2 / 1)
+$major-seventh: (15 / 8)
+$minor-seventh: (16 / 9)
+$major-sixth: (5 / 3)
+$minor-sixth: (8 / 5)
+$fifth: (3 / 2)
+$fourth: (4 / 3)
+$major-third: (5 / 4)
+$minor-third: (6 / 5)
+$major-second: (9 / 8)
+$minor-second: (16 / 15)
+
+// Defaults
+$ratio: $golden !default
+$base-size: 12px !default
+$property: font-size !default
+$class-slug: ms !default
+
+// Modular Scale function
+@function modular-scale($multiple, $base-size, $ratio)
+  // return the $base-size if $multiple is zero
+  @if $multiple == 0
+    @return $base-size
+  // if multiple ratios are passed in as a list
+  // calculate values in using each ratio
+  @if type-of($ratio) == 'list'
+    // start with an empty list to place all values in
+    $scale-values: ()
+    // If $multiple is a positive integer (up the scale)
+    @if $multiple > 0
+      $j: 1
+      // take each ratio in turn
+      @while $j <= length($ratio)
+        // reset $modular-scale for each set
+        $modular-scale: $base-size
+        // do the scale using this ratio thru the multiple, and add the result to $scale-values
+        @for $i from 1 through $multiple
+          $modular-scale: $modular-scale * nth($ratio, $j)
+          $scale-values: append($scale-values, $modular-scale)
+        $j: $j + 1
+      // sort acsending
+      $scale-values: sort-list($scale-values)
+      // return the final value using the laced list
+      @return nth($scale-values, $multiple)
+    // If $multiple is a negative integer (down the scale)
+    @if $multiple < 0
+      $j: 1
+      // take each ratio in turn
+      @while $j <= length($ratio)
+        // reset $modular-scale for each set
+        $modular-scale: $base-size
+        // do the scale using this ratio thru the multiple, and add the result to $scale-values
+        @for $i from 1 through ($multiple * -1)
+          $modular-scale: $modular-scale / nth($ratio, $j)
+          $scale-values: append($scale-values, $modular-scale)
+        $j: $j + 1
+      // sort acsending
+      $scale-values: sort-list($scale-values, 'dec')
+      // return the final value using the laced list
+      @return nth($scale-values, $multiple * -1)
+
+  // if one ratio is passed in as a number
+  @if type-of($ratio) == 'number'
+    // On init, $modular-scale equals the default value of $base-size or the value passed to the function
+    $modular-scale: $base-size
+    // If $multiple is a positive integer (up the scale)
+    @if $multiple > 0
+      @for $i from 1 through $multiple
+        $modular-scale: $modular-scale * $ratio
+
+    // If $multiple is a negative integer (down the scale)
+    @if $multiple < 0
+      @for $i from 1 through ($multiple * -1)
+        $modular-scale: $modular-scale / $ratio
+
+    // Return the new or unchanged value of $modular-scale
+    @return $modular-scale
+
+// Shortcut
+@function ms($multiple, $base-size, $ratio)
+  // Return the value from the Modular Scale function
+  @return modular-scale($multiple, $base-size, $ratio)
+
+// Mixin
+=modular-scale($property, $multiple, $base-size, $ratio)
+  // Print the $property and return the value from the Modular Scale function
+  #{$property}: modular-scale($multiple, $base-size, $ratio)
+
+// Classes Mixin
+=modular-scale-classes($multiple, $property, $base-size, $ratio, $class-slug)
+  // Loop from 0 through the value of $multiple and generate a range of classes
+  @for $i from 0 through $multiple
+    .#{$class-slug}-#{$i}
+      +modular-scale($property, $i, $base-size, $ratio)
+
+
+@function sort-list($list, $dir: 'asc')
+  // built-in list sorting in Sass would make this go away.
+  // declare some empty lists to put our new order and temporary values
+  $new-order: ()
+  $temp: ()
+  // fill $temp with the contents of $list
+  $temp: join($temp, $list)
+  // if sorting ascending
+  @if $dir == 'asc'
+    // loop through all values in $list
+    @for $i from 1 through length($list)
+      // impossibly high starter value to compare
+      $low: 1000000
+      // check for lowest value in $temp
+      @for $j from 1 through length($temp)
+        @if nth($temp, $j) < $low
+          $low: nth($temp, $j)
+      // add lowest value to $new-order
+      $new-order: append($new-order, $low)
+      // empty $temp for the next comparison
+      $temp: ()
+      // re-populate $temp with remaining values to sort
+      @for $k from 1 through length($list)
+        @if nth($list, $k) > $low
+          $temp: append($temp, nth($list, $k))
+  @if $dir == 'dec'
+    // loop through all values in $list
+    @for $i from 1 through length($list)
+      // 0 starter value
+      $high: 0
+      // check for highest value in $temp
+      @for $j from 1 through length($temp)
+        @if nth($temp, $j) > $high
+          $high: nth($temp, $j)
+      $new-order: append($new-order, $high)
+      // empty $temp for the next comparison
+      $temp: ()
+      // re-populate $temp with remaining values to sort
+      @for $k from 1 through length($list)
+        @if nth($list, $k) < $high
+          $temp: append($temp, nth($list, $k))
+  @return $new-order

data/stylesheets/survivalkit/mixins/_all.sass

@@ -0,0 +1,5 @@
+@import helpers
+@import typography
+@import layout
+@import ui
+@import sfx

data/stylesheets/survivalkit/mixins/_helpers.sass

@@ -0,0 +1,29 @@
+=hidden
+  display: none !important
+  visibility: hidden
+
+=visuallyhidden($focusable: false)
+  border: 0
+  clip: rect(0 0 0 0)
+  height: 1px
+  margin: -1px
+  overflow: hidden
+  padding: 0
+  position: absolute
+  width: 1px
+  @if $focusable
+    &:active, &:focus
+      clip: auto
+      height: auto
+      margin: 0
+      overflow: visible
+      position: static
+      width: auto
+
+=invisible
+  visibility: hidden
+
+
+=scale-image-ie($image)
+  background: none
+  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{image_url($image, true, false)}",  sizingMethod="scale")

data/stylesheets/survivalkit/mixins/_layout.sass

@@ -0,0 +1,19 @@
+=vertical-separation($margin: $kit-baseline, $divide: false, $bordercolor: $border-color, $borderstyle: solid)
+  +pie-clearfix
+  @if $divide
+    border-bottom: $divide $borderstyle $bordercolor
+    margin-bottom: $margin * 0.5
+    padding-bottom: $margin * 0.5 - $divide
+  @else
+    margin-bottom: $margin * 0.5
+    padding-bottom: $margin * 0.5
+    border-bottom: none
+  &:last-child
+    padding-bottom: 0
+    border-bottom-width: 0
+    margin-bottom: 0
+
+=un-vertical-separation
+  border-bottom: none
+  margin-bottom: 0
+  padding-bottom: 0

data/stylesheets/survivalkit/mixins/_sfx.sass

@@ -0,0 +1,199 @@
+=gradient-bg($color, $top: 5, $bottom: $top)
+  @if $top < 0 and $bottom < 0
+    $color1: darken($color, abs($top))
+    $color2: lighten($color, abs($bottom))
+    +linear-gradient(color-stops($color1, $color2))
+  @else
+    $color1: lighten($color, abs($top))
+    $color2: darken($color, abs($bottom))
+    +linear-gradient(color-stops($color1, $color2))
+  background-color: $color
+
+
+// rotate a group of elements as if they were casually tossed on a table
+=scatter($rotate: 2deg -3deg 1deg, $child: false)
+  &:nth-of-type(2n+2)
+    @if $child
+      #{$child}
+        +rotate(nth($rotate, 1))
+    @else
+      +rotate(nth($rotate, 1))
+  &:nth-of-type(3n+3)
+    @if $child
+      #{$child}
+        +rotate(nth($rotate, 2))
+    @else
+      +rotate(nth($rotate, 2))
+  &:nth-of-type(5n+5)
+    @if $child
+      #{$child}
+        +rotate(nth($rotate, 3))
+    @else
+      +rotate(nth($rotate, 3))
+
+// css3 page curl effect
+  page-curl(
+    $position: top, right, bottom, left, top-left, top-right, bottom-right, bottom-left, top-left-bottom-right, top-right-bottom-left
+    $shadow-color: color
+    $box-shadow: true, false
+    $rotate: xxdeg
+=page-curl($position: bottom, $shadow-color: rgba($black, 0.7), $rotate: 6deg)
+  $skew: 15deg
+  display: block
+  position: relative
+  &:before, &:after
+    position: absolute
+    background: transparent
+    width: 40%
+    height: 20px
+    content: "\0020"
+  &:before
+    z-index: -1
+  &:after
+    z-index: -2
+
+  @if $position == top or $position == left or $position == top-left or $position == top-left-bottom-right
+    &:before
+      left: 0
+      top: 0
+      +transform-origin(0%, 0%)
+      +transform2d( rotate($rotate) skew($skew) )
+
+  @if $position == right or $position == top-right or $position == top-right-bottom-left
+    &:before
+      right: 0
+      top: 0
+      +transform-origin(100%, 0%)
+      +transform2d( rotate($rotate * -1) skew($skew * -1) )
+
+  @if $position == bottom or $position == bottom-left
+    &:before
+      left: 0
+      bottom: 0
+      +transform-origin(0%, 100%)
+      +transform2d( rotate($rotate * -1) skew($skew * -1) )
+
+  @if $position == bottom-right
+    &:before
+      right: 0
+      bottom: 0
+      +transform-origin(100%, 100%)
+      +transform2d( rotate($rotate) skew($skew) )
+
+  @if $position == top
+    &:after
+      right: 0
+      top: 0
+      +transform-origin(100%, 0%)
+      +transform2d( rotate($rotate * -1) skew($skew * -1) )
+
+  @if $position == right or $position == bottom or $position == top-left-bottom-right
+    &:after
+      right: 0
+      bottom: 0
+      +transform-origin(100%, 100%)
+      +transform2d( rotate($rotate) skew($skew) )
+
+  @if $position == left or $position == top-right-bottom-left
+    &:after
+      left: 0
+      bottom: 0
+      +transform-origin(0%, 100%)
+      +transform2d( rotate($rotate * -1) skew($skew * -1) )
+
+  @if $position == top
+    &:before
+      +box-shadow($shadow-color, 0px, -8px, 16px)
+    &:after
+      +box-shadow($shadow-color, 0px, -8px, 16px)
+
+  @if $position == right
+    &:before
+      +box-shadow($shadow-color, 8px, 0px, 16px)
+    &:after
+      +box-shadow($shadow-color, 8px, 0px, 16px)
+
+  @if $position == bottom
+    &:before
+      +box-shadow($shadow-color 0px 8px 16px)
+    &:after
+      +box-shadow($shadow-color 0px 8px 16px)
+
+  @if $position == left
+    &:before
+      +box-shadow($shadow-color, -8px, 0px, 16px)
+    &:after
+      +box-shadow($shadow-color, -8px, 0px, 16px)
+
+  @if $position == top-left
+    &:before
+      +box-shadow($shadow-color, 0px, -8px, 16px)
+
+  @if $position == top-right
+    &:before
+      +box-shadow($shadow-color, 0px, -8px, 16px)
+
+  @if $position == bottom-right
+    &:before
+      +box-shadow($shadow-color, 0px, 8px, 16px)
+
+  @if $position == bottom-left
+    &:before
+      +box-shadow($shadow-color, 0px, 8px, 16px)
+
+  @if $position == top-left-bottom-right
+    &:before
+      +box-shadow($shadow-color, 0px, -8px, 16px)
+    &:after
+      +box-shadow($shadow-color, 0px, 8px, 16px)
+
+  @if $position == top-right-bottom-left
+    &:before
+      +box-shadow($shadow-color, 0px, -8px, 16px)
+    &:after
+      +box-shadow($shadow-color, 0px, 8px, 16px)
+
+
+// CSS3 Tucked Corners effect
+  inspired by http://css-tricks.com/snippets/css/tucked-corners/
+  // expected markup:
+  <div class="this-element-gets-top-corners">
+    <span class="this-element-gets-bottom-corners"> <!-- Span used for bottom corners --></span>
+  </div>
+  Arguments:
+  $tape: the background css property
+  $inner-element: the selector for the inner element (for bottom corners)
+=tucked-corners($tape: rgba(white, 0.5), $inner-element: 'span.tucked-corners')
+  position: relative
+  +box-sizing(border-box)
+  &:after, &:before, #{$inner-element}:after, #{$inner-element}:before
+    background: $tape
+    content: ''
+    height: 50px
+    position: absolute
+    width: 100px
+    z-index: 10
+    +box-shadow(rgba(black, 0.5) 0 6px 9px -8px)
+  &:after
+    top: -25px
+    left: -50px
+    +rotate(-45deg)
+  &:before
+    top: -25px
+    right: -50px
+    +rotate(45deg)
+  #{$inner-element}
+    display: block
+    position: relative
+    padding: 20px
+    width: 100%
+    +box-sizing(border-box)
+    +box-shadow(rgba(black, 0.25) 0 0 10px 0 inset)
+    &:after
+      bottom: -25px
+      left: -50px
+      +rotate(-135deg)
+    &:before
+      bottom: -25px
+      right: -50px
+      +rotate(135deg)