survivalkit 0.2.0 → 0.2.1

data/README.markdown

@@ -1,4 +1,4 @@
-# [The Coding Designer's Survival Kit](http://thecodingdesigner.com)
+# [The Coding Designer's Survival Kit](http://thecodingdesigner.com) ![project status](http://stillmaintained.com/canarymason/Survival-Kit.png) #
 
 **A Toolset for Designing Web Sites in the Browser**
 
@@ -7,9 +7,9 @@
 
   1. A set of starter HTML files to rapidly create a [living style guide](http://24ways.org/2011/front-end-style-guides) with most common **HTML elements and ui patterns**. It's easy to design and style these as is or customize them to your needs. Plus there's a blank page, based on the [HTML5 Boilerplate](http://html5boilerplate.com). Fill that with content and it won't be blank anymore.
   2. A set of **[Sass](http://sass-lang.com/)** mixins and patterns.
-  3. A flexible and comprehensive **Sass workflow** that focuses on giving you a ton of tools, but makes very few assumptions on how you'll use them. Keep your css as clean as you like, go mobile first, or build a very custom responsive site.
+  3. A flexible and comprehensive **Sass workflow** that focuses on giving you a ton of tools, but makes very few assumptions on how you'll use them. Keep your css clean and minimal, go mobile first, or build a very custom responsive site.
   4. Your favorite open source **javascript libraries**. But you don't need them all, all the time. The Survival Kit keeps them in a "side drawer" and you can experiment or use them as you need them.
-  5. A set of templates for creating [Style Tiles](http://badassideas.com/style-tiles-as-a-web-design-process-tool/), a very useful tool for conveying design concepts to clients. 
+  5. A set of templates for creating [Style Tiles](http://badassideas.com/style-tiles-as-a-web-design-process-tool/), a very useful tool for conveying design concepts to clients.
 
 
 ## Using the Survival Kit
@@ -29,10 +29,16 @@ The Survival Kit is a Compass extension. That means that you need to be using [S
 #### For New Compass Projects
   2. **Terminal**: `compass create my_project -r survivalkit -u survivalkit --javascripts-dir js --css-dir css`
 
+##### Note on Sass Warnings
+  When you first install or compile you may see some Sass warnings in your compiler. like: `WARNING on line 4:
+This selector doesn't have any properties and will not be rendered.`
+
+  These are compilation warnings, but they're intentional. I set up the sass files with many stub selectors that have no css properties. This way you can fill them in with the values you want, or simply leave them blank. If you leave them blank Sass omits them at compilation, but issues a warning on the assumption that you wanted to add a style there. I don't know of a way to suppress that warning during installation.
+
 
 ## 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/)~~ 
+~~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/)~~
 I'll be recording a new video soon.
 
 ## Requirements
@@ -42,11 +48,17 @@ I'll be recording a new video soon.
 
 ### Helpful
 
+These Compass extensions (and more) are pretty awesome.
+
 - [Susy](http://susy.oddbird.net/)
 - [Sassy Modular Scale](https://github.com/scottkellum/modular-scale)
 - [Color Schemer](https://github.com/scottkellum/color-schemer)
+- [Compass recipes](http://moox.github.com/compass-recipes/)
+- [OMG Text](http://jaredhardy.com/omg-text/)
+- [Sassy Buttons](http://jaredhardy.com/sassy-buttons/)
 - [Fancy Buttons](https://github.com/imathis/fancy-buttons)
 - [Livereload](http://livereload.com/)
+- [Sassy Text Shadow](http://sassymothereffingtextshadow.com/)
 
 
 ## Acknowledgements, Installation, & Documentation
@@ -95,5 +107,9 @@ Except included open source projects:
 - modernizr: BSD/MIT
 - pie: Apache/GPL
 - scrollability: Apache
-
-
+- joyride: MIT
+- orbit: MIT
+- reveal: MIT
+- flexslider: MIT
+- fitvids: WTFPL license
+- deorphan: MIT/GPL

data/lib/survivalkit.rb

@@ -3,7 +3,7 @@ Compass::Frameworks.register("survivalkit", :path => "#{File.dirname(__FILE__)}/
 
 module SurvivalKit
 
-  VERSION = "0.2.0"
-  DATE = "2011-11-19"
+  VERSION = "0.2.1"
+  DATE = "2012-03-03"
 
-end
+end

data/stylesheets/survivalkit/extend/_all.sass

@@ -1 +1,2 @@
-@import helpers
+@import helpers
+@import sticky-footer

data/stylesheets/survivalkit/extend/_helpers.sass

@@ -1,3 +1,8 @@
+@import ../mixins/helpers
+
+.clearfix
+  +kit-clearfix
+
 .hidden
   +hidden
 
@@ -10,6 +15,9 @@
 .invisible
   +invisible
 
+.constrain-to-parent
+  max-width: 100%
+
 .italic
   font-style: italic
 
@@ -17,4 +25,4 @@
   font-weight: bold
 
 .wireframe
-  outline: 1px dashed $red
+  outline: 1px dashed $red

data/stylesheets/survivalkit/extend/_sticky-footer.sass

@@ -0,0 +1,18 @@
+////////////////////////////
+// FLEXIBLE STICKY FOOTERS
+// http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
+////////////////////////////
+.html-frame
+  // apply to <html> and <body>
+  height: 100%
+  margin: 0pt
+.frame
+  // aplly to <body>
+  display: table
+  height: 100%
+  width: 100%
+.row
+  display: table-row
+.row-expand
+  @extend .row
+  height: 100%

data/stylesheets/survivalkit/functions/_all.sass

@@ -1,4 +1,3 @@
 @import calculations
 @import modular-scale
 @import color-schemer
-@import color

data/stylesheets/survivalkit/functions/_color-schemer.sass

@@ -1,3 +1,5 @@
+// Based on: https://github.com/scottkellum/color-schemer
+
 // Define color schemes quickly
 
 // Color schemes to choose from
@@ -171,10 +173,10 @@ $equalize: false !default
   @warn "Oops! You didn’t properly define $color-location (primary, secondary...)"
 
 // Write your basic color scheme
-$primary: color-schemer(primary) !default
-$secondary: color-schemer(secondary) !default
-$tertiary: color-schemer(tertiary) !default
-$quadrary: color-schemer(quadrary) !default
+// $primary: color-schemer(primary) !default
+// $secondary: color-schemer(secondary) !default
+// $tertiary: color-schemer(tertiary) !default
+// $quadrary: color-schemer(quadrary) !default
 
 // Tell other files that this is loaded.
-$color-schemer-loaded: true
+$color-schemer-loaded: true

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

@@ -2,7 +2,7 @@
 // https://github.com/scottkellum/modular-scale
 
 // Ratios
-$golden: 1.618
+$golden: 1.618 
 $gold: $golden
 $octave: (2 / 1)
 $major-seventh: (15 / 8)
@@ -39,27 +39,27 @@ $class-slug: ms !default
     @if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px'
       @return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
     @return ms-multibase-multiratio($multiple, $base-size, $ratio)
-
+    
   // if multiple base-sizes are passed in as a list
   // calculate values in using each base-size
   @if type-of($base-size) == 'list' and type-of($ratio) == 'number'
     @if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px'
       @return round(ms-multibase($multiple, $base-size, $ratio))
     @return ms-multibase($multiple, $base-size, $ratio)
-
+      
   // if multiple ratios are passed in as a list
   // calculate values in using each ratio
   @if type-of($base-size) == 'number' and type-of($ratio) == 'list'
     @if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px'
       @return round(ms-multiratio($multiple, $base-size, $ratio))
     @return ms-multiratio($multiple, $base-size, $ratio)
-
+    
   // If there are no lists just run the simple function
   @if unit(exponent($ratio, $multiple) * $base-size) == 'px'
     @return round(exponent($ratio, $multiple) * $base-size)
   @return exponent($ratio, $multiple) * $base-size
-
-
+  
+  
 // calculate values in using each base-size / ratio combination
 @function ms-multibase-multiratio($multiple, $base-size, $ratio)
   // start with an empty list to place all values in
@@ -77,10 +77,10 @@ $class-slug: ms !default
     @while $j <= length($ratio)
       // reset $modular-scale for each set
       $modular-scale: nth($base-size, $k)
-      // do the scale for each base-size using this ratio
+      // do the scale for each base-size using this ratio 
       @if $multiple > 0
         // up $multiple times
-        // and add the result to $scale-values
+        // and add the result to $scale-values        
         @for $i from 1 through $multiple
           $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
           $scale-values: append($scale-values, $modular-scale)
@@ -104,8 +104,8 @@ $class-slug: ms !default
     $k: $k + 1
   // return trimmed and sorted final list
   @return trim-sort($multiple, $scale-values, $base-size)
-
-
+    
+    
 // calculate values in using each base-size
 @function ms-multibase($multiple, $base-size, $ratio)
   // start with an empty list to place all values in
@@ -120,10 +120,10 @@ $class-slug: ms !default
       $scale-values: append($scale-values, nth($base-size, $k))
     // reset $modular-scale for each set
     $modular-scale: nth($base-size, $k)
-    // do the scale for each base-size using this ratio
+    // do the scale for each base-size using this ratio 
     @if $multiple > 0
       // up $multiple times
-      // and add the result to $scale-values
+      // and add the result to $scale-values        
       @for $i from 1 through $multiple
         $modular-scale: exponent($ratio, $i) * nth($base-size, $k)
         $scale-values: append($scale-values, $modular-scale)
@@ -147,7 +147,7 @@ $class-slug: ms !default
   // return trimmed and sorted final list
   @return trim-sort($multiple, $scale-values, $base-size)
 
-
+    
 // calculate values in using each ratio
 @function ms-multiratio($multiple, $base-size, $ratio)
   // start with an empty list to place all values in
@@ -164,7 +164,7 @@ $class-slug: ms !default
         $modular-scale: exponent(nth($ratio, $j), $i) * $base-size
         $scale-values: append($scale-values, $modular-scale)
       $j: $j + 1
-    // sort acsending
+    // sort acsending      
     $scale-values: sort-list($scale-values)
     // return the final value using the laced list
     @return nth($scale-values, $multiple)
@@ -184,28 +184,28 @@ $class-slug: ms !default
     $scale-values: sort-list($scale-values, 'dec')
     // return the final value using the laced list
     @return nth($scale-values, $multiple * -1)
-
-
+    
+    
 // trim and sort the final list
 @function trim-sort($multiple, $scale-values, $base-size)
   @if $multiple > 0
     // trim list so we can count from the lowest $base-size
     $scale-values: trim-list($scale-values, nth($base-size, 1))
-    // sort acsending
+    // sort acsending      
     $scale-values: sort-list($scale-values)
     // return the final value using the laced list
     @return nth($scale-values, $multiple)
   @else
     // trim list so we can count from the lowest $base-size
     $scale-values: trim-list($scale-values, nth($base-size, 1), 'dec')
-    // sort acsending
+    // sort acsending      
     $scale-values: sort-list($scale-values, 'dec')
     // return the final value using the laced list
     @return nth($scale-values, -$multiple)
-
-
+  
+  
 /////////////////////////////////////////////////////////////////////////
-
+  
 // Shortcut
 @function ms($multiple, $base-size, $ratio)
   // Return the value from the Modular Scale function
@@ -215,7 +215,7 @@ $class-slug: ms !default
 // Deprecated. Use the modular-scale() function instead
 =modular-scale($property, $multiple, $base-size, $ratio)
   // Print the $property and return the value from the Modular Scale function
-  @warn "The modular-scale mixin is deprecated. Instead use the function: width: modular-scale(3)"
+  @warn "The modular-scale mixin is deprecated. Instead use the function: width: modular-scale(3)" 
   #{$property}: modular-scale($multiple, $base-size, $ratio)
 
 // Classes Mixin
@@ -225,7 +225,7 @@ $class-slug: ms !default
     .#{$class-slug}-#{$i}
       // Print the $property and return the value from the Modular Scale function
       #{$property}: modular-scale($i, $base-size, $ratio)
-
+      
 
 /////////////////////////////////////////////////////////////////////////
 
@@ -249,7 +249,7 @@ $class-slug: ms !default
 // Sass list sorting support
 @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
+  // declare some empty lists to put our new order and temporary values 
   $new-order: ()
   $temp: ()
   // fill $temp with the contents of $list
@@ -289,8 +289,8 @@ $class-slug: ms !default
         @if nth($list, $k) < $high
           $temp: append($temp, nth($list, $k))
   @return $new-order
-
-
+  
+  
 // Sass list trimming support
 @function trim-list($list, $start, $dir: 'asc')
   // built-in list trimming in Sass would make this go away.

data/stylesheets/survivalkit/mixins/_all.sass

@@ -2,4 +2,4 @@
 @import typography
 @import layout
 @import ui
-@import sfx
+@import pseudo

data/stylesheets/survivalkit/mixins/_helpers.sass

@@ -23,7 +23,24 @@
 =invisible
   visibility: hidden
 
-
 =scale-image-ie($image)
   background: none
-  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{image_url($image, true, false)}",  sizingMethod="scale")
+  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{image_url($image, true, false)}",  sizingMethod="scale")
+
+=kit-clearfix
+  &:after
+    content: $space
+    display: table
+    clear: both
+  zoom: 1
+
+=accessible-color($background: $white)
+  @if lightness($background) >= 65%
+    color: $text-color
+  @else
+    color: white
+
+=clean-list
+  +no-bullets
+  margin-left: 0
+  padding-left: 0

data/stylesheets/survivalkit/mixins/_layout.sass

@@ -16,4 +16,4 @@
 =un-vertical-separation
   border-bottom: none
   margin-bottom: 0
-  padding-bottom: 0
+  padding-bottom: 0

data/stylesheets/survivalkit/mixins/_pseudo.sass

@@ -0,0 +1,14 @@
+////////////////////////////
+// ABSOLUTE PSEUDO ELEMENTS
+////////////////////////////
+
+
+// $side: can be 'before', 'after', or 'both'
+=pseudo($side: 'before')
+  position: relative
+  @if $side == 'both'
+    &:before, &:after
+      position: absolute
+  @else
+    &:#{$side}
+      position: absolute

data/stylesheets/survivalkit/mixins/_typography.sass

@@ -1,4 +1,4 @@
-/* Links --------------------------------------------------------------
+// Links --------------------------------------------------------------
 // replace underlines on links with bottom borders
 =better-links($normal, $hover: false, $active: false, $visited: false, $focus: false)
   &
@@ -16,7 +16,7 @@
     @if $active
       &:active
         border-bottom-color: $active
-        
+
 =undo-better-links
   &
     text-decoration: none
@@ -46,12 +46,6 @@
       border-bottom: none
 
 
-=accessible-color($background: $white)
-  @if lightness($background) >= 65%
-    color: $base-color
-  @else
-    color: white
-
 // add style and weight to:
 // http://compass-style.org/reference/compass/css3/font_face/#mixin-font-face
 =kit-font-face($name, $font-files, $eot: false, $style: false, $weight: false)
@@ -74,4 +68,14 @@
   -o-text-overflow: $method
   text-overflow:    $method
   .ie &
-    width: 100%
+    width: 100%
+
+
+// replace OL > LI numbers so they can be styled
+=replace-list-numbers
+  counter-reset: li
+  list-style-type: none
+  li
+    &:before
+      content: counter(li) ". "
+      counter-increment: li

data/stylesheets/survivalkit/mixins/_ui.sass

@@ -1,32 +1,63 @@
-/* create simple tabs from <a> unside <ul>
- * $dir is 'bottom' for standard tabs
- * 'top' for hanging tabs
- * assumes placement on UL
-=tabs($dir: bottom)
+// create simple tabs from <a> unside <ul>
+// $dir is 'bottom' for standard tabs
+// 'top' for hanging tabs
+// assumes placement on UL
+=tabs($dir: bottom, $border-color: $base-color, $border-color-active: $white, $background-color: $gray, $background-color-active: $white)
   +horizontal-list(3px)
   position: relative
   li
-    border-#{$dir}: 1px solid $base-color
+    border-#{$dir}: 1px solid $border-color
+    margin-top: 1px
     &.active
       a
-        padding-#{$dir}: 0
-        border-#{$dir}: 1px solid $white
+        border-#{$dir}: 1px solid $border-color-active
+        background-color: $background-color-active
+        // padding-#{$dir}: 0
     a
       border:
         width: 1px
         style: solid
-        color: $base-color
-      float: left
-      position: relative
-      #{$dir}: -1px
+        color: $border-color
+      background-color: $background-color
+      // float: left
+      // margin-top: -1px
+      // position: relative
+      // #{$dir}: -1px
+      padding: 0 0.25em
       @if $dir == bottom
-        padding: 0 0.25em 1px
         +border-top-radius
         +remove-link-underlines
       @else
-        padding: 1px 0.25em 0
         +border-bottom-radius
         border-top-width: 0
+      &:hover
+        background-color: $background-color-active
+        border-#{$dir}: 1px solid $border-color-active
+
+// remove drupal tab styling
+  apply to <ul>
+=drupal-tab-reset
+  border-bottom: 0 solid transparent
+  li
+    a
+      background-color: transparent
+      border-style: none
+      border-color: transparent
+      border-width: 0
+      float: none
+      position: static
+      bottom: auto
+      padding: 0
+      margin-right: 0
+      &:hover
+        background-color: transparent
+        border-color: transparent
+        border-bottom-color: transparent
+    &.active
+      a
+        background-color: transparent
+        border-color: transparent
+        border-bottom-color: transparent
 
 
 =decending-z-order-tab($count: 20)
@@ -43,7 +74,7 @@
       $i: $i - 1
 
 
-=clean-list
-  +no-bullets
-  margin-left: 0
-  padding-left: 0
+// universal transitions
+=transition-all($time: 0.2s, $ease: ease)
+  *
+    +transition(all $time $ease)